How to change background colour on widgets - Responsive Child Themes Discussions on ThemeID: Support Community

rasins

Hi, can you please point me in the right direction of how to change the background colour on some of the widgets.

For example, I want the first widget on the homepage to be one colour (blue) and the four widgets underneath to be another colour (white).

I can see there is a class which all the widgets use called widget-wrapper and I figured I could just add an extension onto this, but it's not had an impact. When I view the source it doesn't even show the class 'test' that I have added.

Here is my code...

.widget-wrapper.test {
background-color: blue;
}

<div class="widget-wrapper test">
            
                <div class="widget-title-home"><h3><?php _e('Home Widget 1', 'responsive'); ?></h3></div>
                <div class="textwidget"><?php _e('This is your first home widget box. To edit please go to Appearance > Widgets and choose 6th widget from the top in area six called Home Widget 1. Title is also managable from widgets as well.','responsive'); ?></div>
            
            </div><!-- end of .widget-wrapper -->

Many Thanks in advance.

Emil Uzelac

Best way to do this is to use dev tools already installed in your browser, locate your styles and change them any way you need. http://themeid.com/forum/topic/697/browser-developer-tools/

The reason why I point you there is because Responsive widgets are using auto-generated WordPress classes and each widget will have different ID/Class depending on what kind of widgets you're using. Without "view-source" via browser tools it's virtually impossible for anyone to know what are they.

This applies only when changing the colors on each widget individually and also don't change anything to the actual Theme files, it's not needed, you can do this via CSS.

You will be looking for e.g.

<div id="recent-posts-4" class="widget-wrapper widget_recent_entries">

Hope that this makes sense,
Emil

rasins wrote:
Hi, can you please point me in the right direction of how to change the background colour on some of the widgets.

For example, I want the first widget on the homepage to be one colour (blue) and the four widgets underneath to be another colour (white).

I can see there is a class which all the widgets use called widget-wrapper and I figured I could just add an extension onto this, but it's not had an impact. When I view the source it doesn't even show the class 'test' that I have added.

Here is my code...
.widget-wrapper.test {
background-color: blue;
}
<div class="widget-wrapper test">
            
                <div class="widget-title-home"><h3><?php _e('Home Widget 1', 'responsive'); ?></h3></div>
                <div class="textwidget"><?php _e('This is your first home widget box. To edit please go to Appearance > Widgets and choose 6th widget from the top in area six called Home Widget 1. Title is also managable from widgets as well.','responsive'); ?></div>
            
            </div>
Many Thanks in advance.

rasins

Yep, I've got you. This makes perfect sense. I knew it would be something simple. Thanks so much.

Emil wrote:
Best way to do this is to use dev tools already installed in your browser, locate your styles and change them any way you need. http://themeid.com/forum/topic/697/browser-developer-tools/

The reason why I point you there is because Responsive widgets are using auto-generated WordPress classes and each widget will have different ID/Class depending on what kind of widgets you're using. Without "view-source" via browser tools it's virtually impossible for anyone to know what are they.

This applies only when changing the colors on each widget individually and also don't change anything to the actual Theme files, it's not needed, you can do this via CSS.

You will be looking for e.g.
<div id="recent-posts-4" class="widget-wrapper widget_recent_entries">
Hope that this makes sense,
Emil
rasins wrote:
Hi, can you please point me in the right direction of how to change the background colour on some of the widgets.

For example, I want the first widget on the homepage to be one colour (blue) and the four widgets underneath to be another colour (white).

I can see there is a class which all the widgets use called widget-wrapper and I figured I could just add an extension onto this, but it's not had an impact. When I view the source it doesn't even show the class 'test' that I have added.

Here is my code...
.widget-wrapper.test {
background-color: blue;
}
<div class="widget-wrapper test">
            
                <div class="widget-title-home"><h3><?php _e('Home Widget 1', 'responsive'); ?></h3></div>
                <div class="textwidget"><?php _e('This is your first home widget box. To edit please go to Appearance > Widgets and choose 6th widget from the top in area six called Home Widget 1. Title is also managable from widgets as well.','responsive'); ?></div>
            
            </div>
Many Thanks in advance.

sk

I need help with changing border color of one of the 4 widgets on the page. Tried 'view-source' and got to know the div id and class. How do I use this to make changes in the CSS?The id/class details are: <div id="text-8" class="widget-wrapper widget_text"><div id="widget-title-three" class="widget-title-home"><h3> </h3></div> <div class="textwidget">Complete confidentiality assured.</div>
</div>.

Thanks
Sk

Emil Uzelac

Hi,

I don't recognize this, my guess is that you downloaded user based example of 4th widget, but anyways, all borders are in:

.widget-wrapper {
    border-color#your-color-here;
}

- or just home

.home .widget-wrapper {
    border-color#your-color-here;
}

Emil

sk wrote:

I need help with changing border color of one of the 4 widgets on the page. Tried 'view-source' and got to know the div id and class. How do I use this to make changes in the CSS?The id/class details are: <div id="text-8" class="widget-wrapper widget_text"><div id="widget-title-three" class="widget-title-home"><h3> </h3></div> <div class="textwidget">Complete confidentiality assured.</div>
</div>.

Thanks
Sk

chruezoo

Dear Emil

I have a text-widget with id=text2. Now i want to link a transparent background (which i added to sytle.css:

#widget-wrapper widget_text #text-2 {    
background-image:url(/wp-content/uploads/2012/08/bg-trans.png);    
display:block;    
height:182px;    
width:264px;
}

As described here http://webdevnews.net/2007/01/css-trick-turning-a-background-image-into-a-clickable-link/
I'd like to add an url into the <div id=text-2>, somehow like this:

<div id="text-2"><a href="http://mysite.com"><span>MySite.com</span></a></div>;

My problem is that I can't find a <div id=text-2> in any .php file.
Do you have an idea how I can solve this?

Thank you for your help, very much appreciated.
Chris

hyptit

Hi Emil,

I have tried your instructions, converting the id and class tags I see in the developer script to css, and I see no results. Probably I have missed something.

Here is what I see in the developer script:

<div id="widgets" class="home-widgets">
<div class="grid col-300">

<div id="categoryposts-2" class="widget-wrapper widget_categoryposts"><div id="widget-title-one" class="widget-title-home"><h3>Switch it On</h3></div><ul>
<li class="cat-post-item">

If I want the first home widget (above code) to be a different color than the others, I would have thought the css, based on the tags above, would look like this:

#widget-title-one .widget-title-home .widget-wrapper {
background: #003366;
}

I have tried several variations, and I get zero results.

Thanks,
Olivia

grappler

Try just.

#categoryposts-2{
    background: #003366;
}

Ulrich

Emil Uzelac

You can do that, but also:

background-color: transparent;

Thanks,
Emil

chruezoo wrote:
Dear Emil

I have a text-widget with id=text2. Now i want to link a transparent background (which i added to sytle.css:
#widget-wrapper widget_text #text-2 {    
background-image:url(/wp-content/uploads/2012/08/bg-trans.png);    
display:block;    
height:182px;    
width:264px;
}
As described here http://webdevnews.net/2007/01/css-trick-turning-a-background-image-into-a-clickable-link/
I'd like to add an url into the <div id=text-2>, somehow like this:
<div id="text-2"><a href="http://mysite.com"><span>MySite.com</span></a></div>;
My problem is that I can't find a <div id=text-2> in any .php file.
Do you have an idea how I can solve this?

Thank you for your help, very much appreciated.
Chris

Howdy, Stranger!

Categories

In this Discussion

Most Popular This Week