you're reading:
Images, Sidebar, Text widgets, Themes, Widgets

Sidebar width

http://wpbtips.wordpress.com/

Knowing the content width of your sidebar (or other widget area) helps you create, select, or adjust the images or other objects you wish to add to it, and avoid displaying objects that are badly aligned, or stick out past the available space, or are cut off; in lousy browsers such as IE, an object that exceeds the sidebar width may even break the theme.

Theme Widget content width (px)
Adventure Journal sidebar 190, footer 289
Albeo 246
Almost Spring 190
Ambiru 200
Andrea 180 (fixed) /256 (flexible) - see note
Andreas 04 flexible
Andreas 09 165
Autofocus 195
Banana Smoothie 140 - but see note
Beach 180
Benevolence 180
Black-Letterhead 190
Blix 190
Blogum 225
Bold Life 214
Bouquet 285
Brand New Day 210
Bueno sidebar 300, footers 280
Chaos Theory 365
Chaotic Soul 200
Chateau sidebar 188, upper footer 729, lower footer 172
Choco 185
Chunk 240
Clean Home sidebar 250, header 900
Comet 270/155 - see note
Connections 174
Contempt 184
Coraline see separate post
Dark Wood 169
Day Dream 150
DePo Masthead 302
DePo Square 206
Digg 3 Column 160
Duotone variable
Dusk 170
Dusk to Dawn 222
Duster sidebar 187, showcase sidebar 188, footer 850/408/262 - see note
Elegant Grunge one sidebar 220, two sidebars 180 & 169; footers 222
Emire 195
Enterprise sidebar 260, footers 270
Esquire 520
Fadtastic 160
Fauna 210
Fjords 04 170
Fleur de Lys 190
Flower Power 140
Forever sidebar 261, footer 193/270/423/886 - see note
Fresh & Clean 229
Fresh Bananas 160
Freshy 212
Fruit Shake sidebar 235, footer 901/420/256 - see note
Fusion 234 / 245 /206&159 - see note
Garland left sidebar 198, right sidebar 188
Girl in Green 204
Greenery 192
Green Marinée 210
Greyzed sidebar 235, left & right footers 238, middle footer 340
Grid Focus 234
Hemingway 265 - but see note
Iceburgg 240
Imbalance 2 210
iNove 270
iTheme2 249
Inuit Types 225
Jentri 170
K2-lite 202
Koi sidebar 266, footer 1&2 270, footer 3 360
Kubrick 190
Light 200
Liquorice 178
Manifest 500/235 (1/2 columns)
Matala sidebar 210, footer 625/279 (1/2 columns)
Misty Look 180
MLB (all three) 301
Modularity Lite sidebar 310, footers 230
Monochrome 206
Monotone no sidebar
Motion sidebar 270, footer 290, header 470
Mystique one sidebar 302, two sidebars 232; footers 206
Neat 170
Neo-Sapien sidebar1 120, sidebars2&3 160
Neutra 170
Next Saturday 208
Nishita sidebar 208, footer 250/334 (narrow/wide layout)
Notepad 270
NotesIL 190
Nuntius sidebar 260, header 484, featured 300
Ocadia 170
Ocean Mist 193
Oulipo 176
P2 212
Paperpunch sidebar 252, footers 202
Parament 228
Piano Black 270
Pilcrow see separate post
Pink Touch 2 690/330/220 - see note
Pool 160
Prologue 176
Quentin 180
Quintus 220
Reddle sidebar 284, footer 284/440/910 – see note
Redoable Lite 210
Regulus 200
Retro-fitted 275
Retro MacOS 309/672 - see note
Rounded flexible
Rubric 126 - but see note
Rusty Grunge 177
Sandbox 0.6.1 sidebars 180, bottombar flexible
Sandbox 1.1 180
Sandbox 1.6.1 180
Sandbox 1.6.2 180
Sapphire 190
Selecta sidebar 281, footer 244
Shaan 260
Shocking Blue Green 124 - but see note
Silver is the New Black 184
Simpla 180
Skeptical 200
Solipsus 200
Spectrum 237
Splendio sidebar 270, footer 149
Spring Loaded 211
Steira 349
Strange Little Town 250
Structure left s. 180, right s. 280, homepage top 310, footer l./ml./mr. 170, footer r. 350
Suburbia 155
Sunburn 200
Sundance 185
Sunspot left sidebar 253, right sidebar 224
Supposedly Clean 215
Sweet Blossoms 125
Tarski 200
The Journalist v1.3 180
The Journalist v1.9 180
The Morning After primary 190, secondary 260, homepage featured 470
Thirteen 185
Titan sidebar 265; footers: l. 337, c. 281, r. 266
Toni 160
Toolbox 220
Treba 200
Triton Lite sidebar 290, “middle row” (above footer) 290, footer 200
Twenty Eleven sidebar 187, showcase sidebar 188, footer 850/408/262 - see note
Twenty Ten sidebars 200, footers 220
Twenty-eight Thirteen 200
Under the Influence sidebar 150, footers 198/270 - see note
Unsleepable sidebar 201, bottombar 220
Vermilion Christmas 165
Vertigo 429 if you use one footer area, 392 if you use two
Vigilance wide sidebar 300, left & right sidebars 140
Vostok 288
White as Milk 180
WordPress Classic 130
Wu Wei 220
zBench see separate post

Notes

• “Sidebar” for brevity: actually sidebar or bottombar/topbar column.
• Where there are two or three sidebars or bottombar/topbar columns, they are only mentioned separately if they are of unequal width.
• In some themes, widget content is enclosed in frames; for those cases the number given doesn’t refer to the width of the frames but to the proper maximum width of the content inside them.

• Andrea: The theme can have fixed or flexible width (Appearance > Theme Options).
• Banana Smoothie: Images must be no more than 134px wide, because they automatically get a 3px wide border.
• Comet: Double number = if one sidebar or two.
• Duster, Twenty Eleven: Triple footer number = if one/two/three columns.
• Forever: Quardaple number = if four/three/two/one columns.
• Fruit Shake: Triple number = if one/two/three columns. Minus 10px for images (bordered).
• Fusion: The theme can have fixed or flexible width (Appearance > Theme Options). Multiple numbers above = if with left sidebar / if with right sidebar / if with two right sidebars; numbers refer to fixed-width option (flexible-width option -> flexible-width sidebars too). Footer column width variable (depends on number of widgets added).
• Hemingway, Rubric, Shocking Blue Green: Depending on the browser, sidebar width may change when zooming in.
• Reddle: a) Triple number = if widgets in three/two/one footer areas. b) All numbers apply to the semi-fixed version of the theme only; that is, if you have uploaded a header image.
• Retro MacOS: Double number = if widgets in two footer areas or one.
• Under the Influence: a) Total theme width and sidebar width are customizable – numbers given here refer to default version. b) Double number for footers = 4th footer cell on/off, respectively.

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.
About these ads

Discussion

32 thoughts on “Sidebar width

  1. Very useful!
    It’s laborious to try again and again until you find the exact size. I spent a lot of time to find the 174px for Connections (in another blog). Just in order to get a nice display, at least on decent browsers.
    Thanks!

    Posted by K. Gregorovius | January 11, 2010, 20:24
  2. @K. Gregorovius: You’re welcome! (You can imagine how laborious it was for me, doing that for 78 themes…)

    Posted by Panos | January 11, 2010, 20:36
  3. Yes, I do! Yours is a great work. Thanks again!

    Posted by K. Gregorovius | January 12, 2010, 02:19
  4. Very informative for lazy people. I love your work

    Posted by RP | January 13, 2010, 04:54
  5. Hehe – thank you!

    Posted by Panos | January 13, 2010, 06:59
  6. If I had guessed, your two sidebars look the same width but maybe the right side a touch wider. Seeing is deceptive…

    Posted by Tess | January 13, 2010, 18:41
  7. @Tess: Strange, isn’t it? They do look the same, but they won’t accomodate the same content. I confirmed that by checking the CSS of the theme: different margin numbers.

    By the way, in themes such as Vigilance it was easy to find the exact width because of the fixed dividers. In themes such as Garland I had to compare the alignment of an image against some lines of text in really tiny font size.

    Posted by Panos | January 13, 2010, 22:12
  8. Great work, Panos! (like always…) :-) Thanks

    Posted by Galois | January 14, 2010, 22:01
  9. Thank you, Galois!

    Posted by Panos | January 16, 2010, 10:00
  10. Have you created a list of themes that display sidebars on every page?

    Posted by timethief | February 8, 2010, 00:26
  11. Yes:

    http://wpbtips.wordpress.com/2009/11/12/widgets-on-pages-or-single-posts/

    (Actually it lists which themes don’t, because, as you know, the majority do, and those in the minority have various quirks.)

    Posted by Panos | February 8, 2010, 01:01
  12. Thanks and check your email. :)

    Posted by timethief | February 8, 2010, 03:07
  13. Do you have a post that lists the width of the blogging spaces in posts and pages for the various themes? I’m currently writing a post and that would be an additional link that I would love to have in the post. (I’m linking to this one in it.)

    Posted by timethief | February 19, 2010, 05:51
  14. @tt/1: I did, and thanks too!
    @tt/2: I do, and in the meantime you found it!
    (http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/)

    Posted by Panos | February 19, 2010, 11:56
  15. How can I change the code so I can adjust the alignment of my right sidebar in the theme Vigilance??? I’m creating a photoblog and I’m trying to put a margin between my photos in the main column and the right sidebar with the blogroll, etc. Because right now, they’re hugging close and I can only make my photos so large.
    I think I have the code, is it <div style= "margin-left: 60px;" and do I put that in front of the sidebar code? However, I don't know where to input this code on wordpress? I know how to adjust the code for a post but not for the alignment of the blog, where is that html located?? I feel like an idiot I can't find it. Would I be messing with the CSS Stylesheet Editor section under Appearance???

    Posted by Paula L. Combs | April 6, 2010, 08:41
  16. @Paula: Codes such as the div style etc you mention are for posts or text widgets. To change the appearance of the blog, you need differently formed coding, and you need the paid CSS upgrade: better forget it if you have no experience in CSS editing.

    A simple way to create more space between the post column and the widgets in Vigilance is:

    Wide sidebar: empty text widget;
    Left sidebar: text widget with the code for an empty space in it (see here);
    Right sidebar: the widgets you actually need.

    But of course that will be a lot wider than 60px – I don’t think I would do that. Instead I would suggest you switch to TheJournalist v1.9 (maximum image width 680px) and insert 620px wide images. Or maybe switch to iNove with its sidebar deactivated.

    Posted by Panos | April 6, 2010, 12:55
  17. Panos: I really like Vigilance but whatever theme I use- I want the right sidebar there so I can have a blogroll and archive visible and easy to access. I did research more and found I need the CSS upgrade to change the layout, like you mentioned. I have little experience with changing/writing code but I’ve been researching it more, I don’t mind putting in the time, however, I’m going to play around with The Journalist v1.9 and see if maybe it will suit my needs before I go frustrating myself anymore. Thanks for the suggestions..

    Posted by Paula L. Combs | April 7, 2010, 10:02
  18. What a useful post! And what a busy person you must be doing all this testing!

    I’m particularly interested in this at the moment as I’m trying to design some buttons for one of my blogs that uses words and I really couldn’t work out the maximum width for them.

    So – thanks!

    Val

    Posted by absurdoldbird | July 19, 2010, 15:14
  19. @Val: You’re welcome!

    Testing isn’t that difficult, and I didn’t do all themes at once: started with the occasional forum reply. Whenever I found and gave such pieces of info, I would save them in a file as well, and at some moment I completed the picture.

    Posted by Panos | July 20, 2010, 05:07
  20. How do I determine the height and width of the sidebars on the ‘off the shelf’ free neoease ‘inove’ wordpress theme I am using? I am trying to add a slideshare widget and do not know where the pcx width is located. If I dont modify it is way to thin. I had trouble locating in the sidebar.php.
    Thank you

    Posted by tcad | January 25, 2011, 16:26
  21. I posted previous note about pcx width. Inove was actually located in above width grid and I just located it. What a great resource this page is.

    Posted by tcad | January 25, 2011, 16:43
  22. @tcad: You’re welcome and thanks!

    Posted by Panos | January 27, 2011, 11:41
  23. Very usefull information. i was searching for the twenty10 theme width, and without this table i would have to install the theme and see the width :-)

    Posted by TemplatesRule.com | March 21, 2011, 15:55
  24. can u give me code of digital time which is showing inupper right corner in blue colour

    Posted by Techno-Managers | November 4, 2011, 01:28
  25. @TM: Sorry, the designer of that widget doesn’t allow its distribution for free.

    Posted by Panos | November 4, 2011, 04:38
  26. Aonde posso inserir o código do Geográfico no meu blog wordpress.com. alguém aqui pode me ajudar? agradesso!!

    Posted by carlyevandro | March 4, 2012, 21:33
  27. Me, again. ; )
    Now that I’ve added new pages they are wrapping in my navigation line. Seems like I need to make my sidebar more narrow. Is this possible? I’ve spent the last 30 minutes searching on how to do this. Can’t find it, so I decided to ask my go to person? If there’s an easier way to ask you questions, please let me know what that is.
    Thanks so much for all your help. As I said before, you are a find. Most of the answers I’m finding on here, assume I know HTML.

    Posted by Julie Punishill | March 12, 2012, 09:39
  28. Hi again,
    But there’s a problem in this case: WP has repeatedly pissed us off (I mean us experienced forum volunteers), so we have decided not to help with CSS editing. Users who have the Custom Design upgrade are entitled to staff support, so you can post your question in the CSS section of the wordpress.com forum and wait for a staff reply.

    Alternative, non-CSS, solutions: make your page titles shorter, or create a dropdown for some of the pages. A dropdown is created by turning some pages into child pages (editing them and assigning another page as their parent in the Page Attributes module of the page editor).

    Posted by Panos | March 12, 2012, 21:05

Trackbacks/Pingbacks

  1. Pingback: Cut and Paste HTML Tables for Your WordPress Blog « onecoolsitebloggingtips.com - February 22, 2010

  2. Pingback: Align Images: HTML Tables for WordPress Blogs « onecoolsitebloggingtips.com - March 25, 2010

  3. Pingback: Select a WordPress.com theme 2 « onecoolsitebloggingtips - May 21, 2010

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,552,637 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: