Featured page widget styling issue

[wizz6113]

I added a bespoke set of four widgets (row, home page bottom) to Outreach Pro around 3 months ago. I also somehow back then worked out how to style one as an example.

Now, however, I can't for the life of me work out how to style to adjacent nos 1, 3 & 4 widgets in that row! I need to have full control over colour so I can colour code, as I did in the example nr 2.

This is the code I placed in the CSS to style Nr 2. But replicating it, changing the suffix number, won't work! Any ideas how I can do this? I've obviously forgotten in the interim!

/*
Featured slots home page custom styling
---------------------------------------------------------------------------------------------------- */

#featuredpage-extras-2 .widget-title a {
color: #CC0000;
font-family: Palatino Linotype;
font-weight: 700;
}

#featuredpage-extras-2 .widget-title {
border-bottom: 5px solid #CC0000;
padding-bottom: 6px;
}

#featuredpage-extras-2 .entry-title a {
color: #CC0000;
}

#featuredpage-extras-2 .gfpe-more-link a {
color: #CC0000;
}

http://wpreneur.com/iicss/

[Brad Dalton]

Use the section class or the class generated by the PHP

#featuredpage-extras-3 {
background-color: green;
color: #fff;
}

#featuredpage-extras-3 .more-link {
color: orange;
}

#featuredpage-extras-3 .widget-title a {
color: red;
}

---

Tutorials for StudioPress Themes.

[wizz6113]

Brad,

I've removed the current CSS styling so to clear things out. I've looked at the php in frontpage.php and can find only this that might be the code relating to that part:

function outreach_home_bottom_widgets() {

genesis_widget_area( 'home-bottom', array(
'before' => '<div class="home-bottom widget-area"><div class="wrap">',
'after' => '</div></div>',
) );

}

I have the Genesis Featured Page Extras plugin deployed for four slots in that home-bottom widget area. So my thinking is the CSS code should be something like:

.home-bottom .widget-area .widget-title a {
font-color: #CC0000;
]

or something along those lines, if I wanted, for eg, to change the link color.

Am I on the right track?

[wizz6113]

Brad,

I found this earlier in the code, so perhaps this is where I should be focusing? Or does placing in the Genesis Featured Page Extras plugin mean this section of code is totally useless to concentrate on and style? Thanks for all your kind help:

.home-bottom {
background-color: #fff;
padding-top: 30px;
padding-top: 3.5rem;
}

.home-bottom .widget {
float: left;
margin-left: 2.564102564102564%;
width: 23.076923076923077%;
}

.home-bottom .widget:nth-child(4n+1) {
clear: both;
margin-left: 0;
}

.home-bottom .featured-content img {
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

.home-bottom .widget {
color: #333;
font-weight: 700;
font-size: 12px;
}

[jodzeee]

The widgets you need to target in CSS are:

#featuredpage-extras-4
#featuredpage-extras-7
#featuredpage-extras-3
#featuredpage-extras-6

Are you using developer tools such as Firebug (Firefox) to inspect your code? You can easily find what to target and change/add CSS to see how it affects it.

[wizz6113]

Thanks Jodzee,

Yes, I am seeing the site in Google Chrome inspector and can see the various wraps and divs, and those four widget areas are called:

div.home-bottom.widget-area

and the content part:

div.entry-content.custom-content

But I can't see the #featuredpage-extras part at all. Not sure how I style a plug-in delivered widget content. Is this the issue / conflict between different part of the CSS?

Sorry to ask but while I managed some styling once on this, it's eluding me now completely!

Tnx.

[jodzeee]

Are you expanding all the elements?

#featuredpage-extras-4 is not defined in the CSS (yet), but if you add it, you can style it.

[Brad Dalton]

The code i posted works as i tested it in Chrome

I did notice you have extra closing brackets in your CSS which may cause an issue. I removed them when i tested the code and it works as you wanted.

The class will not output unless the widget is active.

---

Tutorials for StudioPress Themes.

[wizz6113]

Hi Brad,

I've got your original code to work, but now need to enable it to work across all four widget blocks. Your code has -4 but seems to activate the first widget in the row. So not sure how to replicate it (or my own styling css) to get each of the four widgets in that row to have bespoke styling,

Also, to test, I just deleted your code but I think my host (Siteground) has a supercacher which means that I don't see the changes! I still get the green block on widget one even when I've deleted the code in the stylesheet. Caching issue you think? It makes life very difficult to develop if I can't see edits immediately.

Thanks truly for all your effort on this one; much appreciated.

[Brad Dalton]

Use Firebug to find the section I.D

This may help http://wpsites.net/web-design/style-widgets-individually-beginners-guide/

---

Tutorials for StudioPress Themes.

[jodzeee]

If you look in Chrome's inspector, you'll see that:

#featuredpage-extras-4 is the first widget

#featuredpage-extras-7 is the second widget

#featuredpage-extras-3 is the third widget

#featuredpage-extras-6 is the fourth widget

And you can style them separately.

[wizz6113]

Thanks Jodzee and Brad; am off to see if I can style individually and hope the blessed caching issue goes as not seeing any changes even when I delete the code now!

Weird. Will close this thread as resolved hopefully soon! Cheers for now.

[wizz6113]

Update, I've found the widget child nos as you pointed out - nos 4,7,3,6, so should manage styling now. The only issue is that I can't get rid of caching problem.

As a test, I put in Brad's original code, which worked, as an example, but even if deleted back end, I still see no changes front end. Not sure if you can take a look but there shouldn't be a green background on widget 4! I am not sure how to enable styling if I can't see changes live!

Any ideas? I've already tried deleting cache.

[jodzeee]

Check with your host, they might have a way for you to enable development mode or clear the cache on their end.

[wizz6113]

Thanksj Jodzee, off to do that now as truly frustrating!

[wizz6113]

Wonderful, Siteground cache resolved so seeing edits finally! Thanks for your and Brad's continual help!

[Author]

Posts