HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Move Location of Details Box on Gallery Image Page

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#82114 (In Topic #17099)
Avatar

Community saint

I am trying to determine where the control is found to move location of Details box on Gallery image page. I was thinking it is in a template page but have hopes that it may only be a CSS issue (long shot?)

This is what I am trying to do

Anyone out there have an idea?

~~~~~~~~~~~~~~
I see it in the GALLERY_ENTRY_SCREEN.tpl and in the Galleries.CSS but am not sure how to get it to appear below the description box instead of above. I see how to move it left or right that appears easy although to the right is just fine with me.

~~~~~~~~~~~~~~

So this does appear to be a function of CSS being affected by top-margin and bottom-margins of .lined_up_boxes and Gallery_entry respectively. Now not sure how changing these two elements might affect other areas of the site unknowingly yet.

~~~~~~~~~~~~~~

Probably satisfied for now with this. decided not to move the details table to bottom but move it down to align with the other table. That other table got moved to the right which allows text to be the content of the table sandwich. Here it is


Last edit: by friendly


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#82126
Avatar

Community saint

I like that display.

Code?

 :$

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#82133
Avatar

Community saint

Fletch said

I like that display.

Code?

 
I needed a table like setup so I could put information about eaach painting I was showing on the gallery page and I also needed a description area to say something about the image. I do not use the ratings box but still the 'details' box shows up and takes space from the info I want the viewer to see (not so interested in the stats that the box shows but can live with it) This code will move the stat details down and the description box up to about the same level and it looks like you have a 3 column display. Here's what I did - if interested I hope it works for you. reccomend you try it first on a gallery test page.

I modified 2 things in the CSS codes. one in global.css that added the margin-top element and one in galleries.css that modified the existing margin-botton element.
For the global.css change:

.lined_up_boxes .right {
    margin-left: 1em;
    margin-top: 8.5em;
}

for the galleries.css change:

.gallery_entry_details {
    margin-bottom: -13em;
    width: 250px;
}


Here was the boxes and all I put in the description box when editing the gallery image page. WARNING~~ when you put the table in and the text in there you will see an overlap in the editing box but it shows up right to the viewer.​ ALSO the table that I used is only partially shown figuring you will make your own but I show the info for the table size FYI.

<div style="height: auto; margin: 15px auto; width: 100%">
    <div class="inner">
        <h2 align="center">
            <b>CAPTION GOES HERE</b>
        </h2>
    </div>
    <span class="ocp_keep_block" style="cursor: pointer;" title="hide_txt">[hide_txt]<br />
    </span>
    <div class="standardbox_main_classic">
        <div class="float_surrounder">
            <div style="float: left; height: auto; width: 32%">
                <table align="left" border="1" cellpadding="2" cellspacing="1" class="solidborder" style="height: 10px; width: 310px">ALL THE REST OF THE TABLE INFO GOES IN HERE - DONT FORGET TO CLOSE TABLE
            </div>
            <div style="float: left; height: auto; width: 44%">
                <div class="standardbox_main_classic">
                    <div style="padding: 10px; text-align: left">
                        <div style="padding: 10px; text-align: left">
                           
                            <br />
                            CONTENT INFORMATION GOES IN HERE<br />
                            <br />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
[/hide_txt]


You will notice that I am using the hide text tag to keep all the table and the description info from showing up on the thumbnail tooltip mouseover thingie.​


Last edit: by friendly


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#82137
Avatar

Hi friendly, I noticed how the code corrupted there. I just tried reproducing using the WYSIWYG, a chunk of HTML, and SU'ing to your username, with no trouble. But I have seen this happen for users lots of times. If you can, I'd appreciate if you could record a very quick Jing video showing how to reproduce this.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#82138
Avatar

I am trying to determine where the control is found to move location of Details box on Gallery image page. I was thinking it is in a template page but have hopes that it may only be a CSS issue (long shot?)

GALLERY_ENTRY_SCREEN.tpl.

Code

{+START,BOX,{!DETAILS},,med}
...
{+END}


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#82144
Avatar

Community saint

If you go back to where I posted my code originally and look - it now shows rightly, I believe.


Art and Imagination
of David L Friend

http://davidlfriend.com

  My Art Gallery
powered by ocPortal
Back to the top
 
Posted
Rating:
#82145
Avatar

Community saint

thanks

To both.

boomarked

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: