• Resolved stephenbuggy

    (@stephenbuggy)


    Hi,

    I’m just designing a custom theme with this wonderful theme.

    However, I am having trouble with this page:

    https://www.stephenbuggy.com/hire-me/resume/

    The headings and sub-headings in the experience section are too close together. Despite using Chrome’s inspect element I can’t work out which bit of the theme’s stylesheet to add margin to.

    Could someone point me in the right direction, please?

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You don’t edit the theme’s stylesheets.

    Use this Custom CSS Manager plugin to hold your CSS modifications. You override the existing CSS by creating new styles.

    Thread Starter stephenbuggy

    (@stephenbuggy)

    Ok, thanks for that. That is much better than mucking directly with the theme. I’m getting somewhere but my CSS skills are letting me down.

    As you can see if you view the webpage I have worked out how to select the correct elements – I have temporarily put a coloured boarder round them to make sure I am selecting them but I can’t work out how to get them to space out.

    I had assumed that “margin-bottom” was the right thing to use and applied a margin-bottom of 40px but that doesn’t seem to be working at all.

    I’m really lost!

    Thread Starter stephenbuggy

    (@stephenbuggy)

    Incidentally, the code I added:

    #profile-experience div div div div div h3 span {
    	margin-bottom: 40px;
      border: 1px solid red;
    }
    
    #profile-experience div div div div div h4 strong span {
      margin-top: 40px;
      border: 1px solid green;
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try this:

    #profile-experience h3,
    #profile-experience h4 { margin: 15px 0 10px; }

    Thread Starter stephenbuggy

    (@stephenbuggy)

    No luck!

    I put in:

    #profile-experience h3,
    #profile-experience h4 {
     margin: 15px 0 10px;
     border: solid 1px blue;
    }

    As you can see, it selected the right thing but the margin didn’t appear.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Very strange how your theme is overriding the Custom CSS plugin. You’ll have to use more specific selectors:

    #profile-experience .postitle h3,
    #profile-experience .postitle h4 {
     margin: 15px 0 10px;
     border: solid 1px blue;
    }

    Thread Starter stephenbuggy

    (@stephenbuggy)

    Bingo! Thanks for your help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Problem working out Custom CSS to target’ is closed to new replies.