Different color in footer/sidebar widget

  • I am using canvas theme – https://testsite.natureshealing.info

    Can anyone help me in understand how best to make the background color and the title color of the footer widget different from the sidebar widget. I want the footer widget background color to be #009a9a .

    The sidebar is easy to control in the themes settings>widget section but it’s a global setting that sets the background.title color for both sidebar and footer widgets.

    If you view the site you will see a white box (widget background) behind a aqua colored box (div tag in the widget text box). I want to remove the div and instead apply css directly to the widget background and also the widget title.

    I know a little about css but am confused on identifying the object to apply the style to and also where to exactly place the css code.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    To alter anything about your theme outside of the customizer, you will want to create a child theme, otherwise your changes will be lost when the theme is updated.

    With a child theme, your CSS simply goes on the child styles.css. Since it is loaded after the parent, most rules will override the parent. On rare occasion you may need the !important modifier.

    The tricky part to all of this is usually determining what selector to use to achieve the desired effect. Learn how to use your browser’s CSS inspector tool. Use the tool to find what styles apply to any object. You can experiment with new or altered styles right in the tool. Once you determine the proper rule, you can copy it to your styles.css.

    If you are still having trouble determining the proper rule even with the inspector, let me know and I’ll take a closer look. You’re going to be much better off in the long run if you can work this out for yourself, or at least give it a reasonable effort ??

    Thread Starter ccarlow

    (@ccarlow)

    OK I gave it a try but I can’t figure it out.

    I made a child theme. That’s understood and not a problem.

    The problem is I can make changes in firefox>inspector and they show up but I can’t copy what I am seeing in the inspector to the child-theme style.css (style sheet).

    I changed my focus a bit. I want to edit the background of the H1 tag for the article heading.
    –>web address: https://testsite.natureshealing.info/food-allergy-vs-food-intolerance/
    –>Article heading code – <h1 class=”title entry-title”>Food Allergy vs Food Intolerance</h1>

    Under the inspector>rules I add the background color
    .page-title, .post .title, .page .title {
    font: bold 28px/1.1em ‘Philosopher’, arial, sans-serif;
    color: #222222;
    –>background: #009a9a;

    Now I see a blue rectangular background

    What do I paste in my style sheet to control the background-color of this H1 element????

    The problem that makes me confused is this – The class is different from what is in the inspector>rules
    Here’s the class code –>h1 class=”title entry-title”

    Here’s the inspector code I see
    –>.page-title, .post .title, .page .title

    they are different and I don’t understand
    Can you help?

    Sorry, but you’re using a premium/paid theme. It’s best to go to the support site where you bought the theme – https://woothemes.com/ and https://support.woothemes.com/hc/en-us/sections/200430747-Canvas – for help with customizations and issues. You paid for support when you bought the theme, so you should contact the people who sold you the theme. These forums are for free themes available in the WordPress theme directory at www.ads-software.com/themes/. See https://codex.www.ads-software.com/Forum_Welcome#Commercial_Products

    You need to add new rules or override rules in the style.css of the child theme. Woo support can help with that.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Different color in footer/sidebar widget’ is closed to new replies.