Support » Theme: Isola » How to edit the toggle button

  • 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)
  • Forget one:
    I can´t get rid of the turquoise link color.
    Any advice?

    Moderator Kathryn Presner

    (@zoonini)

    Automattic Happiness Engineer

    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: http://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;
    }
    Moderator Kathryn Presner

    (@zoonini)

    Automattic Happiness Engineer

    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;
    }

    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

    Moderator Kathryn Presner

    (@zoonini)

    Automattic Happiness Engineer

    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.