• Resolved Tuberkel

    (@tuberkel)


    Hi there and thanks to the authors for this fine theme.
    I′m working on my new website.
    I like the idea to “hide” the navigation inside the toggle menu on the left side. It′s clear and elegant but some of my test visitors don′t get it. The last thing they are trying to click is the toggle button in the header.
    How can I customize it? For example put a label on it′s side?
    And by the way: in which line of the stylesheet is the light grey color of the header and the toggle menu defined?

    Thank you in advance

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Tuberkel

    (@tuberkel)

    Forget one:
    I can′t get rid of the turquoise link color.
    Any advice?

    How can I customize it? For example put a label on it′s side?

    You could definitely experiment with some custom CSS, for example:

    .toggle:before {
    	content: "Menu";
    	color: #777777;
    }

    More about the content property: https://css-tricks.com/css-content/

    in which line of the stylesheet is the light grey color of the header and the toggle menu defined?

    By using a browser inspector, you’ll see that the menu toggle icon has the class toggle and the site title has the class site-title in an h1 tag.

    You’ll find the toggle colours defined starting at line 1048:

    .toggle .menu-toggle-image {
      cursor: pointer;
      fill: #777777;
      width: 24px;
      height: 24px;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    .toggle:hover, .toggle:focus, .toggle:active {
      background-color: transparent;
      box-shadow: none;
    }
    .toggle:hover .menu-toggle-image, .toggle:focus .menu-toggle-image, .toggle:active .menu-toggle-image {
      fill: #333333;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }

    The site title colour is defined starting at line 983:

    .site-title a {
      color: #777777;
      text-decoration: none;
    }

    I can′t get rid of the turquoise link color.

    This should do the trick for changing the link colour within the body of posts and pages:

    .entry-content a {
      color: #xxxxxx;
    }
    Thread Starter Tuberkel

    (@tuberkel)

    Thank you very much for your detailled instructions, Kathryn.
    It will help me as a CSS-doofus to better understand the theme.
    For now I′m happy with the toggle button label. Your snippet works fine as long the header image option is unticked.

    Keep up the good work.

    Tom

    My pleasure Tom – good luck with your site!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to edit the toggle button’ is closed to new replies.