Changing fonts for titles and widgets
-
I need some serious help with this!
I’ve figured out how to change the font for the body of my posts.
Now I need to change the fonts and colors (including background colors) of my widgets, as well as change the font for my posting titles.
I will be forever grateful to anyone who can help me with this.
My blog is located here: http://attackmarketing.wordpress.com
-
There’s virtually no help at all for CSS here; there are only two or three people who understand it fully who answer questions. Have you read the reference material the FAQ points you to?
-
Thanks so much for responding, raincoaster. I have gone to the sites recommended, but I can’t seem to find information on widgets/ posting titles. Do you have any other suggestions?
-
You need to find out the css-selector for the widgets. Go to the source code and find them as <div somethingsomething>. Then you go to your CSS, and find the selectors. Try it out a little at a time. insert /change the background colour by adding
background-color: yellow;
(yellow obviously just an example).
You can do the same with text and text color by definingfont-family: whateveryoulikehere; color: red;hope it helps. take it easy and change one thing at a time, and check if the results is what you’re after.
-
(…..or you could use a css editor, of course, depending on what sort of h/w & s/w you are running.)
Be good to know how it goes…? -
boblets, thanks so much for your help with this. i checked out the source code, but was having trouble identifying the code i should be applying to my css code. i believe the following is the relevant source code from my page:
<div class=”navigation”>
<p class=”next”></p>
<p class=”previous”></p></div>
</div>
<div id=”sidebar”>
<ul class=”sidebar-list”>
<li id=”search” class=”widget widget_pressrow_search”> <h2 class=”widgettitle”><label for=”s”>Search</label></h2>
<div class=”sidebar_section”>
<form id=”search_form” method=”get” action=”http://attackmarketing.wordpress.com”>
<input id=”s” name=”s” class=”text_input” type=”text” value=”” size=”10″ />
<input id=”searchsubmit” name=”searchsubmit” type=”submit” value=”Find »” />
</form></div>
<li id=”categories-114803991″ class=”widget widget_categories”><h2 class=”widgettitle”>Attack! Service Offerings</h2>
-
<li class=”cat-item cat-item-1022431″>Brand Ambassadors
<li class=”cat-item cat-item-7533691″>Branded Vehicles
<li class=”cat-item cat-item-321402″>College Marketing
<li class=”cat-item cat-item-6904180″>Coupon Distribution
<li class=”cat-item cat-item-529671″>Emcees
<li class=”cat-item cat-item-510904″>Event Marketing
<li class=”cat-item cat-item-2101078″>Flyer distribution
<li class=”cat-item cat-item-55412″>Guerrilla Marketing
<li class=”cat-item cat-item-6903746″>In-Store Demos
<li class=”cat-item cat-item-6903926″>Influencer Campaigns
<li class=”cat-item cat-item-6903736″>Market managers
<li class=”cat-item cat-item-1562″>Online
<li class=”cat-item cat-item-6903749″>Online Street Teams
<li class=”cat-item cat-item-6654180″>Premium Distribution
<li class=”cat-item cat-item-4964344″>Professional Drivers
<li class=”cat-item cat-item-1144779″>Publicity stunts
<li class=”cat-item cat-item-6903801″>Sampling Programs
<li class=”cat-item cat-item-7023114″>Sidewalk Advertising
<li class=”cat-item cat-item-3269285″>Spokesmodels
<li class=”cat-item cat-item-296212″>stenciling
<li class=”cat-item cat-item-6903727″>Street level initiatives
<li class=”cat-item cat-item-1120802″>Street teams
<li class=”cat-item cat-item-1″>Uncategorized
<li class=”cat-item cat-item-5598529″>Video Seeding
<li class=”cat-item cat-item-526764″>Viral Videos
<li class=”cat-item cat-item-6904146″>Wearable Media
<li class=”cat-item cat-item-7023108″>Wet-Sampling
<li class=”cat-item cat-item-149570″>Youth Marketing
<li id=”linkcat-1356″ class=”widget widget_links”><h2 class=”widgettitle”>Blogroll</h2>
<ul class=’xoxo blogroll’>
- Attack!’s Website
- Sumo World
<li id=”text-153732321″ class=”widget widget_text”> <div class=”textwidget”><span></span></div>
IF you have the time, could you offer any advice on what code is should be adding to my style sheet to change the font/ color and size?
Thanks again!
-
Good lord! I had a look at your css, and that is one messy stylesheet.. :-S
Not saying it is your doing, but that would make it a little more fiddly, yes.We’ll look at one thing at a time.
If you want to change the font of only a certain part of your blog, then you must identify that section, and what it is called in the css. The manual way would be to look at the source code, search for a piece of text in you blog – for example “attack! service offrings”. This will show you where the real text is, and above that you’ll find diffrent types of <div somethings>. So here begins the guesswork.
You’ll find a
#sidebar h2 { color: #999; }in your stylesheet – I am promising nothing, but replace that with, for example this:
#sidebar h2 { font: font: 70% verdana, helvetica, sans-serif; color: #FF1493; }….and see what happens.
Just an example. Or whatever other font you like. The % gives size, so you can play with that too. And the colour, of course. Play with colours here
http://www.w3schools.com/html/html_colornames.aspLet us know how it works or don’t, and what’s next.
-
uuuhh! there’s one ‘font ‘ too many in the second bit of code… :-S
#sidebar h2 { font: 70% verdana, helvetica, sans-serif; color: #FF1493; } -
boblets, i cant say thank you enough. quite embarrassed by your reaction to my style sheet! haha, i appreciate your honesty! i tried out your recommendation, and the font color changed! however, the font itself remained the same…. any idea why?
-
i take it back! the font has been changed as well. your suggestions were exactly what my css needed! thank you again.
-
now i’ve just got to identify the name of the post title sections and change that around
-
No problem.
There is an overriding font set somewhere, then.
Starting at the top, (in your blog, not your stylesheet) you set the general font in the
body {}.then there is the navigation. In your stylesheet it is called .navigation, and it doesn’t have a font defined, that’s why it’s default (Times new roman). So, in the {} for .navigation you add
`font: whatever-font-you-like;
color: red `
The selector for your post headings is h4, so do the same here, as there is no font defined. See the pattern?For the font in your list in the sidebar I think you want the post_meta selector in your stylesheet. Try to insert the same there and see what happens.
As far as I can understand, you’ve changed the main font and the titles for the widgets, but end up with the odd font off.
A little note on fonts – when you write a list in css for a bunch of fonts, such as
font: verdana, helvetica, arial, sansserif
…what happens is that the browser will use the first in the list if the user’s computer/browser have that font. If not, it will move to the next, and so on. I’d reccomend having fonts in that list that are related, so that if the visitor don’t have your prefered font, the page will at least display reasonably similar. Times New Roman is a default for most browsers, so there is no need to put Times in the list, really.
Besides, Times on webpages usually look awful, unless it is in large sizes.Good luck and let us know how it goes.
-
oh, dear. Loose the backtics on this bit of code..
font: whatever-font-you-like; color: red -
-
Great! That really helped out a lot. I now the sidebar titles the font, size and color I want them to be. Next step is getting the sidebar content’s font, size and color changed. Boblets, do you know why the changes were only applied to the sidebar titles, and not to the content of the sidebar? Ideally, I would have the sidebar’s background color a light gray and the text blue Century Gothic, but I’m having trouble identifying the sidebar contents name…
-
But you did change the font in the sidebar, didn’t you? It used to be times new roman, and now it is something else, no?
I am guessing your sidebar is this
#sidebar { width: 230px; color: #222; font-size: 1.2em; line-height: 1.5em; float: left; }Try changing the colour here.
You could also try to add the same thing as I suggested above:
´font: whatever-font-you-like;
color: red;´Obviously, substitute the colours for the ones you like.
http://www.w3schools.com/html/html_colornames.asp -
…..and may I suggest a
`text-decoration:none; ´
for your sidebar? It would remove the underscore of the links… just my personal notion of design.. -
- The topic ‘Changing fonts for titles and widgets’ is closed to new replies.
WordPress.com Forums 