Back by popular demand, I’m adding a new tutorial to my little series of Tutorials on understanding Pbase CSS
Customising your pbase home page
So how did I get my front page of pbase to look so different? Well I didn’t want any galleries showing, I wanted a fully customised front page from which to launch various galleries of my choice. This required not only a CSS change but also a structural change in my gallery hierarchy. Basically my front page CSS hides all the stuff that pbase would normally show (gallery thumbs etc) and formats my new code which I have placed inside the user description as new HTML.
Step 1: reorganise gallery hierarchy
So we want a new root gallery to take the place of my front page. I called mine “main”. I moved all my top level galleries into my main gallery so on my front page all that would be listed would be “main”.
Eg my tree view would now look like:
- root (All galleries link/front page)
-
- Main
- Underwater
- Sub galleries…
- Travel
- Sub galleries…
- Macro
- Sub galleries…
- Other
- Sub galleries…
- Private gallery for storing site images
- Underwater
- Main
My new main gallery can just have a normal gallery css (as developed in earlier tutorials).
Now we have a new root we can redesign the front page as we’d like it to look…
Step 2: create an offline copy of your front page to work on
For the next bit it is quite nice to use an offline file to code up the way you want your page to look. Since we are redesigning the front page it is very visible while we are in the design process, luckily there is a simple way around this. But first we have to create a new style sheet for the front page (I called mine suzyfrontpage). It doesn’t have to have anything in it yet but as long as your front page is pointing at it in time for the these steps:
- Go to your front page of pbase
- View the source of the page
- Create a folder on your computer somewhere (I put mine on the desktop)
- Inside the folder create a new blank html document (you can create a text doc and change the extension from .txt to .html)
- Copy and paste all the page source of your front page into the new doc
- Save and close the doc
Go back into your real pbase front page and change the css to whatever you originally had it on and open up your new css (suzyfrontpage) in a new internet window for editing.
Ok, now you have a mock up of your current pbase screen that points to a new css on pbase. For some reason its easier to edit pbase css on pbase itself but we can use this new html to see our changes without affecting our current site too much.
Step 3: Use css to hide all pbase front page elements
Open the html file you created (it will look the same as your current pbase front page but as we change the css on pbase we will see changes on this local file instead of our real pbase front page).
We use the following css to clear the decks so that our new code (when we add it to the description of root) will be all that shows.. 1st hide the menu using arjuns code and set the genal body settings as you did for the gallery css (as before in the other tutorials):
/* --- 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;}
/**/
/*general settings for whole body of gallery and image pages*/
BODY {
font-family:Verdana,Tahoma,Helvetica;
color:#333333;
font-size:80%;
background:#6f6a63;
text-align: center;
}
/*general settings for whole body of gallery and image pages*/
DIV,TH,TR,TABLE,LI,UL,FORM,BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5,CENTER{font-weight:normal;color:#333333;}
then we need to not show any tables on the rest of the page (this is a nice clean way of getting rid of the main gallery thumb that shows at the moment)
/*all tables not further defined*/
table { display:none;}
.gallery_hitcounts{ display:none;}
.gallery_comments { display:none;}
TD.thumbnail { display:none;}
img.thumbnail { display:none;}
then set the page up (I decided to go for a fixed width look where its set to 804 wide):
/*gallery page*/ #page-1 { background:#6f6a63; width: 804px; margin-top:2%; margin-bottom:2%; margin-left:auto; margin-right:auto; } #page-1 table {display:block;}
Now we come to the nitty gritty of designing our new layout…
Step 4: designing a layout
Best designed with good old fashioned pen & paper, sketch yourself out the sections you want for your new layout. I’ll explain my layout and hopefully you’ll be able to use that as an example to design something more personal to you.
1st we have to write some html to define our layout, after that we can make it look pretty in our css.
This is how my front page looks now:
Here I have outlined in red the following sections:
1) topmenubox
2) UpperPhoto
3) LowerPhoto
4) portfolios
5) lowermenubox
<click this image to see larger>
These sections are all included within one div called MainBox. These names allow me to reference the sections from within the css later. The names are made up, you can pretty much call the sections what you like as long as the names don’t already exist within the pbase page source that you copied earlier.
So, lets get changing some code! Inside your local html file that you made eariler (you can open it with a text editor – I like Notepad++ for coding web stuff) you should be able to search for the following:
<!-- BEGIN user desc -->
This (as you may expect) is the beginning of your user description (the box you can edit from within pbase). Everything from that tag down to this one:
<!-- END user desc -->
is something we can control.
Step 5: Adding layout sections
So, in your html file delete everything between those BEGIN/END user desc comment tags (to start with a fresh user descritpion) and put the following
<div id = "MainBox">
</div>
This creates the wrapper for the main part of the layout. Put the following into your css:
#MainBox
{
width: 100%;
margin-bottom:2%;
margin-left:auto;
margin-right:auto;
}
now we can start putting elements into that wrapper one section at a time.
The first section is the top menus. topmenubox. This section is made up of 6 links. I use <ul> & <li> tags to list them instead of a table because if you remeber we’ve hidden all tables in our css already. The code works like this:
<ul>
<li><a href="Link1">Text1</a></li>
<li><a href="Link2">Text2</a></li>
<li><a href="Link3">Text3</a></li>
<li><a href="Link4">Text4</a></li>
<li><a href="Link5">Text5</a></li>
<li><a href="Link6">Text6</a></li>
</ul>
where Link1 is the url of the link for the first word eg: http://www.pbase.com/suzy_walker/main
and Text1 is the text of the first word eg: Galleries
and so forth for links 2-6 and Text 2-6.
That code goes between the
<div id = "MainBox">
and the
</div>
tags in your html doc (I actually made it run all together on one line and have listed it here with more structure for clarity). To wrap that list in a wrapper put
<div id = "topmenubox">
before the <ul> and
</div>
after the </ul>.
put the following in your css to style these links (it should seem pretty obvious where you can change the colour and font attrbiutes):
#topmenubox ul
{
vertical-align: middle;
margin:0px;
padding:0px;
background:#6f6a63;
}
#topmenubox li
{
display:block;
height: 26px;
width: 133px;
font-family: Verdana;
font-size: 11px;
font-variant:small-caps;
letter-spacing: 0;
color: #ffffff;
float: left;
text-align: center;
}
#topmenubox li a:link, li a:active, li a:visited
{
display:block;
background:#6f6a63;
color: #ffffff;
text-decoration: none;
}
/*menu item link mouse-over*/
#topmenubox li a:hover
{
display:block;
background:#6f6a63;
color: #282828;
text-decoration: none;
}
Now for the images: Remember earlier when I said I’d choosen a fixed width of width: 804px? Well now I need to create my images to be 800px wide and the css is very simple because the html we will write holds the format. This is the css for the two main photo sections:
#UpperPhoto
{
width: 100%;
border: 0px;
}
#LowerPhoto{
width: 100%;
border: 0px;
}
And the html is simple too.
<div id="UpperPhoto"><img src="ImageLink1" width="800" height="260" border="0" alt="Gallery Image"/></div>
<div id="LowerPhoto"><img src="ImageLink2" width="800" height="205" border="0" alt="Gallery Image"/></div>
where ImageLink1 & 2 are the direct links to the 2 images you wish to use. eg: http://www.pbase.com/image/112432192/original.jpg
put this within the MainBox div tags in the html doc (but subsitute your own images of course). You should now beging to see how your mock pbase page is taking shape.
The last two div sections are basically two rows of links. One row, portfolios, is the four images along the bottom and the second row is the same set of links but as a list (like the top menu list) of links and words. This is so the user can click the image or the word and get the same link. For this I needed to prepare four images of 200px x 50px to be the images to my four hightlighted galleries (the widths would be different of course if you had more of less than four).
The code would look like this:
<div id="portfolios">
<a href="Link1"><img src="ImageLink1" width="200" height="50" border="0" alt="Text1"><
<a href="Link2"><img src="ImageLink2" width="200" height="50" border="0" alt="Text2"><
<a href="Link3"><img src="ImageLink3" width="200" height="50" border="0" alt="Text3"><
<a href="Link4"><img src="ImageLink4" width="200" height="50" border="0" alt="Text4"><
</div>
where Link1-4 are the html links to the galleries eg http://www.pbase.com/suzy_walker/reefbeasties
and ImageLink1-4 are the direct links to the prepared gallery images eg http://www.pbase.com/image/112431843/original.jpg
and Text1-4 are the alt text (the text that displays when the mouse hovers over the image eg: Underwater Galleries
The lowermenubox is basically the same set of links as the portfolios in the same order. It is the same list code as the topmenubox but with different links and text (and only four in the list).
To make the portfolios and lowermenubox links/images line up use the following in the CSS:
#portfolios{
width: 100%;
float:left;
border: 0px;
}
#lowermenubox ul
{
height:26px;
width:800px;
vertical-align: middle;
margin:0px;
padding:0px;
background:#6f6a63;
text-align:center;
}
#lowermenubox li
{
display:block;
height: 26px;
width: 200px;
font-family: Verdana;
font-size: 15px;
font-variant:small-caps;
font-weight:bold;
letter-spacing: 0;
color: #ffffff;
float: left;
text-align: center;
}
#lowermenubox li a:link, li a:active, li a:visited
{
display:block;
background:#6f6a63;
color: #ffffff;
text-decoration: none;
}
/*menu item link mouse-over*/
#lowermenubox li a:hover
{
display:block;
background:#6f6a63;
color: #282828;
text-decoration: none;
}
And thats it. Stick this one final thing at the bottom of your css and you are done, your local mock up of new front page is complete.
BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }
Step 6: Putting it live
Now all you need to do to put this live is the following:
- Edit your root gallery on pbase. Change the css back to your new one (the one you have been editing for this).
- Copy the code between the BEGIN/END user desc comment tags from your local html file that you have been working on
- paste that code into your user desc (as the raw code and dont add anything else)
- tick the box for “check if using html in the description. uncheck for automatic formatting”
- save gallery and view it.
- finish, celebrate.
Memoirs of an Underwater Photographer 
