WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. stephenbuggy
    Member
    Posted 11 months 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 11 months 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 11 months 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 11 months 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 11 months ago #

    Try this:

    #profile-experience h3,
    #profile-experience h4 { margin: 15px 0 10px; }
  6. stephenbuggy
    Member
    Posted 11 months 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 11 months 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 11 months ago #

    Bingo! Thanks for your help!

Reply

You must log in to post.

About this Theme

About this Topic

Tags