Lead article CSS changes for dark backgrounds
Oct 13th, 2008 | By Ais | Category: News
Does your Branford Magazine website use a dark background? Are you using a light font color on a black or dark page? If so, you may have puzzled over necessary Lead Article fixes.
You can try a font color that looks dark enough on the Lead Article section, and light enough on the areas with dark backgrounds.
Or, you can change the Lead Article background to something that’s dark. You can either change the background image or make the Lead Article background a solid color.
If you want to keep the graded background image, work with the graphic image that has this name: branfordmagazine/images/backgrounds/bg_leadarticle.jpg
Or, here’s how to use your CSS file to change the background to any solid color:
Use your HTML editor or any text editor. You’ll be changing a file that, online, is probably in:
wp-content > themes
With your HTML editor or any text editing program, open the file with this name:
branfordmagazine/styles/ui.tabs.css
Look for the section of code that says this at the top:
.ui-tabs-panel { /* the main content-section of the tabbed area NOT the tabs themselfes */
You’ll see the following at the bottom of that .ui-tabs-panel section:
background: url(../images/backgrounds/bg_leadarticle.jpg) repeat-x #E6E3D3; /* declare background color for container to avoid distorted fonts in IE while fading */
}
You’ll change that to read:
background: #E6E3D3;
}
Next, replace #E6E3D3 with whatever color you want in the background. Upload it via FTP or your File Manager.
After you do that, your Lead Article box will have a solid color background.
If your headline color is now too dark, you can change the headline font color within the very next section.
You’re looking for color: #840000; in that section. Change the color to whatever you want the headline text color to be.
For example, if you want white text for your headline, change the code to read color: #FFFFFF;
Continue tweaking the colors until you have a color scheme that you like. Any colors are possible!
Hi!
I’d like all the linked text on my pages to display in the standard font rather than Branford’s default black, as it encourages clicks.
Is there a CSS or other change I can make to effect this?
Thanks as ever!
My previous comment somehow left out some words.
i meant “standard blue underlined font” …
In the newest version (2.6) of Branford Magazine, some code in the style.css fixes this problem. (My advice: Copy just that a href-related code to your existing style.css file.) It’s one improvement that I definitely like!
I’m working on isolating that code and making it available as part of a revised style.css sheet that will work with previous versions of Branford. I hope to have that online in the next week or so. (I need to test it with a variety of versions and several different hosting services, first.)
Hmm… I’ll have to double-check the CSS to see what’s in the new Branford version. I’m not sure that it will be possible. I know that the new CSS can underline the links. (That’s better than making the links bold, which I was doing manually at my own sites.)
The problem is that any link-related code can affect all links… including the sidebar list of categories. I’ve tried changing the CSS to make all links blue and underlined, and the sidebar was hideous with those links.
I’m working on it, and hope to have the best possible style.css ready in the next week or so.
Thanks – you’re right about the sidebar, it would be spoiled.
Can you alert me by email when you post an update?
Hi David, It’s best if you bookmark this website, subscribe to my newsletter (at right side of this page) or get the RSS feed from this site. I’d love to promise to email people individually, but I worry that someone will be omitted as I scroll through all of my emails. — Ais
id like to put this post on my site, think i could? Ill be sure to link back!
Hi, I’d be honored! Thanks for the link back! Cheerfully, Ais