• I am trying to introduce a background colour #FBE0C5 to the top text widget of my Twenty Eleven site. Also to centre the logo. Any thoughts?

    I have looked at similar posts, but I end up putting this colour on all widgets (and footers), and I don’t want that.

    The site is: https://www.leaseholdknowledge.com

    Thanks,

Viewing 7 replies - 1 through 7 (of 7 total)
  • Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

    Thread Starter Caprilli

    (@caprilli)

    Thanks so much.

    If anyone has got any suggestions for how to do this, it would be much appreciated. I am using Firebug, but now after several hours I’m still trying to work this out.

    the widgets have individual css ids;
    either look into the html of your site in the browser to find the css id;

    for example, here is the section of the top textwidget:

    <div id="secondary" class="widget-area" role="complementary">
    			<aside id="text-11" class="widget widget_text"><h3 class="widget-title">CONTACT</h3>			<div class="textwidget"><p><img src="https://images.leaseholdknowledge.com/wp-content/uploads/2012/06/LKPmastheadlogo.gif" title="me" /><br />
    Sebastian O’Kelly<br />

    or use a browser inspection tool as @esmi suggested.

    Thread Starter Caprilli

    (@caprilli)

    Thanks. I have been inspecting this with Firebug, and have been staring at the MTML and CSS. Firebug is telling me what is there, plus the ability to change the colour of the title “Contact”.

    I cannot actually change the background colour of the widget, which is white.

    I tried these in the style.css, but they have not worked:

    .widget-title {
    ????color:?#FA5D55;
    ????font-size:?16px;
    ????letter-spacing:?0.1em;
    ????line-height:?2.6em;
    ????text-transform:?uppercase;
    }

    #div#secondary.widget-area {
    background-color: #FBE0C5;
    clear: both;
    margin: 0 0 2.2em;
    padding: 10px;
    }

    from the html code you can see that the specific css id for that textwidget is:
    #text-11

    example to edit the background color:

    #text-11 { background: #123edf; }

    and just the widget title:

    #text-11 .widget-title { background: #123edf; }

    Thread Starter Caprilli

    (@caprilli)

    That worked perfectly, and thanks very much. So I was not identifying the widget id using the stuff above? In making css changes you should always start with the HTML id?

    You won’t credit this, but it is incredibly difficult to find an idiot’s guide to this.
    Very grateful.

    Thread Starter Caprilli

    (@caprilli)

    A useful answer to me, and so probably many amateurs, would have been: go away and learn some basic code! But the respondents were too polite to do that.

    Anyway, it is what I have been doing, using this excellent site: https://www.htmldog.com

    I thought getting to grips with HTML and CSS properly would require a massive investment in time, and that is not the case. Strange that one can run three pretty popular websites for more than a year and not realise this …

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Changing background colour on one text widget’ is closed to new replies.