WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Ten - What controls vertical space before main text? (16 posts)

  1. mwrmwr
    Member
    Posted 1 year ago #

    In the Twenty Ten template, what controls the vertical space between the menu bar and the main text? I'm a monkey-see-monkey-do coder.

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Don't edit the Twenty Ten theme. First create a child theme for your changes. Once your child theme is active, try using Firefox with the Firebug add-on to determine what CSS you need to overwrite in the child's stylesheet.
    http://getfirebug.com/

  3. alchymyth
    Forum Moderator
    Posted 1 year ago #

    possibly some padding or margin somewhere in style.css;

    for those general formatting problems, please try to work with a tool such as Firebug http://getfirebug.com/ or an equivalent other browser tool, to identify which styles are involved and which styles you need to edit.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    CSS controls the layout/appearance of pages -- usually would be margins or padding or an element that has no content. Try using Firebug (or Chrome Inspect tool) to look at the page and see what CSS and/or HTML is creating a space (which also tells you what you need to change to alter the space).

    Or post a link to a specific page and someone can likely help with a specific problem.

    EDIT - beat to the punch by two mods!

  5. mwrmwr
    Member
    Posted 1 year ago #

    Thanks! I installed Firebug and am looking at it on the page in question, but I don't see how to find the part of styes that specify that vertical space. Here's a link if someone would like to take a look:

    http://ruthvenimmigrationlaw.com

  6. esmi
    Forum Moderator
    Posted 1 year ago #

    Try looking at the padding for #main.

  7. mwrmwr
    Member
    Posted 1 year ago #

    I don't find #main in style.css or the Firebug window.

  8. esmi
    Forum Moderator
    Posted 1 year ago #

    I did. Try looking again.

  9. mwrmwr
    Member
    Posted 1 year ago #

    I must be looking in the wrong place. Here's a screen shot of that page with the Firebug display.

    http://ruthvenimmigrationlaw.com/images/immig-firebug.jpg

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You are not looking at the right section of the page -- perhaps reading the "how-to" pages about using Firebug would be helpful.

    You need to look at the specific section of the page you want to see the CSS code for. So right-click on the space (you want to change) and then from the pull-down menu select "inspect element." Then you'll see the code in the Firebug window. Or in the Firebug HTML window, you can use the flippy triangles to look at the whole page. When you hover over the HTML code -- the corresponding section of browser page is highlighted -- so then you know you are in the right place. HTH.

  11. mwrmwr
    Member
    Posted 1 year ago #

    Thanks once more. That worked and I see the #main css code in the Firebug window with a note to the right that it's in style.css (line 456). My problem is that there is no #main or anything near a line 456 in the style.css file for that template or any other style.css file that I've found.

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    When you are using a Child Theme, you have to add CSS code to the child theme style.css file that will OVERRIDE the existing CSS code (which is in the parent or another stylesheet). So once you have identified (using Firebug) the code that you need to change, you write the NEW code in style.css. In this case, you've identified that the relevant code is:

    #main {
        clear: both;
        overflow: hidden;
        padding: 40px 0 0;
    }

    But since you only need to change the padding, put this in your style.css file (usually at the bottom unless you have a lot of code, in which case some organization of it can be helpful):

    #main {
        padding: 40px 0 0;
    }

    But change the padding of 40 to whatever you want -- maybe 10 or 20?

    Hope that helps. Learning some CSS will be extremely useful in working with WP...a good basic resource is this:

    http://www.w3schools.com/css/

  13. mwrmwr
    Member
    Posted 1 year ago #

    >When you are using a Child Theme, you have to add CSS code to the child theme style.css file that will OVERRIDE the existing CSS code (which is in the parent or another stylesheet)<

    I understand that, but I'd sure like to know where that style.css file is that contains the #main code that displays in Firebug. I've looked at every one I can find and don't see that code. It must be someplace :-)

  14. esmi
    Forum Moderator
    Posted 1 year ago #

  15. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Ah, okay...Firebug tells you that too (yeah, it's kinda cool that way) -- when you see the CSS code in the right size of the Firebug panel -- to the right of each code section is a blue hyperlink of the file name where that piece of CSS code is coming from. If you hover over that link -- a pop-up text box tells you the name of the file.

    In this case, the pop-up text is:
    http://ruthvenimmigrationlaw.com/wp-content/themes/twentyten/style.css

    which is the parent stylesheet.

  16. mwrmwr
    Member
    Posted 1 year ago #

    >Line 456 http://ruthvenimmigrationlaw.com/wp-content/themes/twentyten/style.css&lt;
    >Firebug tells you that too (yeah, it's kinda cool that way) <

    Yes, talk about cool, especially because it tells you the path to the file. I was "sure" I had downloaded and checked that specified style.css but obviously I had been looking at the wrong one. Adding code to style.css in twentyten-child to reduce the top padding for #main worked like a charm.

    I'm going to do the same thing to see what controls the sidebar formatting. I posted a question about that but I'll bet I can figure it out now :-)

    Thanks so much to both of you for leading me through the Firebug thing. What a great tool.

Topic Closed

This topic has been closed to new replies.

About this Topic