In "Elegant Grunge" theme, how do you activate 3-column width in CSS?& Other Q's

  • puckcircle · Member ·

    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/

  • puckcircle · Member ·

    Is there anyone that can try to help me with this right away please? If not I’ll have to put my blog on hold until customer service gets back to me.

  • designsimply · Member ·

    I’m looking at your request now. It’s quite a lot! :) Would you mind please in the future entering a separate request for each separate question you have? That will help us get answers to you faster.

  • designsimply · Member ·

    First, note that changing the width of a theme layout varies in difficultly depending on the theme design.

    To move the dividing line further to the right in Elegant Grunge, you would need to update the column sizes as well as replace the background image with a new image that has the dividing line exactly how you want it.

    Here is the current background image for Elegant Grunge which is used for the Content-Sidebar layout in Appearance → Theme options:
    http://s0.wp.com/wp-content/themes/pub/elegant-grunge/images/body.png

    If you created a new image with the spacing how you wanted and uploaded the new image into your media library, I could help you set the widths from there.

  • designsimply · Member ·

    2. My other question, how do I change the background color/image in CSS?

    If you’re just wanting to change the background outside of the main content area, you can do this: 

    body {
    background: #285B61;
}

    Now, the Elegant Grunge theme uses images to create a background. So, in the current Full Width (No Sidebar) layout that you are using, if you wanted to change the background color of the content area AND keep the grunginess, you would want to start by creating a new image like this one with the colors and width you want:

  • designsimply · Member ·

    3. To change font and font size without using any CSS code, the first option for you is to use the Appearance → Custom Design → Custom Fonts page.

    There is also a way to change font text, color, and size by adding CSS code to the Appearance → Custom Design → CSS page. For example, to change the font text, color, and size for post titles, you would use code like this: 

    h2 a {
    font-family: Helvetica;
    font-size: 2em;
    color: #00acb8;
}

    Make sure to adjust the settings to your taste.

    To change the fonts for other things like “by Puckcircle”, you need to figure out which selectors to use based on the html code on your site. In the example above, the selector is “h2 a”. To change the text “by Puckcircle”, you would use something like this: 

    .author {
    font-family: Helvetica;
    font-size: 2em;
    color: #00acb8;
}

    To learn how to find out what selectors you should check out the selectors section of this beginner tutorial: http://www.htmldog.com/guides/cssbeginner/

    I would also recommend checking out the Firebug extension for Firefox because it makes it very easy to find selectors on any web page.

  • designsimply · Member ·

    4. Is there a way to change the dimensions of the custom header image the theme will take in CSS?

    Yes, you can change the dimensions of the custom header, but it’s the same story for the header size as it is for the background image. Elegant Grunge uses images to create that grunginess in the design. Here’s the background for the no sidebar layout option:

    You would need to create a new header background image at the size you wanted, and then replace upload the new image to your media library and then use this to replace that image: 

    .no-sidebar #header {
background-image: url(IMAGE_URL);
}

    Replace IMAGE_URL with your uploaded replacement image URL.

    Next, you would want to adjust the width and spacing of the background image like this: 

    #header-image {
top: 4px;
left: -478px;
width: 956px;
}
  • designsimply · Member ·

    5. What is the image surrounding the background image called, and how do I change that part of the blog’s color?

    Elegant Grunge overlays an image over the top of an uploaded header image to create the appearance of grungy distressed edges. Here’s the image your current layout option, Full Width (No Sidebar), is using:

    To replace the color of that part of the background image, you would need to create a new image and then use CSS to replace it as shown in the #4 answer. And then you would do the same thing for the image used as a repeating tile to create the dark gray color: 

    #header-wrap {
background: url(IMAGE_URL) repeat-x center top;
}
  • designsimply · Member ·

    6. 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?

    Each theme is unique and may have their own styles for displaying tables. To customize that, you would need to examine the stylesheet of which ever theme you switch to in order to determine what CSS to use to make it look how you’d like. The reason the table you created looks the way it does now, is because of the styling in the Elegant Grunge theme. As one small example, here is the CSS from Elegant Grunge that sets how the table border spacing looks: 

    table {
border-collapse: separate;
border-spacing: 2px;
}
  • designsimply · Member ·

    I think that covers all your questions. :) You are off to a good start but you did pick probably one of the most difficult themes to use with regard to changing the layout width. It’s up to you whether to stick to the Elegant Grunge theme or not. I like the way your header looks in it and it looks really nice with the body background color update I mentioned in #2 above.

    If you decide to keep going with changing the layout of such a background image heavy theme like Elegant Grunge, I can help you setup CSS and widths if you get the images updated.

    If this seems like quite a lot of work (which it is), then you might want to consider looking for a different theme that is a better fit without requiring so many extensive changes to the CSS just to make a layout adjustment like it takes for Elegant Grunge.

  • puckcircle · Member ·

    Wow designsimply, absolutely blown away by your help. I was skeptical when someone told me here there was only one person doing CSS help, but now I’m thinking you probably could do a better job yourself than 100 other people combined. Thank you!

    But you did pick probably one of the most difficult themes to use with regard to changing the layout width. It’s up to you whether to stick to the Elegant Grunge theme or not.

    I was starting to feel that way, that maybe I picked a bad theme for this. I do want to pick a new one, but I’m worried if I pick another one without guidance, I might pick another one that’s hard to alter to width. You know, really, I don’t need one where I can alter the width, as long as the width starts out wider in the first place. I’m not sure exactly how man px wide this is, but from what sacredpath said in my other topic, I’m guessing 600px or so? http://www.hockeybuzz.com/blog/Steven-Hindle/Confident-in-Special-Teams-Even-Strength-Scoring-Holds-the-Key/139/37402

    So that’s what I want. A content-sidebar theme with 600 or so px content width, and the sidebar taking up the rest of the page. I went through each and every 2-column and 3-column theme that came up under the theme search filter with the custom header option (there weren’t very many… is this a case where some of them have custom headers but just dont list them? Am I missing out on themes by using the theme search filter? Does every single theme actually allow a custom header, and most don’t list it?) and previewed them all, and most of them actually were skinny like mine, with the 490px width or so, so those didn’t work. There were a few that were wider like I wanted, or closer, but they had other problems. The font used for the date, for “by puckcircle,” the color scheme.

    A question for you that I also asked in my other thread to sacred, does this matter? Do I need to find one where I like the color scheme and everything about it, or should I just be ignoring that because I can change it? I mean, can I change it much more easily than the background width issue? There was one theme, mystique, and for the date and where it says “home” (page titles, I believe), it wasn’t just the font that was an issue, there was actually like a box around the text, or a trapezoid sort of design, filled with a different color. I have no idea if that’s part of the built-in background, and thus couldn’t be changed easily, or if it’s just some modifier to the font that can be removed in CSS.

    So please advise me as to whether I need to find a theme I like everything about at the start, or if I can pick one I don’t like the “look” of, but which has the width and functionality I want, and then I can change the “look” in CSS.

    Also, if you could recommend a theme with 600 or so px content width in content-sidebar layout, that allows custom headers, and where I can modify the things I want to modify in CSS, something that you think would work for me based on looking over my “case” and what I’m describing me, that would probably be the most helpful. Maybe something similar to the link I posted: http://www.hockeybuzz.com/blog/Steven-Hindle/Confident-in-Special-Teams-Even-Strength-Scoring-Holds-the-Key/139/37402

    Or here’s another one:

    Home

    Those both have white backgrounds though, it would be better to have control over that (and maybe they do and they just picked white).

    Here’s a nice one with a brown background and the width I want.

    http://dudesonhockey.com/

    If you could recommend something like those with a custom header option and the ability to edit the look of everything in CSS without too much of a headache, that would be very helpful.

    Thanks again so much for your help!

  • puckcircle · Member ·

    something that you think would work for me based on looking over my “case” and what I’m describing me,

    It should say what I’m describing “here,” not me. Not quite sure how that happened. Also sorry to double post, but I can’t find the edit button.

  • puckcircle · Member ·

    An edit:

    It appears, from comparing to themes listed here http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/#ent to the links I posted, that the width I’m looking for is actually closer to 635-650px than 600 flat. So just insert 635-650 where it says 600 in my previous posts. I want a 630-650px theme (i think unless I’m getting it wrong this time), not 600.

  • puckcircle · Member ·

    Designsimply,

    the fix for my problem might actually be a lot simpler and single-stepped than it appeared a few hours ago. I found a new theme that should work called structure, which I tested and messed around with on my other blog, puckcircle. The theme should work, except for one thing, which hopefully should be a lot easier to fix than all the elegant grunge stuff.

    Here is my topic describing the problem and what I need to fix. If you can help me fix this, I think it fixes everything. I’ll still need to know how to edit the font text and “by puckcircle” and all the “look” stuff for this particular theme, but other than that, this should fix all the width issues and everything in that regard.

    Here is the topic explaining the problem.

    https://en.forums.wordpress.com/topic/how-do-i-make-structure-theme-pages-look-like-home-page?replies=1#post-661380

    Thanks again!

  • designsimply · Member ·

    I’m not sure exactly how man px wide this is, but from what sacredpath said in my other topic, I’m guessing 600px or so? http://www.hockeybuzz.com/blog/Steven-Hindle/Confident-in-Special-Teams-Even-Strength-Scoring-Holds-the-Key/139/37402

    The width of the content area on that site is currently 680px.

  • designsimply · Member ·

    Is this a case where some of them have custom headers but just dont list them? Am I missing out on themes by using the theme search filter? Does every single theme actually allow a custom header, and most don’t list it?)

    All the blogs with custom headers should get displayed in a dashboard theme filter or search for “custom-header”.

    Keep in mind that CSS gives you some additional control too though. You can (usually pretty easily) add a custom header to any theme using the right CSS for the theme’s design.

  • designsimply · Member ·

    A question for you that I also asked in my other thread to sacred, does this matter? Do I need to find one where I like the color scheme and everything about it, or should I just be ignoring that because I can change it? I mean, can I change it much more easily than the background width issue?

    I would say… :) it depends on how much work you want to put into customizing. Some people really get into using CSS and love it tons! Some people just want to make a few minor edits and be done with it.

    If you’re really really into the idea of designing something completely custom, there are framework-type themes that are very plain and which were specifically created with CSS designers in mind. Think of them like a blank canvas. Toolbox is a good example:
    http://toolboxdemo.wordpress.com/
    http://theme.wordpress.com/themes/toolbox/

    In general, regarding picking a theme, I think the preview option in Appearance → Themes page can give you a great idea for how your blog will look with the theme applied and if you’re particularly worried about which theme to pick, taking the time to go through any that look like an interesting thumbnail to you is a good thing to do.

  • designsimply · Member ·

    There was one theme, mystique, and for the date and where it says “home” (page titles, I believe), it wasn’t just the font that was an issue, there was actually like a box around the text, or a trapezoid sort of design, filled with a different color. I have no idea if that’s part of the built-in background, and thus couldn’t be changed easily, or if it’s just some modifier to the font that can be removed in CSS.

    The date in the byline? In Mystique, that’s set with an background image: http://s0.wp.com/wp-content/themes/pub/mystique/images/info-bar.png

    You could easily remove that with custom CSS.

  • designsimply · Member ·

    If you could recommend something like those with a custom header option and the ability to edit the look of everything in CSS without too much of a headache, that would be very helpful.

    The Twenty Ten theme is pretty customizable. The default content width is 584px, but you could adjust that without much trouble at all.
    http://twentyelevendemo.wordpress.com/

    You might like The Journalist. It has a default content width of 700px and an overall width around 910px. I can help you replace the title and tagline with a custom header image you upload to your media library if you’d like.
    http://journalistdemo.wordpress.com/

  • puckcircle · Member ·

    Thanks again for the help designsimply. I found a theme called structure which I really like how the pages looked in it, but not the main home page. So I’ve been experimenting with CSS trial and error for hours messing around with it trying to make the home page look like the supplemental pages, and I’ve succeeded in every regard besides making full posts show up on the home page. You can see here.

    http://sharkcircle.wordpress.com/

    If you could tell me how to make the full posts show up, by whatever means necessary, I really like this theme, and that’s the final step to making it work for me. There has to be a way!!!
    The goal is to make the home page look like the supplemental pages, one of which you can see here.

    http://sharkcircle.wordpress.com/testpage/

    I changed the background and some text color on the home page that doesn’t show up on the supplemental page (which won’t matter because i wont use a supplemental page when it’s done), but other than that I’ve successfully changed everything on the homepage to how it is on the supplemental page, besides the whole post showing up.
    So that’s all I need help on right now. I’m hoping someone can help me figure it out tonight and I can get the blog up tomorrow. Fingers crossed.

1 2
  • The topic ‘In "Elegant Grunge" theme, how do you activate 3-column width in CSS?& Other Q's’ is closed to new replies.