Need help? Check out our Support site, then


How do I change the width of my content column in CSS? & other Q's

  1. Here is a link to my blog. https://sharkcircle.wordpress.com/
    All of the posts I have so far are just tests, testing fonts, etc., and the most recent one is a table I want to include in my first finished blog, but I haven't put the text in around it yet.

    Here are my questions. Elegant Grunge says it's a 3-column theme (along with 1 and 2), but apparently the default is 1. Right now, the table I wrote in HTML in the top post on my blog is way too thin. So I paid for the CSS upgrade so I could change it from 1-column, which it looks like it is right now, to 3-column. I read through the whole style sheet as it is, and painstakingly tested out changing a lot of things, and nothing worked. I have been able to change the dimensions of the main post, the text (table in this instance), as in make the table wider, but I haven't been able to make the actual column wider. So in other words, the table just runs into the sidebar, over the 'dividing line' between the main post and sidebar (or whatever it's called), when what I want to do is move that dividing line line further to the right (in addition to making the whole page wider itself so as to compensate, otherwise the sidebar would run off the page, or rather get cut off). I just want the 3-column post body width like the theme said it could do, in a content - sidebar layout. Just 1 sidebar column.

    So that's my #1 question, that I can't find an answer for anywhere on the net.

    My other question, how do I change the background color/image in CSS? And not just the background around the main posts, where it still leaves the background of the post white or the default color, but actually change the background for the whole page, behind the posts included. How do I do this in CSS?

    Question #3. I know you can change fonts for the text IN posts in CSS or HTML, but how do I change the font/textcolor/size/etc for post TITLES, for the date listing, for where it says "twitter updates," for where it says "by Puckcircle," and all of that? I don't want to be left without control of any of the writing on my page, because the default may not go with everything else I choose.

    Question #4. I designed by custom header image for a different theme, using the dimensions it specified for the custom header image, but since then I realized that theme wouldn't work for me, so I changed to elegant grunge. Now my header image has the wrong dimensions, so I have to crop it and stretch it a little. Is there a way to change the dimensions of the custom header image the theme will take in CSS? Once I make the page itself wider, there will be room for a wider header image, so it's not like it wouldn't fit. It would work, if there's a way to change it. Is there?

    Question #5. If you look at the header image on my blog right now, and this would be the case no matter what size it was, it doesn't fill up the whole top part of the blog. My image has black borders, but then outside of that is this coffee grey/black color that makes up the top part of the blog. This isn't the header, it's not the background color either. What is it called, and how do I change that part of the blog's color?

    Question #6. Width issues aside, my table that I wrote in HTML came out pretty nicely (by my HTML novice standards anyway), but I noticed when I previewed other themes, the table changes completely. Not just the theme around it, the colors around it, but the border width changes, sometimes the lines within the table, separating rows, disappear all together, or are only every 4 rows instead of separating each row like it's supposed to. If I end up having to change themes as a last resort because I can't change the width, how do I keep the table looking the same? The HTML is the exact same, it's not like I'm taking out rows, so I don't understand why they would disappear in other themes. But they have in some. No need to answer this as long as I don't have to change themes, but if I do it becomes a big issue for my blog.

    Those are my questions. Thank you very much! If you only have time to answer one of my questions right now, please prioritize the first one. I can't go forward with my blog at all until I fix the column width issue. Thank you for your time and help!

    (I do not know which version of wordpress I am using, only that I am using the default version for Mac, in Safari. In other words, I haven't downloaded anything, just using it in-house on the wordpress website).
    Blog url: http://sharkcircle.wordpress.com/

  2. No, one was a staff question, in customer support, written to a tech, and this is asking the community since the tech is taking forever.

  3. When you purchase a custom design upgrade you are purchasing Staff support and you are expected to be patient waiting for them to get to you. There's only one Volunteer who helps with CSS editing now and then when he has the time off his work to do so. Please do not create multiple threads.

  4. If there's only one staff person working on CSS customer support, maybe that my should be considered my secondary thread, not this one. But I understand. I'm sorry. If someone helps me here before the staff person responds, I will delete that thread. And vice versa.

  5. I will delete that thread. And vice versa.

    Only Staff can delete threads on these forums.

  6. Both Posts were about the same time.

  7. Auxclass, yes they were. What's wrong with asking help from both the staff and the community? If I just left the staff topic, only staff can respond. If there was someone else who could help, I wanted to have a topic where they could respond. Instead I'm just being criticized for starting two topics.

  8. Setting it for 3 columns (2 sidebars plus the content area) will not make things wider. Setting it for 2 columns (1 sidebar plus the content area) will not make things wider.

    You set it to one 2, 3 or 1 column (no sidebars) at appearance > theme options. It isn't something you set in the CSS.

    The content (post) area on the 2 and 3 column layouts is the same, 490px. If you set it to the full-width no sidebar layout (1 column), the content (post) area will be 800px wide. For your widgets, you would then use the footer sidebars.

    Changing the width of Elegant Grunge is not a simple task and involves recreating or modifying a number of images to replace the existing images used in the theme since that is what makes up all the grungy stuff. If you widen the theme without redoing the images, it will look bad since nothing will be aligned properly and things will be hanging outside of the whitish content area image.

    How a table is going to display in themes is theme specific to some extent. Some of the newer themes are HTML5 and in HTML5, most of the table formatting stuff is depreciated and so it won't be used. Some of the older themes are not yet HTML5, or not completely so yes, things are going to display differently. The way to get around this is to use inline CSS to style the table instead of the normal HTML table attributes.

    The dark coffee grey at the top around the header image is a background image that repeats in the "X" direction and is declared in #header-wrap. You would have to make a new image that is the color you want that is the exact size as the original and then put the URL into the background declaration in #header-wrap replacing the relative URL that is in that declaration. Here is the link to the existing image.

    https://s-ssl.wordpress.com/wp-content/themes/pub/elegant-grunge/images/header-repeat.png

  9. Thank you so much sacredpath! Very helpful.

    You're basically saying it would be very complicated to change the content area while leaving in sidebars, having to create new images. Assuming I can create a new main background image myself, what code do I have to enter to change it? What part of the CSS do I have to change in my theme?

    Or, is there a theme you guys could suggest where it is much easier to change the content with? It seems my theme is atypically complicated to do this in.

    For example, here is just one of the first blogs I found right now that is a good example. Probably not the perfect example, but it's an example of a content-sidebar layout where the content area is still much wider.

    http://www.hockeybuzz.com/blog/Travis-Yost/Response-to-Puck-Daddy-Is-Craig-Anderson-Underrated/134/37353

    You can see the content area with the white background is much wider than my blog, http://sharkcircle.wordpress.com/ but it still has a spacious sidebar as well with embeded video and other stuff.

    How can I achieve something like that the easiest? What theme would work best?

  10. content width, not with.

  11. Also, sacredpath, you said all 3 column and 2 column themes have 490px, but I'm previewing a theme called zbench, and the table is much wider, even though there's still a sidebar. So it's my possible my theme, elegant grunge, isn't even giving me 490px. It seems like it's even less. 490px might actually be enough, if zbench is correctly representing 490px (and its not actually bigger, and my theme normal). The problem with mine is its just so thin. If you go to the actual blog, you can see, it looks abnormally thin even though I've altered nothing in CSS.

  12. Yes, indeed, after previewing other 3 column themes set to content-sidebar, the main problem appears to be that my theme elegant grunge isnt even giving me a 490px content area with the normal content-sidebar layout. It's actually thinner than all the other normal 3column themes at content-sidebar. So all I really need is for the problem to be identified and for it to be set back to 490px and it should be satisfactory then.

  13. It almost seems like, with content-sidebar, the sidebar is taking up like half the additional space the content is supposed to be taking up. In other words, when I set it to content-sidebar--sidebar, with two sidebars, the content is the same width as with just 1 sidebar. Instead of the content filling out the page when i remove the 2nd sidebar, the sidebar is what grows and takes up more room!

    So this has actually been the big problem from the start.

    Is the solution any easier?

  14. Also the no sidebar layout doesn't work. I dont use a set home page, my blog has lots of blogs on one page, and the footer in this stupid theme doesn't constantly take up a small portion of the bottom of the screen. You actually have to scroll down past all the written blogs shown on the main page just to see the footer at the very bottom.

  15. Also the no sidebar layout doesn't work. I dont use a set home page, my blog has lots of blogs on one page, and the footer in this stupid theme doesn't constantly take up a small portion of the bottom of the screen. You actually have to scroll down past all the written blogs shown on the main page just to see the footer at the very bottom. But I did notice, when I change it to no sidebars, the background with the outline lines does change and grow. So it does seem to be adjustable. Is there really no way to change this in CSS?

  16. First off keep in mind that all themes are different and all theme designers have their own thoughts on design. Due to the intricate backgrounds on Elegant Grunge, the available width for the sidebar(s) ends up being set by the background image. 1 sidebar or 2, they take up the same total width. If they did not, then it would effectively be like having to design two separate themes within a theme as the number of background images would double and there would also be a lot of other adjustments necessary.

    I did not mean all themes had a 490px wide column, I was just saying that in this particular theme the main content area was at 490px whether you did 2 or three columns. Not all themes are alike.

    The sidebar can be kept, but it then limits how wide you can go with the content area since for practicality purposes, you want to keep the overall main content area (posts + sidebar) under 1000px in width. This is because there are still a considerable number of people out there on 1024px wide resolutions and you don't want to force people to scroll horizontally to see the whole page.

    Take a look at this post by Panos that lists the widths of the posts columns for all the various themes here: http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/ . This can help you find a theme that might not require widening. And as you will see, Elegant Grunge is indeed 490px for the post area.

    And remember that each theme is designed by an individual theme designer. Some tighten things up to maximize width while others will design with more generous whitespace to allow the content to have some breathing room and not jamb everything together. Some theme designers stick with narrower post areas because in general 500-600px in width is considered the best width for reading (the formula is actually a little complex and takes into account font size and such).

    The theme is NOT stupid. If you set the sidebar at the bottom to always show, then you would have to scroll the main content (posts) underneath it which would introduce two scroll bars and people absolutely HATE multiple scroll bars on sites. And besides, the stuff in the sidebar are supplemental AIDS to navigation and such, they aren't the content. Do you want to showcase your posts or your fluff in the sidebar? Which is more important?

  17. Thanks very much sacred path. I havent been back on here since posting as I got very frustrated with the whole process.

    The link you recommended, I haven't gone through it yet, because I actually manually previewed every single 3-column or 2-column theme listed under "A-Z" in the wordpress.com theme section that had a custom header option, and none of them looked good. None.

    So I guess my question to you would be, how much can I actually change about these things? Like if I dont like the writing used for links, or the "by puckcircle" font, or the designs used, the color scheme on a theme that doesn't have "custom background" checked in the theme search filter, does that I mean I shouldn't pick it? Or should I just pick the one with the most functions, widgets, etc, and the view area I want, regardless of the color scheme and how it looks, and then just change the color scheme and the text and everything in CSS? I mean is that possible, or is it like the background where it's way too difficult? Like there was a them called mystique I believe, that had a lot of functionality, but if you go look at it, where it says "home" for the home page, the text is in a little square box, and the date, too, where it says "July 24," it's white writing inside of sort of a trapezoid type brown shape. I didn't like the look at all.

    So if I picked that theme, would i be able to easily change that stuff about it and make it the way I want it? Or do I literally have to find a theme where I like most things about it as they are? Because I haven't found something like that. The reason I picked elegant grunge is because it was at least neat and well put together and looked fine, even though I couldn't pick my own background, and other shortcomings. But it least it didnt stick out and look bad and completely unprofessional. Every other one I've previewed has big problems like I mentioned.

    So should I just pick one like mystique and be able to change everything besides the width, or is changing everything else as difficult as changing the width?

    Thanks again so much for your help.

  18. like the width, not like the background. is it like the changing the width.

  19. To have a three column theme with two sidebars, you have to start with one that supports that. As far as changing fonts, widths, colors, etc., all of that can be done with CSS. How easy that will all be just depends on the theme you start with. Some are much more well thought out and organized than others. With some you might have to change the font family in one place to change everything. In another you may have to change it in several places.

    Font families are pulled from the visitor's computer so unless you go with fonts from Typekit (which is part of the Custom Design upgrade) you have to stick with fonts that are common on all types of computers (OS).

    CSS changes positioning and styling of the elements in a page only. It cannot be used to add functionality such as adding a second sidebar. If a theme had two sidebars on the right you can move one of those to the left typically although again, how easy that is depends on how the theme designer did things in the original design.

    It is always best to start with a theme that is as close as possible structurally to what you want as that means less work to get it to a point where you are happy.

    Changing widths, colors, font-families, font sizes, background images or colors, etc., is reasonably easy.

    Themes that use a lot of background image elements are more difficult to change location of and width on elements because you have added another layer of stuff you have to do; editing or recreate all those images to fit your new widths and arrangements.

Topic Closed

This topic has been closed to new replies.

About this Topic