Change font size or color for recent posts titles
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. |
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) |
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. |
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 --> For the rule I'll just use 'color: red; so I could code HTML Code:
#upcoming-events {color: red;} HTML Code:
#upcoming-events h3 {color: red;} |
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! |
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? |
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. |
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.
|
Tried #widget_advancedrecentposts .post-title {color: red;}.
Didn't work. Any suggestion? |
where did you find the class 'widget_title' when you examined the code? I don't see it anywhere.
|
Just making a wild guess hoping to hit it right.
Anyway, what should have been the right CSS rule? Thanks. |
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> 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. |
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? |
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 {...} |
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? |
HTML Code:
.recent_with_excerpt ul li a { |
That worked like a charm!
And by the way, how do I make the post title BOLD? |
do a google search 'css font-weight'
|
All times are GMT -6. The time now is 03:33 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.