Better looking toggle buttons

  • Resolved Pravin Singh

    (@thevoyager1)


    4 years, 3 months ago

    I am trying to make the toggle buttons look a bit more professional. Mainly I want the buttons to:

    • Align right, like most other websites
    • Have different, more modern icons
    • Have a color other than gray (matching my theme)

    Any help is appreciated.

Viewing 1 replies (of 1 total)
  • Thread Starter Pravin Singh

    (@thevoyager1)

    Solved my own issue, with minimal change, using css. For anyone interested, below is the css that you can paste in Appearance –> Customize –> Additional CSS.

    .gridlist-toggle {
		float: right;
}
.gridlist-toggle .dashicons:before, .gridlist-toggle .dashicons {
    font-size: 1.2em;
    height: 1.2em;
    width: 1.2em;
}
.gridlist-toggle a.active {
    color: #f0f0f0;
    background-color: rgba(32, 130, 199, 0.8);
}
.dashicons-grid-view:before {
    content: "\f180";
}
.dashicons-exerpt-view:before {
    content: "\f214";
}

    The first entry makes it align right, second one makes the icons a bit bigger, third one sets the color of the grid/list icons (color) and of the active button (background-color, which has red, green, blue, and transparency values). The last two entries change the icons to better looking ones. Here is how it looks.

Viewing 1 replies (of 1 total)
  • The topic ‘Better looking toggle buttons’ is closed to new replies.