How It Was Done
Right then. Now I’ve sorted the banner out here’s how the new look was created. First you start with the basic out-of-the-box TXP default page. Now I happen to like working with forms (templates) as they keep the default page nice and clean as I will show you in a bit, so I created new forms for the header, left menu, right menu and footer. There’s nothing particularly special in these so I’m not going to detail them. I then created the TXP tags to call the new forms into the default page and removed the existing div tags which are now contained in the new forms. There are only 2 additions to the default page (if you don’t count the templates): a rap div and the standard clearing div. TXP actually places the clear: both in the footer which works fine but I always put the clearing div in anyway as an added extra. So here’s what my default page template looks like:-
Not a lot to it really is there? There are more comments than anything else. Note the rap and container divs. These could go above the header but as this is a full-width design it’s not necessary. They do need to go at least to the footer or below it as I have them. The h1 is the page title you can see below the banner. In center which you can think of as content I’m calling 5 articles per page. The tags just below that are for the buttons you can find at the bottom of the page to go to older or newer posts. The 2 menus come before the content and I can’t say if this is required or not. That’s how the default comes and I didn’t want to alter it too much. You can see the additional clearing div just above the footer.
Now to style it. I’m only going to talk about the styling necessary to the construction rather than all about the colours and stuff I’ve used. The header will be at the top with my h1 sitting beneath it. The next thing is to position the menus. They are simply floated right and left and each has a width attributed to them. The center has left and right margins slightly larger than the widths given to the menus. It should then just slide between the menus with no other form of positioning necessary. It doesn’t need a width attribute for a full-width design. It’s this bit that will stretch or compress dependant on your visitor’s screen resolution. With the clearing div in place the footer will remain at the bottom where we want it. So there’s all the blocks in place.
Now we need to add the borders to the menus. We should all know by now (if not where have you been?) that adding border attributes to the menus in the CSS doesn’t look too good when the content is long cuz the borders will stop at the end of the menu content. So background images for the menus are required. “But there’s 2 of them” I hear you say. Well that’s where adding the rap div comes in. You need to add 1 image to the rap and 1 image to the container in the CSS. There is one thing you must remember. Whichever div is second inline, in my case the container, this div has to be transparent otherwise it will cover the image you’ve added in the first div so the 2 divs should look something like:-
And that’s all there is to it. It is too simple really isn’t it? I’m still waiting for someone to tell me it’s dropping to bits on such-and-such a browser.
Now here’s a little extra bit that I worked out whilst I was doing the design. I needed the links to be in an unordered list not unlike the way they are parsed in Wordpress. Go to the Links form and save it under a new name. Don’t forget to specify that it is a link type and remember what you called it. Now go to your new form and remove everything except the txp:link tag. Now go to the pages tab and look for the List of links option in the menu. Specify your new form in the form window, the category you want, the wrap tag which could be either ol or ul and the break which will be li. Then copy/paste the tag created into your menu or wherever you want it. You will end up with a list of links each with their own li and /li tags and the whole list enclosed in ol or ul tags. You still need to put your titles in of course but heck, I’m not going to do everything for you!!
Comments ( 2 )