Styled Positioning in Text Widgets

When playing around in your WordPress theme, sometimes you want to use widgets as decoration to make your page a little more interesting.

One of the more flexible widgets available is the text widget.

With this widget you can add any text or HTML you please, giving your website the flair it may or may not need.

While playing with this widget to see what it would do, I decided to test its limits with inline styling.

As you may know, inline styling is a way to try to trick the text widget or posts to use CSS, and this works only some of the time.

A lot of time the code is denied and thrown out like that black banana on your counter top you kept saying you’d eat tomorrow morning.

I will admit, first I Googled variations of “Cool inline CSS tricks in WordPress.com text widget”. Trying to Google any variation of words or phrases to try and find any neat things to do in the text widget using inline styling, all I found was how to add images and font color.

So I did what any person stressed for time with a small child or other needy animal in the house would do: tested out code theory for hours on end.

I tried hover effects: nope.

I tried transition effects: nothing.

fixed positioning: n– wait? what! praise the WordPress gods, it works!

After playing around with it for a while, I’ve decided to take this opportunity to write a tutorial on how to do just this. Style positioning in the text widget!

We can do this trick in a post, of course. However, if this is in a widget, it will only need to be added once and it will show up on each page that widget is active on.

Now, first we must consider that the text widget is picky when it comes to tricking it into doing CSS. So let’s take a look at this code and what happens when you mess with it.

For this tutorial, I will be talking about two types of positioning:

Absolute and Fixed.

Absolute Positioning will scroll with the rest of the page, only seen when the viewer is scrolled to that part of the page.

This is nice for menus, images and any other content that you want stuck in a specific spot in the page.

If you will notice:

The messages on the right to swat the fly are absolute positioned.

As you may know, the CSS for positioning would regularly look like this:


fly {position: absolute; top:200px; left;200px;}

In the text widget or posts, we are only able to use inline styling. Converting the same code into inline CSS looks like this:

<div style="position: absolute; top:200px; left;200px;">Swat that Fly!</div>

Fixed Positioning will stay in one spot while the rest of the content scrolls.

I like using this method for menus sometimes, or pictures or links that I want to stay in view no matter where the viewer is on the page.
“top of page” links are good examples of a link that is useful to have fixed positioned.

Notice the Fly is fixed positioned. While you scroll down this page, it stays in the same spot.

The code looks like this:

<div style="position: fixed; top:200px; left;200px;"><img src="fly.png" alt="fixed position fly"/></div>

The only difference between the codes is the argument for its position, and the content between the style tags.

There you have it! Go play around! Of course, this works in posts as well, but keep in mind that not everything in the already limited list of codes that work in posts will work in the text widget. There is, however, a catch. Screen sizes on different computers affect the placement of the image, so it is always a good idea to view your work on multiple screens to find a happy medium. But even with this catch, its pretty cool that this was allowed… on to more testing!

Swat that fly!
Shoo, fly!

For More Information

Advertisements

7 thoughts on “Styled Positioning in Text Widgets”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s