View previous topic :: View next topic |
Author |
Message |
dissidentvox
Joined: 18 Apr 2005 Posts: 31 Location: North of England
|
Posted: Fri Sep 22, 2006 7:08 am Post subject: Tweaks Tables and colors using CSS! |
|
|
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!
Regards and thanks as always,
John B _________________ http://dissidentvox.com
http://citizenscoop.co.uk |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Fri Sep 22, 2006 10:57 am Post subject: Re: Tweaks Tables and colors using CSS! |
|
|
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. |
|
Back to top |
|
|
dissidentvox
Joined: 18 Apr 2005 Posts: 31 Location: North of England
|
Posted: Fri Sep 22, 2006 6:24 pm Post subject: |
|
|
John,
Cheers guvnor you sorted me right out! It's looking a lot better now, take a gander.. http://citizenscoop.blogharbor.com
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!
Thanks matey!
John B _________________ http://dissidentvox.com
http://citizenscoop.co.uk |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Fri Sep 22, 2006 7:28 pm Post subject: |
|
|
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! |
|
Back to top |
|
|
dissidentvox
Joined: 18 Apr 2005 Posts: 31 Location: North of England
|
|
Back to top |
|
|
dissidentvox
Joined: 18 Apr 2005 Posts: 31 Location: North of England
|
Posted: Sat Sep 23, 2006 6:20 am Post subject: |
|
|
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!
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 |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Sat Sep 23, 2006 7:56 am Post subject: Colors and borders in sidebar |
|
|
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 |
|
|
dissidentvox
Joined: 18 Apr 2005 Posts: 31 Location: North of England
|
Posted: Mon Oct 23, 2006 8:19 am Post subject: |
|
|
This question seemed relevant to this thread, so here it is!
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.
The quality of service here is as always, top notch! _________________ http://dissidentvox.com
http://citizenscoop.co.uk |
|
Back to top |
|
|
john Site Admin
Joined: 16 Mar 2004 Posts: 3434
|
Posted: Mon Oct 23, 2006 10:51 pm Post subject: |
|
|
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 |
|
|
Search all BlogHarbor support resources.
|
View previous topic :: View next topic |
|