Align center codes in WordPress sidebar.

aside

Last modified date

Comments: 12

This post has already been read 127 times!

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.

selectma8 - Align center codes in Wordpress sidebar.

Picture 5

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

enterez9 - Align center codes in Wordpress sidebar.

Picture 6

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

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

lefthd8 - Align center codes in Wordpress sidebar.

(no ‘div’ tag)

centerqi5 - Align center codes in Wordpress sidebar.

(with ‘div’ tag)

Share

12 Responses

  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

      • 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. 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>";