Twenty Ten spacing/margins

  • Resolved Impact Copywriting

    (@impact-copywriting)


    13 years, 4 months ago

    Hi there,

    i’m using the Twenty Ten theme, version 1.5

    I have customised the page to a one-column with no comments.

    My question is: how can I tweak the spacing at the beginning of each page?

    Have a look at my home page to see what I mean http://www.impactcopywriting.co.uk

    Each page has a large space (gap) between the navigation tabs and the text/heading on each page.

    So, for example it currently looks like this: (home page)

    Home ] Why hire a copywriter ] Why hire me? ] Services ] Rates ] Take a look ….

    (Huge gap/space)

    Helping small to medium businesses succeed (heading)

    You want your business to stand out from the crowed … (text) >> end.

    How do I reduce this space to a normal gap between two sentences? This will apply to all my pages.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 4 months ago

    Try using a browser developer tool for this kind of exploratory CSS work.
    I use Google Chrome’s built-in Developer Tool and it’s really easy to expose the webpage’s underlying HTML and CSS.

    Now that you know the style, from being exposed by the Developer Tool, you can add a new style to override it.

    You ought to add new styles externally, not within the theme’s files. Changes to the theme’s files will compromise the theme and be compromised when the theme updates.

    External changes can be made using a Child Theme or through a plugin that provides Custom CSS functionality.

    I recommend using the Jetpack plugin and its Custom CSS functionality to hold your CSS modifications.

    Thread Starter Impact Copywriting

    (@impact-copywriting)

    13 years, 4 months ago

    Thanks for that Andrew.

    I have Jetpack linked to my theme and have access to the Twenty Ten Stylesheet – CSS.

    When I click on the Editor heading under Appearance, the Edit Themes page comes up. It has code written, but I have no idea how to alter this code to change the spacing.

    [No need to post CSS code here — it’s all visible on your site.]

    So, the question remains … how do I change the spacing?

    WPyogi

    (@wpyogi)

    13 years, 4 months ago

    Definitely use the custom CSS in jetpack – and add this code there:

    #main {
    padding-top: 0;
}

    Do not modify the style.css file directly — you’ll lose all your changes when WP is updated.

    Thread Starter Impact Copywriting

    (@impact-copywriting)

    13 years, 4 months ago

    So what you are saying is:

    Go to Appearance > select Edit Css ( Css Stylesheet Editor)

    Here’s what it has on it: Is this where I need to type your code in?

    /*
    Welcome to Custom CSS!

    CSS (Cascading Style Sheets) is a kind of code that tells the browser how
    to render a web page. You may delete these comments and get started with
    your customizations.

    By default, your stylesheet will be loaded after the theme stylesheets,
    which means that your rules can take precedence and override the theme CSS
    rules. Just write here what you want to change, you don’t need to copy all
    your theme’s stylesheet content.
    */
    .page-id-622 .entry-title {
    display: none;
    }

    WPyogi

    (@wpyogi)

    13 years, 4 months ago

    Yep, you got it.

    Thread Starter Impact Copywriting

    (@impact-copywriting)

    13 years, 4 months ago

    Awesome. Thanks a lot, however, there is a small problem.

    The space on the home page has reduced and it’s exactly as I want. However, it has also reduced the space on the rest of my pages and the first line now lies flush with the header.

    Have a look at what I mean: http://impactcopywriting.co.uk/why-hire-a-copywriter/

    I have tweaked the code from ‘0’ to ‘1’ and it still doesn’t make dent to the other pages. Should I just keep tweaking it until the other pages look normal? But then the first page will have a big gap again.

    WPyogi

    (@wpyogi)

    13 years, 4 months ago

    You can actually target the CSS to only one page by using a page-specific class – like this:

    #main {
    padding-top: Xpx;
}

body.home #main {
    padding-top: 0;
}

    The first one will target all other pages, the second only the home page – so adjust accordingly.

    Thread Starter Impact Copywriting

    (@impact-copywriting)

    13 years, 4 months ago

    Another question if you don’t mind … please.

    How I do increase the layout margins (make wider) in the page (content) columns?

    In other words, each page has one column – not two. I find that this column is a bit narrow and I’d like to increase it slightly.

    Know what I mean?

    Thread Starter Impact Copywriting

    (@impact-copywriting)

    13 years, 4 months ago

    Yay … you are a SUPER STAR! Thank you ever so much for helping me sort these gaps.

    Thank you, thank you, thank you. I have tweaked the other pages and it looks awesome now.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Twenty Ten spacing/margins’ is closed to new replies.