Align center codes in WordPress sidebar.

12

This is my first tutorial for the newbies to WordPress blogger and share my knowledge and experience.

A simple ‘div‘ or ‘center‘ tag is use to center align javascript, html or flash embed codes in sidebar.

Example:

<div align=”center”><YOUR CODES HERE></div> or <center><YOUR CODES HERE></center>

Other html tag can be use to perform similar functions but using paragraph tag to align text in sidebar widget.

Example:

<p align=”center”><YOUR PLAIN TEXT HERE></p>

Nothing fancy really easy trick.

For those who are new to WordPress, I’ll show how to paste your codes to your sidebar.

1. Log in to your WordPress admin area.

2. Click on ‘Presentation’.

3. Choose ‘Widgets’ and you will see Sidebar Arrangement area.

4. (if widget not placed inside sidebar column) Drag and drop the ‘Text #’ widget under Available Widget to your sidebar column.

5. Next configure the widget. See picture 5.

configure

Picture 5

6. Add or paste your codes. See picture 6.

Sidebar

Picture 6

7. Finally, click ‘Save Changes’ button and preview your sidebar widget.

*You can see the difference from sample pictures shown below:

Not centered

(no ‘div’ tag)

Centered

(with ‘div’ tag)

12 thoughts on “Align center codes in WordPress sidebar.

  1. I’m not sure exactly what you’re getting at. If you wish to center any codes ie. Javascript, flash or html, a simple div align will do the trick. But if you wish to center the php widget codes, if I get this correctly, I will do some tweaking to the CSS that come along with the widget php codes. If you noticed my AKISMET widget, there is a CSS included to control the way it will be display on my template. Or you can try to go through your “get_wheather_widget.php”, look for CSS entry inside the codes itself. Hopes that help and answering your question.

  2. Hi Thankyou for your response. I have tried to add div coding with the widget but with no luck.

    The widget I am using is available at:

    Should you be able to shed some light here…

    Thank you very much

      1. I can’t get the plugin to work in order for me to test it. And this is going to take me a while to figure out how to make it work. I’ve seen the codes at the site you told me. I know what you mean by try adding div coding in that php. The weather icon and the texts is display in [ ul ] unordered lists. It can be center align but I can’t seems to remember how. I think it can be centered by adding style/css or class wrapper to it. That’s going to take me all day to figure it out. I’m sorry I can’t be much help to you at the moment.

  3. yup….it work….
    i use this code
    yhanks again….
    i’ll link this page for other user 🙂

  4. To align center the getweather widget, it’s better to go through directly to the php file.

    Simply putting a div tag just would not do as div tag already declared inside getweahther.php.

    To align it, open the getweather.php with HTML editor or notepad and look for this line:

    $s = "<div id=\"weather-image\" style=\"background: url(‘$icon’) !important; background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’$icon’, sizingMethod=’scale’); height: 128px; width: 128px;\"></div>";

    and add div align to it (refer to example below):

    $s = "<div align=\"center\" id=\"weather-image\" style=\"background: url(‘$icon’) !important; background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’$icon’, sizingMethod=’scale’); height: 128px; width: 128px;\"></div>";

Leave a Reply to Den Cancel reply

Your email address will not be published. Required fields are marked *

Next Post

Use HTML text formatting to change "PAGE" title text style

Sun Oct 21 , 2007
Please take note this is just a quickie tips on how to change the font styling to the Post or Page title. This example demonstrates how you can format PAGE title text in WordPress without the use of Cascading Style Sheet. You can format PAGE title on the spot as […]
dacaaffaabdfdde

Related