The image in my sidebar is too wide for my theme

When we set up blogs we always create a class template to speed up the creation of new blogs. This template always includes a school logo and a button back to the home blog. The trouble is, when teachers switch themes, sometimes the logo and button images that we have uploaded are too wide for the chosen theme.

Here is an example. As you can see, the logo and back button both far exceed the width allocated in theme for the sidebar.

Fixing this is relatively straightforward, but it does require you to edit the code that displays the image. It's a good skill to master as once you've got it, it's really easy to do.

Go to Appearance > Widgets

On the righthand side of the screen you will see a list of widgets displayed on your blog. A widget is an element in the sidebar, for instance, you will usually see Visitors (Globe widget), Latest Posts and Latest Comments etc among many others.

You are looking for Text widgets: these are simply blank widgets into which you can write code to display images etc. If you use the dropdown arrow at the end of the bar labelled "Text" you will see the widget content that we have written. It should look something like this:

If you look carefully you will see that the code is written to display an image whose filename in this instance is woodlands_logo.png 

What we need to do is modify the code by telling the widget how wide we need to display the logo. To do this position the cursor immediately after the final quote mark, but before the pointed bracket. Now add a space followed by the following modifier:

width="200"

Now save the change by clicking the save button. Check your blog to see if the edit is correct. In some themes, the value might need to be as low as 175 or as high as 250. Sometimes a bit of tinkering is required to get the value just right. In the example below I have modified the width to 250 pixels.

 

Repeat the process for the text widget that contains the button code.

If successful, the sidebar should now have images that fit the available width.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk