WordPress.org

Ready to get started?Download WordPress

Forums

zeeBizzCard
[resolved] Problem working out Custom CSS to target (8 posts)

  1. stephenbuggy
    Member
    Posted 1 year ago #

    Hi,

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

    However, I am having trouble with this page:

    http://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?

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  3. stephenbuggy
    Member
    Posted 1 year ago #

    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!

  4. stephenbuggy
    Member
    Posted 1 year ago #

    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;
  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try this:

    #profile-experience h3,
    #profile-experience h4 { margin: 15px 0 10px; }
  6. stephenbuggy
    Member
    Posted 1 year ago #

    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.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    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;
    }
  8. stephenbuggy
    Member
    Posted 1 year ago #

    Bingo! Thanks for your help!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags