Widget Titles in News Pro

[australianbluegrass.com]

Is it possible to have 2 different styles of titles (.widget-title) for widgets in the side bar and widgets on the home area?

http://australianbluegrass.com

[Brad Dalton]

Try this http://wpsites.net/web-design/style-widgets-individually-beginners-guide/

---

Tutorials for StudioPress Themes.

[australianbluegrass.com]

Thanks Brad, Looks like I have some study ahead.
Looking forward to the challenge.

Greg.

[Brad Dalton]

Just use Firebug to find the correct class

---

Tutorials for StudioPress Themes.

[australianbluegrass.com]

That works well. Thanks Brad.
Is there a way of grouping all of the classes or will i need a separate class title for each widget?

Here is one I have done to date. But there are separate widgets for #featured-post-2 through to #featured -post-10.

#featured-post-2 .widget-title {
border-top: 3px solid #000;
border-bottom: 3px solid #000;
color: #FFF;
background-color: #005566;
font-size: 18px;
font-weight: 400;
margin-bottom: 18px;
padding: 8px;
text-align: center;
text-transform: uppercase;
}

[Brad Dalton]

You can find the classes using Firebug.

There are many options so you would need to be very specific.

---

Tutorials for StudioPress Themes.

[australianbluegrass.com]

ITo simplify the post I have removed some of the CSS.

Currently I have added ten additional selectors and repeated the declarations for each one. This has worked well. Many thanks.

#featured-post-2 .widget-title {
color: #FFF;
background-color: #005566;
}
#featured-post-3 .widget-title {
color: #FFF;
background-color: #005566;
}
#featured-post-4 .widget-title {
color: #FFF;
background-color: #005566;
}

Is it possible to reduce the number of selectors and declarations these by combining the "section ID" calls such as,

#featured-post-2, #featured-post-4 #featured-post-4 .widget-title {
color: #FFF;
background-color: #005566;
}

Or similar?

[Brad Dalton]

Yes or you may also be able to use one I.D class #featuredpost

.home #featuredpost .widget-title {
color: #FFF;
background-color: #005566;
}

Test the different I.D's and classes you can grab using Firebug to see what works.

---

Tutorials for StudioPress Themes.

[Author]

Posts