Change color

  • I would like change the color.
    In the menu where there are 4 buttons,toggle, (search, menu,…), I need change the color, the icon and the action. For example, when you do click go to google.es or Facebook.

    And, after that, change the color and icon to the right line and hexa.

    I hope that all of this could be possible.
    Thank you so much

Viewing 1 replies (of 1 total)
  • Moderator Kathryn Presner

    (@zoonini)

    You can modify the colour and icon for each toggle button by targeting the appopriate element with custom CSS*.

    Here’s an example that would replace the left icon with Facebook and turn it purple: https://cloudup.com/cdd4r57OYPB

    .toggles #menu-toggle::before {
    border-right-color: #bb00bb;
    content: "\f203";
}

.toggles #menu-toggle {
  background-color: #bb00bb;
}

.toggles #menu-toggle::after {
    border-left-color: #bb00bb;
}

    You can use a browser inspector or view the page source to find which elements to target for the other toggles.

    You’ll find all the Genericon codes you can use (for other icons) in this file:

    hexa/genericons/genericons.css

    *Don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

    I need change […] the action. For example, when you do click go to google.es or Facebook.

    This part would be a much more advanced change, since that’s really not at all what these toggles were designed to do – they are designed to open a panel at the top of the page, not link to an external site. If you want to make that change, you’d need to set up a child theme and substantially modify header.php to suit your needs.

Viewing 1 replies (of 1 total)
  • The topic ‘Change color’ is closed to new replies.