Support » Plugin: WooCommerce Grid / List toggle » Better looking toggle buttons

  • Resolved Pravin Singh

    (@thevoyager1)


    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.