WordPress.org

Forums

Anthem Theme edit style.css (11 posts)

  1. jeroenlaven90
    Member
    Posted 2 years ago #

    Hello, I like to edit my css file for the anthem wordpress theme. Already changed some colours but can't figure out how to change the colour of the main navigation under the round logo. Could somone please help me out? You will find the css code for the main nav and the links. Somebody knows how I can change the main navigation links and keep te reddish color on the other links in the posts?

    this is the website: http://minimaljournal.com

    /* MAIN NAV
    ----------------------------------------------- */
    nav {
      margin-bottom: 30px;
      padding: 1em 0 1.1em;
      border-top: 1px solid #ececec;
      border-bottom: 1px solid #ececec;
      -moz-box-shadow: 0 5px 8px -5px rgba(0, 0, 0, 0.075);
      -webkit-box-shadow: 0 5px 8px -5px rgba(0, 0, 0, 0.075);
      -o-box-shadow: 0 5px 8px -5px rgba(0, 0, 0, 0.075);
      box-shadow: 0 5px 8px -5px rgba(0, 0, 0, 0.075);
    }
    nav ul {
    	line-height: 1.5em;
    	font-size: 1.5em;
    }
    nav li a {
      font-weight: bold;
    }
    
    .sub-menu {
      font-size: 1em;
      line-height: 1.5em;
      margin-left: 1.5em;
    }
    
    /* LINKS
    ----------------------------------------------- */
    a {
      text-decoration: none;
      color: rgb(206, 79, 76);
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      border-style: none;
    }
    
    a:hover, a:focus {
      color: rgba(0, 0, 0, 0.5);
    }
    
    a img {
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
    }
    
    a:hover img, a:focus img {
      opacity: .85;
    }
    
    /* ALT LINKS IN POST + PAGE BODY */
    .post-body a,
    #content.page a,
    #comments a,
    #respond a {
      color: #000000;
      font-weight: bold;
    }
    .post-body a:hover,
    #content.page a:hover,
    #comments a:hover,
    #respond a:hover {
      color: rgba(20, 158, 231, 0.5);
    }
    
    a.post-edit-link {
      padding: 3px 6px;
      font-size: .75em;
      background: rgba(0, 0, 0, 0.05);
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -o-border-radius: 3px;
      -ms-border-radius: 3px;
      -khtml-border-radius: 3px;
      border-radius: 3px;
      opacity: .75;
      color: #000000;
    }
    
    a:hover.post-edit-link {
      color: rgba(0, 0, 0, 0.6);
    }
  2. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Have you created a Child Theme?

  3. jeroenlaven90
    Member
    Posted 2 years ago #

    I'm a noobie when it goes to themes and editing theme so I just installed it and wanted to change the colours a bit. Don't even know what a cild theme is?

  4. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    A Child Theme a sub-folder consisting of modified files.

    Better explained here
    http://codex.wordpress.org/Child_Themes

  5. jeroenlaven90
    Member
    Posted 2 years ago #

    Just googled it. No I'm editing in the style.css of the parent theme. Is that why it's not functioning? Or am I just adding a color: rgba(0, 0, 0, 0.95); in the wrong place?

  6. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    Unfortunately,
    Forum users aren't allowed to advise editing of parent theme stylesheets.
    Until you use either a Child theme or a Custom Style plugin, we can't help you.

  7. Gitominoti
    Member
    Posted 2 years ago #

    It should work regardless. A child theme is helpful because when you upgrade your theme, your changes won't be reversed

  8. jeroenlaven90
    Member
    Posted 2 years ago #

    A Child Theme a sub-folder consisting of files that you want to modify.

    Better explained here
    http://codex.wordpress.org/Child_Themes

    ----
    Unfortunately,
    Forum users aren't allowed to advise editing of parent theme stylesheets.
    Until you use either a Child theme or a Custom Style plugin, we can't help you.

    Thx, I will use a child css. When I bought the Anthem theme it was prvided with it so I just uploaded it. But I still don't know how to edit the colors of the Main Navigation and keep the colours of the links in the post the way they are.

  9. jeroenlaven90
    Member
    Posted 2 years ago #

    It should work regardless. A child theme is helpful because when you upgrade your theme, your changes won't be reversed

    I understand, so I will use a child theme because the provider of Anthem theme updates it frequently so a child theme is indeed much better.

    But where do I change the colour of the man nav in my style.css in provided in my first post?

  10. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    To change the colour of the navigation, add in the Child Theme;

    header a {
     color: #000;
    }

    Change #000 to the actual hexadecimal value of your colour.

  11. jeroenlaven90
    Member
    Posted 2 years ago #

    Thx It worked out and have installed the child theme. So with future updates the colours won't change!

Topic Closed

This topic has been closed to new replies.

About this Topic