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…
Pingback: Understanding CSS layout design for PBASE Galleries: Part 5 – Go Live: « Memoirs of an Underwater Photographer