Understanding CSS layout design for PBASE Galleries: Part 4 – Other gallery modes:

following on from part 3

You have your pages the way you want them for normal mode?  Time to have a check for the other modes…

So what about Treeview mode?

Its relatively simple, heres the model:

——– TREEVIEW GALLERY PAGE: ——–

<BODY>

<table> (holding the pbase menu bar)

<table> (with treepath and treeview/slideshow options)

<h2> (the title of the gallery) – annoying not wrapped in a class in this mode

<ul> (nested List of gallery links )

<li> (line with the link and count on it)

<A> (the gallery link)

<IMG> (somewhere in the list will be the arrow to the current gallery)

</li>

</ul>

</BODY>

NB: An annoying issue with this is the H2 gallery header is enclosed in #page-1 section in normal (thumbnail) mode but is just chilling on its own directly inside BODY section for treeview mode, so if like me you want a blog style layout for your pages it all goes a bit wrong here. You can squish the width but then that is squished for the normal mode. I’ll update this if I find a workaround.

I only added this extra for my treeview mode:

/*for the Treeview*/
UL
{
width:70%;
background: white;
text-align:left;
margin-left:auto;
margin-right:auto;
padding-top:1%;
padding-bottom:1%;
}

/*for the Treeview*/
LI
{
margin-left: 5%;
}

So what about slideshow gallery mode?

Its quite simple, heres the model:

——– Slideshow GALLERY PAGE: ——–

<BODY>

<table> (holding the pbase menu bar)

<table> (with treepath and treeview/slideshow options)

<DIV: #slideshow_container> (basically the whole page with slideshow java script)

<DIV: #slideshow_overlay>

<DIV: #slideshow_image_container>

<IMG: #slideshow_image>

<h3 #slideshow_info>

<a #slideshow_title> (title of the current photo)

<span #slideshow_counter> (1 of 42 etc – image counter)

</h3 #slideshow_info>

<DIV: #slideshow_controls> (the delay 1,3,pause section)

<span: #slideshow_status> (pause text)

<a #slideshow_help> (the question mark)

<DIV: #slideshow_helpbox> (help text and more help link)

</DIV: #slideshow_controls>

</DIV: #slideshow_image_container>

</DIV: #slideshow_container>

</BODY>

I only changed a few things for mine since I wanted it centred nicely and that’s all:

/* for slide show gallery mode*/
#slideshow_container
{
width: 70%;
background:white;
padding-bottom:2%;
margin-left:auto;
margin-right:auto;
}

#slideshow_controls
{
width: 50%;
}

part 5 next: go live…

About these ads

One thought on “Understanding CSS layout design for PBASE Galleries: Part 4 – Other gallery modes:

  1. Pingback: Understanding CSS layout design for PBASE Galleries: Part 5 – Go Live: « Memoirs of an Underwater Photographer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s