Customize Layered Nav

This topic contains 14 replies, has 2 voices, and was last updated by Customize Layered Nav 1 jillapollo 5 years, 10 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #9592
    Customize Layered Nav 2
    jillapollo
    Member

    I’m using the Layered Nav in a sidebar which are filtering 4 attributes. I would like to put a border around them to visually group them together and maybe some additional text to explain utilizing the features. I’ve tried identifying an element and using CSS to style but it styled each attribute instead of them as a group.

    Can you help me do this?

    #9595
    Customize Layered Nav 3
    Jamie Marsland
    Keymaster

    Hi there,

    Could you share a link to the website and I will take a look :)

    Thanks,
    Jamie

    #9606
    Customize Layered Nav 2
    jillapollo
    Member
    #9638
    Customize Layered Nav 2
    jillapollo
    Member

    Hi Jamie,

    Any thoughts on this issue?

    Many thanks,

    Jill

    #9726
    Customize Layered Nav 2
    jillapollo
    Member

    Can you get back to me soon with a reply?

    Thanks.

    #9727
    Customize Layered Nav 3
    Jamie Marsland
    Keymaster

    Hi Jill,

    Could you share the link to the specific page please – I’ve taken a look at your website but can’t see the layered nav ?

    Tks
    jamie

    #9729
    Customize Layered Nav 2
    jillapollo
    Member

    Here’s the link to the shop page. Thanks.

    http://sterngold.indigraphics-design.com/shop/

    #9736
    Customize Layered Nav 3
    Jamie Marsland
    Keymaster

    Hi Jill,

    You could try targeting them as group of widgets ..something like

    #sidebar .widget woocommerce_layered_nav {

    }

    Jamie

    #9744
    Customize Layered Nav 2
    jillapollo
    Member

    Hi Jamie,

    I tried that code but it didn’t do anything. I then looked at the code and tried this (see below). This didn’t target the group of navs but each individual one.

    My workaround (and I’m not sure if this is a wise way to do it) was this:

    #sidebar .widget.woocommerce.widget_layered_nav{
    background: #F9F4D3;
    padding-bottom: 30px;
    margin-bottom: 0px;
    margin-left: 6px;
    }

    #sidebar .widget.woocommerce.widget_layered_nav_filters{
    background: #F9F4D3;
    padding-bottom: 30px;
    margin-bottom: 0px;
    margin-left: 6px;
    }

    By making all their background colors the same, removing the bottom margin and adding some padding, I was able to visually group them together (including the Active Filters when that pops up).

    Is there a way to make the process more intuitive for the user? Meaning, adding a “clear selection” link under each dropdown and adding descriptive text under “active filters” that instructs how to delete selections if needed?

    Thanks.

    #10187
    Customize Layered Nav 2
    jillapollo
    Member

    Any thoughts on this question of customizing a group of layered nav widgets?

    #10188
    Customize Layered Nav 3
    Jamie Marsland
    Keymaster

    Hi Jill,

    You’re solution is probably the easiest without going into custom coding for the sidebar :)

    Jamie

    #10189
    Customize Layered Nav 2
    jillapollo
    Member

    Okay. I’m going to need more customization for that group (to add more instructional text to the user).

    Any recommendations on where to find this instruction for me or should I just begin the Google search?

    #10190
    Customize Layered Nav 3
    Jamie Marsland
    Keymaster

    Hi Jill,

    Take a look at this http://themeover.com/.

    We are going to do a tutorial on Themeover soon – it looks like a really interesting tool to help tweaking :)

    Jamie

    #10191
    Customize Layered Nav 2
    jillapollo
    Member

    Thanks, Jamie. I will look into this now.

    #10253
    Customize Layered Nav 2
    jillapollo
    Member

    I checked out Themeover and tested it’s trail version and although it’s helpful I don’t think it can help for this instance.

    Somewhere online I had seen someone create a new widget area for the sidebar that used a graphic for a background image (in that case the background image was simply a border around the edges and a title in the top center). Once that was created and registered, widgets could be added and they were “incased” in the background image. Don’t know if that makes sense.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.