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

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:

Lines now:

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…