how to align text differently in 3 text widgets in 2011 footer?

  • Resolved 5high

    (@5high)


    11 years, 9 months ago

    Hi, I’ve read all the forum links I can find about alignment of text in a widget, but still haven’t got to grips with it yet…

    I have a Child theme of 2011 with x3 text widgets in the footer area with just text + links in them.
    What I want is for the left text to remain ‘left-aligned’; the center one to have ‘center-aligned’ text; and the right one to have ‘right-aligned’ text.

    If I inspect the element with Firebug in a browser it calls it div.textwidget; with inspect in dreamweaver it calls it inline style (which I think relates to the widget itself??) and when I inspect the text area of the widgets with Firebug in the Widget Admin area of WordPress it identifies them as:
    textarea#widget-text-4-text.widefat in Footer area 1
    textarea#widget-text-2-text.widefat in Footer area 2
    textarea#widget-text-3-text.widefat in Footer area 3
    There is also a supplementary css style for the 3 widget arein the 2011 style.css like this:

    /* Three Footer Widget Areas */
#supplementary.three .widget-area {
	float: left;
	margin-right: 3.7%;
	width: 30.85%;
}
#supplementary.three .widget-area + .widget-area + .widget-area {
	margin-right: 0;
}

    which I THINK is related to it too…

    So I’ve tried all sorts of combinations of the above in my child style.css and currently have this:

    /*
to change text alignment in footer widgets: centre widget text to center + right widget text to right
*/
#supplementary.three .textarea#widget-text-2-text.widefat {
	text-align: right !important;
}
#supplementary.three .textarea#widget-text-3-text.widefat {
	text-align: center !important;
}

    …but all with NO EFFECT!!!

    Can anyone suggest anything to resolve this issue??

    Many thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • zex2911

    (@zex2911)

    11 years, 9 months ago

    can you give a link to your site?

    Michael

    (@alchymyth)

    11 years, 9 months ago

    if you have used the three footer widget areas, then this should work (untested):

    #first .textwidget {  text-align: ...  }
#second .textwidget { ... }
#third .textwidget { ... }

    imho, working with Firefox’ web developer add-on https://addons.mozilla.org/en-US/firefox/addon/web-developer/ is in some situations easier than Firebug http://getfirebug.com/

    Thread Starter 5high

    (@5high)

    11 years, 9 months ago

    Sorry, I can’t give a link to the site as I’m developing it on a local server (hence the huge amount of details in my query!!) – BUT a BIG thanks to alchymyth, as his suggestion has worked first time and looks like this now:

    /*
to change text alignment in footer widgets: keep text on left-align in left widget + centre widget text to center + right widget text to right
*/
#first .textwidget { text-align: left; }
#second .textwidget { text-align: center !important; }
#third .textwidget { text-align: right !important; }

    though I’ve kept the left hand align for the 1st widget in just in case, even though its default is laft align…
    Many thanks for your link to other developer tools for Firefox – I’ll investigate them later today.

    Just one small (actually 2!) query re the correct writing of css:
    1. some write the brackets { + } on the same line as the identifier and others put the closing one on the line below – any difference??
    2. Also, the same re /* + */ in comments and some also put the /* on EVERY line of a longer comment and some put the closing */ on the line below.

    I realise this is totally off subject, so can post this in the coding forum if unsuitable here.

    Many many thanks to all.

    Michael

    (@alchymyth)

    11 years, 9 months ago

    1)
    it is mostly about readability;
    you could re-write the style in one line and leave most of the spaces away, for instance:

    #first .textwidget{text-align:left;}#second .textwidget{text-align: center!important;}#third .textwidget{text-align:right!important;}

    if you look into style.css of Twenty Eleven, for instance, with the extra linebreaks and indentations, this has been written to be easy to read.

    2)
    css comments start with /* and end with */; everything inbetween is commented; no matter if in one line or many lines.

    http://www.w3schools.com/css/css_syntax.asp

    generally a useful resource:
    http://www.w3schools.com/
    http://www.w3schools.com/css/default.asp

    btw:
    if this topic is all sorted, please mark it as ‘resolved’ – thanks

    Thread Starter 5high

    (@5high)

    11 years, 9 months ago

    Very helpful – thanks again 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘how to align text differently in 3 text widgets in 2011 footer?’ is closed to new replies.