adjusting "currentpage" text with Andreas00 template [SOLVED]

[biliousfrog]

Here's a link to the current WIP: www.biliousfrog.co.uk/index.php

I've adjusted the Andreas00 template a little with help from RonnieK on chat, however, there's still an issue with the current page menu text.

On initial install, the stylesheet didn't have a tag for .currentpage so it was just plain text, no background. I eventually worked out that adding the following at the bottom of the sheet got the button to act how I wanted:

.currentpage {
font-size:1em;
font-weight:100;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
margin:0;
padding:0;
letter-spacing:1px;
align:middle;
color:#bbbbbb;
background:#eaeaea url(uploads/andreas00_cmsms/menubg2.gif) bottom left repeat-x;
border-top:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #cccccc;
padding: 0px;
}

There's obviously a cleaner way of doing what I wanted but I'm just bungling along & found that it worked

The problem is that it still shows chunky, header text for the current page (in the menu) & it looks ugly IMO. I can't work out how to make it the same size...I've managed to change the letter spacing, colour etc. but can't change the "type" of text.

HELP!

[nivekiam]

What text are you talking about?

this text: "Steve Bjorck presents Biliousfrog web design, illustration, digital visualisation & animation. "  That text is in the wrong place in your template.  It's in the head portion of the template and should not be there or should be in a meta tag.

If you're talkinga bout the "Biliousfrog" and "3D design..." text, some simple css should fix that.

example:
#header h1 {font-size: 10em;font-family: comis Sans MS;}
#header p {font-size: 5em;font-family: comis Sans MS;}

[biliousfrog]

Sorry, I should have been clearer.

On the menu, the current page button.

EG. when on the home page the "home" button has really chunky text, when on the process page, the "process" button has really chunky text etc.

I can't find where to edit it anywhere. I can adjust most things, such as colour & letter spacing, with that bit of css but I can't adjust the font size or style.

[nivekiam]

To late for me to spend much more time on this now.  But I see what's happening now.  The current page is set as an H3 header.  If you add some css to style the H3 tag or remove the H3 tag from the stylesheet (Site Admin > Layout > StyleSheets) then you might be able to make some more head way into this.

[biliousfrog]

Thanks for your help. 

There wasn't an h3 tag there. After a lot of trial and error I've got it 99% there by doing this:

#header h3{
font-size:1.1em;
font-weight:normal;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
margin:0;
align:middle;
letter-spacing:1px;
color:#bbbbbb;
padding:10px 0 0 10px;
}

************************

.currentpage h3{
font-size:1.1em;
font-weight:normal;
height 20px;
display: block;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
margin:0;
padding:10px 0 0 10px;
letter-spacing:1px;
align:center;
color:#bbbbbb;
background:#eaeaea url(uploads/andreas00_cmsms/menubg2.gif) bottom left repeat-x;
border-top:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #cccccc;
}

I'm not sure what I need and don't need and what I should change to get it how I want it. Currently the button looks almost correct, the only minor problem is that the text is now across the bottom of the button rather than floating in the middle.

How can I get the text to float in the center and is there any way to clean up the code?

[nivekiam]

To style that the same as the rest, find this line:

Code: Select all

#avmenu li a {

to this

Code: Select all

#avmenu li a, #avmenu li h3 {

[biliousfrog]

that works but it styles it exactly the same so it doesn't have a "down" state. I just need to get the text centered like the rest of the buttons whilst keeping the current colour, weight, BG image etc.

[EDIT]

GOT IT!!!

It was the padding, changed the top & bottom to 5px each:

Code: Select all

padding:5px 0 5px 10px;

Before it was

Code: Select all

padding:10px 0 0 10px;

Such a simple thing, it was driving me nuts!

Thanks for your help, it's given me a bit more of an insite into CSS...no doubt it will be forgotten by the next time I need to use it