WordPress.org

1. 5high
   Member
   Posted 10 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.

2. zex2911
   Member
   Posted 10 months ago #
   

   can you give a link to your site?

3. alchymyth
   The Sweeper & Moderator
   Posted 10 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/

4. 5high
   Member
   Posted 10 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.

5. alchymyth
   The Sweeper & Moderator
   Posted 10 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

6. 5high
   Member
   Posted 10 months ago #
   

   Very helpful - thanks again :)

Reply

You must log in to post.