Understanding CSS layout design for PBASE Galleries: Part 5 – Go Live:

May 12, 2009

continued from part 4

Once you have your local pages looking the way you’d like  them too you’ll need to take your css file and upload the changes to pbase and apply to your galleries.

Add a new css to pbase

Go to one of your galleries and in the main gallery settings you’ll see the link for edit style sheets. This takes you to a page that defines all you style sheets. Go to the bottom where it says Create a new style sheet and add a name and click the button. This creates you a new sheet and puts in some example code for you. Delete all the sample code from the big box and paste in the code from you css test file. Then click update css button.

Apply to galleries

Now go through all your galleries (that you want the style on) and select your new style sheet from the dropdown.

The end

The great thing about this approach is, if you only have one style sheet across your whole site you can change the look of your whole site by changing one file in the future! I hope this has been helpful. Please leave a comment if you have any questions and I’ll try to answer – remember I’ve only just discovered this myself though ;) Your comments will get moderated so may not show up straight away.

Also, my css is not perfect yet so if I find out anymore tips or issues I’ll be sure to update this. Things I’ve not covered are Pblog galleries and pblog css and I think the main (all galleries) might be different.

My gallery is here and at some point I’ll do a front page tutorial. Also, I still need to cover pblog galleries and the profile page (yes you can customise this but I’m not quite sure how yet). Let me know by leaving a comment or contacting me if you found this useful.

http://www.pbase.com/suzy_walker/

Leave a Comment » | Photography | Tagged: , , , , | Permalink
Posted by suzywalker

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

May 12, 2009

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…

1 Comment | Photography | Tagged: , , , , | Permalink
Posted by suzywalker

Understanding CSS layout design for PBASE Galleries: Part 3 – Image page:

May 12, 2009

continuing on from part 2

The same css file needs to be flexible enough for it to be re-used for your Image page (because that is what pbase does). This provides some interesting results and little issues to overcome. Make yourself a little page-source-grab test page of a typical image page (mine was called ImagePage.html) and save in your test folder. Change the css in the HTML so it points at the test css file that your gallery is using (see the intro post)

When you load this in your browser you may notice its looks awful! You will no doubt need to put some styles in specially for the image page and its contents. Here’s my little page map that I used to help me:

——– IMAGE PAGE: —————-

<BODY>

table holding the pbase menu bar

<DIV: #commententry> holds input form when users click post a comment.

<DIV: .imagepage#imagepage >

<DIV: .localmenu#localmenu > (tolds the one row table for the top gallery links section treepath)

<DIV .slideshow#slideshow > (this is the upper previous next in a table)

<DIV .image#image >

< table.imagetable> (the main image)

A is the link to image

<IMG.display>  (is the actual image)

<SPAN .date>   (is the date of the image)

<SPAN .artist> (is the name of the artist)

</ table.imagetable>

</DIV .image#image >

<DIV .imageinfo#imageinfo >

<h3 .title > (the title of the image)

<DIV .techinfo#techinfo >

<SPAN .camera> (camera name and link)

<SPAN .exif> (basic info and hide/show exif link)

< table> (with full exif)

td.sb (first line)

td.lid (other cells)

< /table>

</DIV .techinfo#techinfo >

<DIV .othersizes#othersizes > (othersize links)

<DIV .slideshow#Div1 > (this is the lower previous next in a table)

<DIV .copyright#copyright > (copyright in a p)

</DIV .imageinfo#imageinfo >

not in a div just a table:

#voteContainer

post a comment is just inside this table with not div or class so it is only affected by #imagepage settings and above.

<DIV:  .comment_section >

<DIV: #commentlist>

<DIV: .comment> has all the comment info -name date etc inside

<DIV: .comment>

<DIV: .comment>

<DIV: .comment>

</DIV: #commentlist>

</DIV: .comment_section >

</DIV .imagepage#imagepage >

<DIV: .image_hitcounts> (two p.small with hit counts) </DIV: .image_hitcounts>

</BODY>

You’ll notice that  some stuff has the same name as the gallery page sections. You can define these just once in the css if you want them to look the same in both gallery and image page.

NB: One really annoying thing about the Pbase html for this is the “post a comment” link is inside .gallery_comments section for the gallery but just inside a table within #imagepage  on the image page.

Also, The name/tree path on the gallery page in only inside BODY but on the image page its within #imagepage  section.

stayed tuned for other gallery styles in part 4…

1 Comment | Photography | Tagged: , , , , | Permalink
Posted by suzywalker

Understanding CSS layout design for PBASE Galleries: Part 2 – Your own styles for galleries:

May 12, 2009

Following on from this intro post.

Right now we have our blank canvas we can begin. It can seem like a massive task looking at a mangled mess of html that we don’t really need or want to understand. We need to have a picture in our mind of how the folks at PBase have laid out our pages so we can start to style it one piece at a time. As I said I consider the HTML tags as a series on containers and each container has a name and a set of stuff that can be styled. I have gone through and tried to provide a map of the sections for a normal gallery page. The DIV and Span names are so that you can refer to each sections to define how each things looks.

——– STANDARD GALLERY PAGE: ——–

<BODY> (defines the top level)

<table> (holding the pbase menu bar)

<DIV: #commententry> holds input form when users click post a comment.

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

<DIV: #page-1 >

<DIV: #linkedsubgalleries >(all the other sub gallery links)

<SPAN .current >(the gallery name we r in (no link))

<SPAN .other >(the other gallery names with A link)

</DIV: #linkedsubgalleries >

<h2> (the title of the gallery)

<DIV: .galleryheader > (the user desc section)

<DIV: .thumbnails> (hold the massive table with all the image and gallery thumbnails)

<DIV: .gallery_comments >

<table>

#voteContainer

post a comment

</table>

<DIV: #commentlist>

<DIV: .comment> has all the comment info -name date etc inside

<DIV: .comment>

<DIV: .comment>

<DIV: .comment>

</DIV: #commentlist>

</DIV: .gallery_comments >

<DIV: .gallery_hitcounts > (p.small of hit counts)

</DIV: #page-1 >

</BODY>

If you set a style at the top container level it will be applied to all the little container levels until its gets overridden at a lower level. For example setting the background to blue on the BODY and the background to white on a lower level such as the H2 title bar you can see that your whole page is blue except for where the header H2 section overrides it. Paste this into your css to see what I mean.

BODY
{
background:blue;
}

h2
{
background:white;
}

Now you see the principle of this (and reading through this link http://www.w3schools.com/css/css_intro.asp will give you a much better explanation of some of the features you can apply to your styles than I can list here) you can build up your own styles. Bear in mind that the same css file needs to be flexible enough for it to be re-used for your Image page, so don’t get too into it before you read Part 3 of this explanation.

Test it in many browsers

Surprisingly the different browsers out there show pages slightly differently. I found that IE (internet explorer) was the most annoyingly picky so I designed for that and then re tested in Firefox, Safari and Chrome to make sure it looked ok in what I personally would use.

Colours
Simple colours can be defined my name eg: background:white;
For a more complex (nicer) range you may find it easier to define your colours as rgb rather than hash values (like I have). You can do that by putting something like background:rgb(100, 100, 100); and changing the numbers, most paint packages give a colour picker with RGB values you can choose from and just type in those numbers for the desired colour.

Part 3 will go over image gallery page…

Leave a Comment » | Photography | Tagged: , , , , | Permalink
Posted by suzywalker

Understanding CSS layout design for PBASE Galleries: Part 1 – Intro.

May 12, 2009

I’m in the process of redesigning the look of my pbase galleries, I thought I’d document my findings (mainly for myself when I forget how to do it and have to relearn when I want to change the look of the again). Let me just say I’m not a web programmer, far from it. I’m learning CSS as I do this so I’ll try as best I can to explain what I find out. First things first, what is CSS??

Most people know that a web page uses HTML to tell the browser what to display. PBase controls the HTML of the pages, which defines the content and the flow of the page (the order in which stuff gets put on screen). However we can define a CSS file which overlays this content to hide/show stuff and generally style it. You can use other peoples but if you want to design one yourself this tutorial is for you!

I consider the HTML tags as a series on containers and each container has a name and a set of stuff that can be styled. By referring to that name in the CSS you can set the style of that stuff. Here are a few links that are useful to use and refer back to through this process…

Very useful introduction and ref for CSS:

http://www.w3schools.com/css/css_intro.asp

Things to bear in mind if you want your css to look nice across different browsers:

http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/

Where to begin:

Well, we know that there are two styles of gallery you can choose from (in the gallery options)

  • Original style galleries
  • Pblog style galleries

I have only really started to look at the source for the original galleries, so we’ll start with those. The same css has to cover the style of multiple gallery modes and the image page itself so there are quite a few considerations when designing a css for pbase and I shall list all the ones that I came across here:

For the gallery:

  • Thumbnail mode (normal gallery style)
  • Treeview (like a sitemap, lists all your galleries in a nice hierarchy)
  • Slideshow
  • Are your linked sub galleries listed at the top?
  • What about when the users clicks ‘Post a comment’? How does that box look?
  • How does it look when you are logged out of pbase

For Image page

  • Normal Image page style with Exif hidden
  • Normal Image page style with Exif shown
  • What about when the users clicks ‘Post a comment’? How does that box look?
  • How does it look when you are logged out of pbase

So for ease and quickness I didn’t use pbase itself to help me design my css (I made that mistake last time). I made myself a little test harness, here’s how. I started by copying the page source (usually get the page source by going View -> Source on your browser) from one of my galleries and worked from there. It is useful to have some sort of web editor (I used Microsoft visual studio but just because it was installed on my pc anyway, you can just use a simple text editor like notepad. I wouldn’t use Microsoft word though because it does funky stuff with your web content).

Create a folder on your computer for your pbase testing. Inside the folder create a new empty text file and change the file extension from .txt to .css (mine was called SuzyGallery.css). Save the gallery HTML page source to a file called something like GalleryPage.html in that folder. Now you have the HTML as text you can see at the top there are a couple of lines that define a .css file. The first one is the pbase one and the second one is your one. Change the line that lists your one so points to the empty one you just created: eg:

Lines were:

<link rel=”stylesheet” type=”text/css” href=”http://i.pbase.com/styles/gallery2.css”>

<link rel=”stylesheet” type=”text/css” href=”http://css.pbase.com/styles/120501.css?t=1241781881″>

Lines now:

<link rel=”stylesheet” type=”text/css” href=”http://i.pbase.com/styles/gallery2.css”>

<link rel=”stylesheet” type=”text/css” href=”SuzyGallery.css”>

Now when you open this html page in your browser(s) you will be using the css styles defines in your local copy. This way, we can start off blank and build up our understanding of the sections that make up the page(s) in a local copy that nobody else can see. By the way, when your css file is blank, the styles you are seeing are the default gallery styles from the pbase i.pbase.com/styles/gallery2.css that your css will override as you add information to it.

Getting rid of the PBASE bar at the top:

Just cut to the chase and paste this little section into your css at the top. Kindly provided by arjun, it seem to work nicely and we don’t have to think too much about how it works (phew).

/* — simple code to hide the menu — */

/* — by arjun — http://www.pbase.com/arjunrc*/

body table td a img { display:none;}

.thumbnails table img {display:none;}

table img {display:block;}

.display,.display img {display:block;}

.thumbnails table,.thumbnails table img, .display,p.small{display: inline;}

body div.galleryheader table td a img {display:inline;}

/**/

Stay tuned for part two…

2 Comments | Photography | Tagged: , , , , | Permalink
Posted by suzywalker