Need help? Check out our Support site, then


Wu Wei Column Width & Page Title Font Size

  1. Hello Compassionate Experts,

    I've been modifying my wordpress.com site with the CSS editor and can't figure out a few things:

    1. how to widen my .center-column width and make the Page Title area take up less space.
    2. I would also like to make the Page Title Font a bit larger but no luck where I've tried so far.
    3. Is it possible to change the color of the header from the light grey it currently is, to something a bit darker? I've tried adding color to the .blog-name but it hasn't worked.
    4. I managed to align my submenus with the hover colors but have this funky white space between the second the and third level of my pull down menus (under market research)
    5. Can I take off the wordpress link at the bottom of the footer and replace with my contact info?

    A general question - I'm a baby with HTML and find the line break code TheSacredPath provided disappearing everytime I return to the visual editor. Am I not supposed to switch between the two?

    Any help greatly appreciated.
    MakingWordsCount

    The blog I need help with is makingwordscount.net.

  2. 1. It appears as if you have widened the center-column already. Try the following to widen the content area. I've gon about as wide I think as you dare.

    .post-content {
    width: 45.333em;
    }

    2. For the page title, add this to your CSS and then adjust the font size. An increase of only .1 or .2 makes quite a difference.

    .post-info h1 {
    font-size: 1.0em;
    }

    3. Change the hex code here.

    .blog-name a:link, .blog-name a:visited {
    color: #D1D9DC;
    }

    4. You can take a chunk off it by changing margin-right to 0 here.

    .menu-main a {
    margin-right: 1.819em;
    }

    5. To do that you would have to use a pseudo element, and Internet Explorer doesn't support those, so over 40% of your visitors would not see that change.

  3. Thank you Sacred Path,
    I spent hours trying to figure out these things!

    I'm still playing with the left hand margin of the post content - I want more space for text and would like to shrink that left hand padding or margin (where the Page Title is located) but no dice. I also like the way the page title wraps which disappears if I shrink the font. Where do I look?

    I tried changing the drop down menu margin to 0 but no dice. Also wondering if I can change the color of the drop down menus?

    Is there a way to stretch out my blog name so it goes across the top?

    I know every browser and its version display the page a bit differently. What should I use as my standard. I'm wondering if the fonts and spacing I'm currently using look good.

    I'm not sure if the hex code worked for the blog title but maybe it's because I've visited.

    I'm wondering what will happen when the next version of wordpress comes out. Should I in someway save my modifications to the CSS code?

    Many thanks and good karma!
    MWC

  4. Two more inquiries!

    1. How do I get the line between my post content and my side bar to be the same as the line between my header and my post content?

    2. Is there a way to alter the font size of just my twitter feed?

    More thanks, and more good karma!
    MWC

  5. The width of the title is under .post-info . Add the following to .post-info in your CSS and then play with the width. With such a large title font though I would suggest not reducing it by anymore than 3em. If you have a title with a long word in it, the right end of the word could end up getting hidden under the post content.

    width: 18.333em;

    The custom CSS you do is separate, so it won't be overwritten and even so, wordpress core upgrades do not include themes, just the core files so no problem.

    For the blog title, I would probably make the "visited" color the same as the base font color for the title. While "visited colors are useful for links in the content and in the sidebar, it really isn't of much use for the title since anyone coming to your site, even just a first time, will be "visited." so they will never end up seeing the grey color on the title at all.

    The following should take care of the footer widget area width. To make up for the increased overall width I increased the width of the widgets themselves as well.

    #footer-widgets {
    width: 68em;
    }
    
    #footer-widgets .widget-area {
    width:18em;
    }

    On the twitter feed, are you taking about the @octopus? If so, add the following and then adjust the font size.

    .widget_twitter {
    font-size: 1.0em;
    }
  6. Thank you SacredPath

    I tried changing the post-info width several times without result. But this time it worked! My biggest issue. I've also been playing with the width 50em? Does that mean it won't work on older browsers?

    1. Still wondering if there's any way to clean up the drop down menu margin so there's no space - placing the .right-margin to 0 but no dice. then I thought it must be the padding and tried this w/o result:

    .menu-main ul ul a {width:121px; line-height:1.2em; padding:2px 10px 4px;}
    .menu-main ul ul li {min-width:121px;}
    .menu-main ul ul a {background: #6a797d; border-color: #6a797d; color: #fff; margin: 0; padding: 2px 10px 4px; width: 121px;}

    2. Is there a way to stretch out my blog name so it goes further across the top?
    3. If I can't rewrite the footer text is there a way to add my contact info, add in a creative commons license?

    Thank you again and hopefully this it for me! Now I've got to actually write something.

  7. Older browsers, clear back to and including IE6 should do just fine with em units.

    1. For the menu tab widths, try the following and see what you think.

    .menu-main a {
    margin-right: 20px;
    width: 100%;
    }

    2. There is a new CSS3 property, font-stretch but it isn't supported by any browsers that I know of right now. You can try letter-spacing, but it puts extra space between letters and quickly makes things look strange.

    .blog-name a:link, .blog-name a:visited {
    letter-spacing: 5px;
    }

    3. There is a trick where you add a text widget to a sidebar (bottom bar in this case) with the information in it and then reposition it into the footer using position:absolute; along with bottom and left positioning values. The following from hallluke is for Contempt, but the same procedure is used.

    http://en.forums.wordpress.com/topic/contempt-theme-css-add-copyright-notation?replies=3#post-545043

  8. I might write up the code to do this in the most popular themes according to the current list. Think it would go down well TSP?

  9. @Luke, yes I do, and anything to help always reinventing the wheel would be a great thing.

  10. I'm off work today so I might get cracking. If you've got any other ideas for "things that get asked all the time regarding CSS" then let me know. Maybe replacing/resizing header images and making them clickable?

  11. Hello,
    Thank you for your advice TheSacredPath. I still couldn't get the sub-menu to line up and decided for now, I'll simply! I still think it has something to do with the padding rather than the margin because, I got it to work on one long ago try and then forgot how.

    FYI: I got the text stretch to work in the latest versions of Chrome and FoxFire but doesn't look great.

    I've asked Hallluke how I can stretch my Pseudo Footer across the 3 column sidebar at the bottom of the WuWei theme - fingers crossed.

    Just wondering where I should be looking to add/lengthen these light grey boarder lines that appear between my my header, my post-content and sidebar widgets.

    Thank you for all your help. I'm now discovering the meager coding I know for the CSS doesn't directly translate to the HTML editor. Surprise! Such a long way to go but I'm getting there.

  12. @makingwordscount, here are the three places you need to look for the lines.

    .full-column {
    border-bottom: 1px solid #D1D9DC;
    }
    
    .center-column .hentry, .center-column .page {
    border-top: 1px solid #D1D9DC;
    }
    
    #footer-widgets {
    border-top: 1px solid #D1D9DC;
    }

    @Luke, yes, that would be a good one to add, making headers clickable and resizing/replacing them.

  13. Thank you TheSacredPath,

    Is there a way to stretch out the line in the footer? I'm playing with the width and margin numbers in the footer but nada.

  14. The following will take the line to the length of the one at the top of the content area.

    .center-column-sidebar {
    width: 68.334em;
    }
    
    #footer-widgets {
    width: 68.334em;
    }
  15. Did you want the link to extend to the very edges of the browser window? This is trickier, but can be done.

  16. Thank you. Alas, I tried that but didn't work. I can get it within approx 10em of the left hand margin but not the entire way.

    Have you noticed something wrong with the custom menus? I can't seem to drag anything around to place into a submenu for the last day.

    cheers!

  17. SacredPath, I didn't see your add on reply. I'd like to put the sidebar and my line to be flush left with the page.title.

  18. On the menus, log out, clear your browser cache and cookies, restart your browser and then try again. That has worked for me.

    The code I gave above takes the line to the same width as the line at the top of the post column. To take to full width takes some voodoo if that is what you are looking to do (like the one under the navigation).

  19. Give the following a try and see what you think. The top border has been move to .center-column-sidebar and removed from #footer-widgets. I did position: absolute and width:100% on .center-column-sidebar and set the left position at 0.

    In #footer I did a position relative, set the width to match the width of the main center-column (68.334em) and did margin-auto for left and right (along with taking the top border out and moving it to center-column-sidebar).

    .center-column-sidebar {
    border-top: 1px solid #D1D9DC;
    left: 0;
    position: absolute;
    width: 100%;
    }
    
    #footer-widgets {
    border:medium none;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 68.334em;
    }
  20. Oh my!! It worked!!! Powerful but finicky. Thank you! I played with this for hours.

    I'm wondering under the CSS scheme is it possible to put a text widget under my post.info column?

    Again thank you - I can't believe I've gotten this far.

  21. Yes, it is possible to put a text widget up there. First you have to create it and put it into your bottom sidebar. Then we can work on moving it up under the post info. This is a little tricky in that we have to leave room for maybe a two or three line post title, and we also have to consider what happens if you have a couple short posts. The post title for the second shorter post could overlap the text widget, so it is best to keep the content of the widget short, or make sure and not do short posts.

  22. Actually, I'm thinking of putting an image into the text box rather than text so it would always be the same size. I'm game!

    Today however besides learning by trial and error how to make the link colors, I've been unable to update my custom menus. I can't seem to grab menu page items and move them around on my mac to designate sub menus. I've tried deleting menus, logging in and out but its not working. Any ideas? I keep thinking there's some box out there I've checked or unchecked that's preventing me...

  23. Log out of wordpress, clear your browser cache and cookies, restart your browser and then try again with the menus. I'm on Mac and have not problems with Safari or Firefox and custom menus.

    When moving them to create sub menu items, move them to the right until a grey outlined box appears and then release the mouse. Sometimes it seems you have to move them around a little in order to get the grey box to appear.

  24. Praises to the sky and earth! It worked! Crazy how these things work.

    Thank you!

    I'm going to repost my question on creating an image box or widget of some sort in my main column on the forum. I feel a bit guilty not having it easy for the next person to find - provided you or one of your colleagues cares to answer!

  25. You are welcome, and I've replied to your other thread on moving the text widget as well.

Topic Closed

This topic has been closed to new replies.

About this Topic