Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

Change font size or color for recent posts titles


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old May 1, 2010, 01:01 PM
pyoterguru
 
36 posts · Mar 2010
Hi,

How do I change font color, font size, and font weight for Recent Posts titles?

Say I have 10 Recent Posts displayed by Advanced Most Recent Posts plugin, but I want the post titles to stand out from the post excerpts, i.e. look more prominent.

Thanks.
  #2  
Old May 2, 2010, 06:34 AM
juggledad's Avatar
juggledad
 
22,377 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
you need to look at the generated source of your page and locate the code created by that plugin. Then you can construct a CSS Selector and rules to make the changes you want.

pluging are created by many people and there is no standard as to what they call the ID's or classes so you have to go digging to configure a indivisual plugin (unless it is one of the ones probided with Atahualpa)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old May 2, 2010, 08:07 AM
pyoterguru
 
36 posts · Mar 2010
Alright, but if you could just provide me some sample script for insertion into ATO>Add HTML/CSS Inserts, I would take it from there, and would be most grateful.

This Advanced Most Recent Posts plugin doesn't have CSS rules by default, just advanced options for filtering/fetching recent posts, by the way.

I simply need to change the font color and font weight for the title of the recent posts displayed, but no idea how the CSS script would be like, etc.

Thanks.
  #4  
Old May 2, 2010, 09:51 AM
juggledad's Avatar
juggledad
 
22,377 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
ok, lets say I have a calendar plugin and it gives me a 'Upcoming events widget, and I want to change the title to red. I add the widget to my left sidebar (could be any sidebar) and go view the page. This is what I see in the code:
HTML Code:
	<!-- Main Body -->	
	<tr id="bodyrow">
	<!-- Left Sidebar -->
		<td id="left">
			<div id="upcoming-events" class="widget my_calendar_upcoming"><div class="widget-title"><h3>Upcoming Events</h3></div><ul><li class="future-event"><strong>May 29, 2010</strong> – test1<br /><span>11:11 am, </span></li>
</ul></div>
		</td>
		<!-- / Left Sidebar -->
		<!-- Main Column -->
looking at this I see it has an ID="upcoming-events" - this is great because an ID can only be userd once in a page, so I can directly address this widget. Now it's just a matter of coding the CSS Selector and rule.

For the rule I'll just use 'color: red; so I could code
HTML Code:
#upcoming-events {color: red;}
and this would color the title red, but it would also color all the rest of teh text red also, so I need to be more selective so I'll use the h3 in teh selector to get
HTML Code:
#upcoming-events h3 {color: red;}
and now only H3's in the element with the ID of "upcoming-events" will be red.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; May 3, 2010 at 09:10 AM.
  #5  
Old May 2, 2010, 10:36 AM
pyoterguru
 
36 posts · Mar 2010
OK, got your point.

But it's the title of the recent posts (not the H3) listed under Most Recent Posts widget that I need to change color, specifically:
title="How do I get my computer display to show up in color?" as shown in below page source:

<div id="advancedrecentposts-34" class="widget widget_advancedrecentposts"><div class="widget-title"><h3>Featured Computer Repair Tips</h3></div><ul class="advanced-recent-posts"><li><a href="http://computerguru-online.com/computer-display-show-color.htm" title="How do I get my computer display to show up in color?" >How do I get my computer display to show up in color?</a>: My computer display is in black and white. I have no idea how this happened!
  #6  
Old May 2, 2010, 10:40 AM
juggledad's Avatar
juggledad
 
22,377 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Are you saying only the words 'my computer display' are in black and the rest is something else??
What is the URL?
What version of Atahualpa?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old May 2, 2010, 10:53 AM
pyoterguru
 
36 posts · Mar 2010
url is http://computerguru-online.com/diy-r...er-repair-tips.

Atahualpa version 3.4.6

As you can see in above url, there are a bunch of recent posts listed under "Featured Computer Repair Tips" widget at center column, but the titles can hardly be read, I mean the post excerpts are more prominent.

That's why I need to color the post titles somewhat different from the post excerpts.

Thanks.
  #8  
Old May 2, 2010, 01:19 PM
juggledad's Avatar
juggledad
 
22,377 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
well if you look at the generated source, you have an id but there is a unique id for each post, so that won't help, but there is a class of 'widget_advancedrecentposts' you can use to identify all of these widget/posts in your CSS Selector.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; May 3, 2010 at 09:14 AM.
  #9  
Old May 2, 2010, 10:08 PM
pyoterguru
 
36 posts · Mar 2010
Tried #widget_advancedrecentposts .post-title {color: red;}.

Didn't work.

Any suggestion?
  #10  
Old May 3, 2010, 05:07 AM
juggledad's Avatar
juggledad
 
22,377 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
where did you find the class 'widget_title' when you examined the code? I don't see it anywhere.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old May 3, 2010, 09:04 AM
pyoterguru
 
36 posts · Mar 2010
Just making a wild guess hoping to hit it right.

Anyway, what should have been the right CSS rule?

Thanks.
  #12  
Old May 3, 2010, 11:34 AM
juggledad's Avatar
juggledad
 
22,377 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
you have the rule right (that's what's in the {}'s, you just need to build your selector correctly

CSS selectors are built using like this:
element-type + a '#' (if using an ID) or a period (if using the class name) + the ID/class name
this can be repeated to get more specific. so if you used
body {color: red;}
all text on the page would be colored red (unless overridden by other CSS. If you coded
body div {color: red;}
then only text in a div would be red. You could also use
div {color: red;}
to get the same thing. if you had the following html
HTML Code:
<div>
My list
<ul>
<li>one</li>
<li class="bonus">two</li>
<li>three</li>
and coded
div {color: red;}
then all the text would be red. If you coded
div ul {color: red;}
then only the text in the list would be red. If you coded
div ul li.bonus {color: red;}
then only the word 'two' would be red (this could be shortened to '.bonus {color: red;}' but that's another lesson)

So you need to be able to look at your generated html and construct the CSS Selector for your needs when stepping outside the box.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old May 3, 2010, 01:04 PM
pyoterguru
 
36 posts · Mar 2010
I can change the color of the post excerpts now with:
.advanced-recent-posts {color: mycolor;}

And this is site wide.

Still helpless with the post titles, i.e. the ones being linked to the single post pages. Couldn't figure out the specific selector.

Would you mind?

Last edited by pyoterguru; May 3, 2010 at 01:08 PM.
  #14  
Old May 3, 2010, 02:26 PM
juggledad's Avatar
juggledad
 
22,377 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
You have
<div id="advancedrecentposts-34" class="widget widget_advancedrecentposts">
<div class="widget-title">
<h3>Featured Computer Repair Tips</h3>
</div>
<ul class="advanced-recent-posts">
<li>
<a href="http://computerguru-online.com/computer-display-show-color.htm" title="How do I get my computer display to show up in color?" >How do I get my computer display to show up in color?</a>

since the text is in an <a...> you need that
a {...}
and the <a...> is in an <li>...</li> so you need that
li a {...}
and both of them are in a <ul>...</ul> which has a class, so you could use that
ul.advanced-recent-posts li a {...}
that should work, but if you wanted it to only work for this occurance of that widget, you could use the id of the <div> and get
div#advancedrecentposts-34 ul.advanced-recent-posts li a {...}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; May 3, 2010 at 02:28 PM.
  #15  
Old May 3, 2010, 09:33 PM
pyoterguru
 
36 posts · Mar 2010
I tried various combinations of li and a, no joy... it's always the post excerpt that gets colored, not the post title.

What should have been the correct li and a to use?
  #16  
Old May 4, 2010, 05:20 AM
juggledad's Avatar
juggledad
 
22,377 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
HTML Code:
.recent_with_excerpt ul li a {
color:red !important;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #17  
Old May 5, 2010, 08:38 AM
pyoterguru
 
36 posts · Mar 2010
That worked like a charm!

And by the way, how do I make the post title BOLD?
  #18  
Old May 5, 2010, 09:10 AM
juggledad's Avatar
juggledad
 
22,377 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
do a google search 'css font-weight'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] where to change the size of the font, and the color on the titles dirtroad Header configuration & styling 16 Apr 7, 2010 09:31 PM
How do I change the font color of the post/pages font and the title font? GreenEyedMonst Center area post/pages 0 Jan 16, 2010 03:06 PM
post font size and spacing, titles .. ireneeng Atahualpa 3 Wordpress theme 5 Nov 19, 2009 11:47 PM
Changing Color and Font for Post titles daisy24 Atahualpa 3 Wordpress theme 2 Nov 17, 2009 02:40 PM
Page Titles Change Color but Posts Do Not Jrdpa Post-Kicker, -Byline & -Footer 1 Oct 27, 2009 12:06 PM


All times are GMT -6. The time now is 05:26 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.