BlogHarbor Home Page
FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  UsergroupsRSS   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Tweaks Tables and colors using CSS!
 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks
View previous topic :: View next topic  
Author Message
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Fri Sep 22, 2006 7:08 am    Post subject: Tweaks Tables and colors using CSS! Reply with quote

Hi John,

So far I've managed a few customizations and I've done some basic ground work on this blog; http://citizenscoop.blogharbor.com.

I've managed to change the text color and the rollover color in the left table. I can't figure out how to change the day display in the 'This Month' part of the table from the orange it currently displays in, to the slate grey of the 'This Month' above it, and the 'Recent Articles' below it.

Other things I would still like to do but can't figure out include the following;

1. Change the central table day/date headings (e.g. Wednesday, September 20) to a slate grey.

2. Change all of the right table headings (Month Archive/Year Archive/Login/Links etc) to the same white that I have somehow managed to change the 'Main Page' heading in that table into!

3. Change the rollover color for the right table.

Sorry if this is all a tad confusing. I'd happily spend more time on a trial and error approach, but I have a rather annoying RSI condition, and a panel discussion for this years PodcasConUK to organise, + a day-job, so I'd rather not waste hours of valuable hand time messing about if it's possible to get answers from an expert like yourself! Very Happy

Regards and thanks as always,
John B
_________________
http://dissidentvox.com
http://citizenscoop.co.uk
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Fri Sep 22, 2006 10:57 am    Post subject: Re: Tweaks Tables and colors using CSS! Reply with quote

Remember that viewing the source of the page is the key to making changes via CSS. Firefox has a great feature, select some text on a page and right click your mouse (control click on Mac) and one of your options will be View Selection Source. Viewing the HTML source will help you pick out the CSS class you need to modify.

I've managed to change the text color and the rollover color in the left table. I can't figure out how to change the day display in the 'This Month' part of the table from the orange it currently displays in

That would be the componentCalendarDayname class. I just selected the name of a day, and did the View Selection Source trick, and saw this:

Code:
<td class="componentCalendarDayname">Tue</td>


So now I know to customize the componentCalendarDayname class in my style template.

Change the central table day/date headings (e.g. Wednesday, September 20) to a slate grey.

Same technique shows me this code:

Code:
<div class="postDate">Wednesday, September 20</div>


So now I know to customize the postDate class in my style template. Do a search for postDate in this forum and you will find some tips.

Change all of the right table headings (Month Archive/Year Archive/Login/Links etc) to the same white that I have somehow managed to change the 'Main Page' heading in that table into!

That is a link, and the default style sheet sets the componentHead link in a different color than a non-link. You could change the color of a non link in the right column like this:

Code:
#rightcol .componentHead {
    color: #FFFFFF;
}


Or change the link color of a component head in the right colum like this:

Code:
#rightcol a:link,


    color: #FFCC66;
}



Change the rollover color for the right table.

That would be done by adding some code like this:

Code:
#rightcol a:hover {
    color: #FFCC66;
}


I'd rather not waste hours of valuable hand time messing about if it's possible to get answers from an expert like yourself

Just do the View Selection Source trick will save both of us from RSI. Wink
Back to top
View user's profile Send private message Send e-mail Visit poster's website
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Fri Sep 22, 2006 6:24 pm    Post subject: Reply with quote

John,

Cheers guvnor you sorted me right out! It's looking a lot better now, take a gander.. http://citizenscoop.blogharbor.com Very Happy

BTW can you remind me how to ensure that when clicked on the links leave the Main Page open behind them. You told me before, but I'm blowed if I can remember what it was..

Couple of other tweeks I'll probably think of in time, but all in all I do declare I'm a very happy blogharbor camper.

And yes.. I will tell my friends! Laughing

Thanks matey!
John B
_________________
http://dissidentvox.com
http://citizenscoop.co.uk
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Fri Sep 22, 2006 7:28 pm    Post subject: Reply with quote

BTW can you remind me how to ensure that when clicked on the links leave the Main Page open behind them.

See this post.

And yes.. I will tell my friends!

Make new ones and tell them too! Wink
Back to top
View user's profile Send private message Send e-mail Visit poster's website
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Fri Sep 22, 2006 7:45 pm    Post subject: Reply with quote

Thanks mate.. Not sure how that xhtml-target.js tip works but it's great! Very Happy
_________________
http://dissidentvox.com
http://citizenscoop.co.uk
Back to top
View user's profile Send private message Send e-mail Visit poster's website
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Sat Sep 23, 2006 6:20 am    Post subject: Reply with quote

Back again!

I implemented one of your great tips for putting a shaded box around the day/date heading:

http://citizenscoop.blogharbor.com

I notice that I have a very slight line effect on the right hand side of left table also. If at all possible, I'd like to duplicate this on the right table, it adds a little definition and symmetry. I can now see why you like CSS tables and shading! Smile

Also the 'Home' link in the Header table is currently invisible (white on white), is it possible to change this without altering any of the other headings?

Thanks pal
John B
_________________
http://dissidentvox.com
http://citizenscoop.co.uk
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Sat Sep 23, 2006 7:56 am    Post subject: Colors and borders in sidebar Reply with quote

Quote:
I notice that I have a very slight line effect on the right hand side of left table also. If at all possible, I'd like to duplicate this on the right table, it adds a little definition and symmetry.


You could add a border to the right side of the right column like this:

Code:
table.columns td.right {
    border-right: 1px solid #999;
}


Or to the left side of the right col like this:

Code:
table.columns td.right {
    border-left: 1px solid #999;
}


Viewing the source shows that is the componentHomeLink class. As we noted earlier in this thread, you can change the link colors of a class like this:

Code:
.componentHomeLink a:link,
.componentHomeLink a:active,
.componentHomeLink a:visited {
    color: #FFCC66;
}


I didn't test it but that should do it for you
Back to top
View user's profile Send private message Send e-mail Visit poster's website
dissidentvox



Joined: 18 Apr 2005
Posts: 31
Location: North of England

PostPosted: Mon Oct 23, 2006 8:19 am    Post subject: Reply with quote

This question seemed relevant to this thread, so here it is! Smile

I've now managed thanks to your guidance, to change a number of the default template heading/Link and rollover colors to create the consistency of design I'm looking for.

At present I cant figure out where to make the changes for the orange/gold headings that appear at the top of the comment/permalink pages. (Example here) I'm referring to the links for Previous & Next at the top of the article page.

What are these headings called in the CSS Style sheet please, and is it these I need to change to alter the color?

Thanks as always. Very Happy

The quality of service here is as always, top notch! Wink
_________________
http://dissidentvox.com
http://citizenscoop.co.uk
Back to top
View user's profile Send private message Send e-mail Visit poster's website
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Mon Oct 23, 2006 10:51 pm    Post subject: Reply with quote

In this case, there are actually three classes which control the look of the "article Breadcrumbs" since we are using a table to control the alignment of these breadcrumbs. The main .articleBreadcrumb class controls the look of the table itself, the div.articleBreadcrumb table class configures the font, and the div.articleBreadcrumb span.emph class fine tunes the text style.

Here's your default styles:

Code:
.articleBreadcrumb {
    white-space: nowrap;
    padding: 6px 0 6px 0;
    margin: 0 0 25px 0;
    font: normal 10px Verdana,Helvetica,Arial,sans-serif;
    border-top: 1px dotted #999;
    border-bottom: 1px dotted #999;
}

div.articleBreadcrumb table {
    font: normal 10px Verdana,Helvetica,Arial,sans-serif;
}

div.articleBreadcrumb span.emph {
    font-weight: bold;
    background-color: transparent;
    color: #FF9900;
}


Copy and paste into your Custom CSS and revise as necessary.
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Search all BlogHarbor support resources.
View previous topic :: View next topic  
Display posts from previous:   
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum