Home › Forums › WoodMart support forum › Floating filter with icon

Floating filter with icon

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • May 5, 2018 at 7:15 am #56167

    Jakob40004000
    Participant

    Hi, you def. need to make the show filter floating and with a icon like on the Porto theme. Much easier to find for the customers.

    Can this be done with css or how can I get it?

    May 5, 2018 at 8:08 am #56185

    Elise Noromit
    Member

    Hello,

    If you mean filters in the sidebar on the left or on the right, you need to do the following:

    1. Theme Settings > Shop > Set the layout

    2. Appearance > Widget > insert filters in Shop widget area

    If you mean something different, please specify.

    Best Regards

    May 5, 2018 at 12:18 pm #56227

    Jakob40004000
    Participant

    Sorry, totally forgot: It if in mobileview I mean… In desktop view the filters is of course easy to see in the left sidebar.

    Please see pic from porto theme just attached

    Attachments:
    You must be logged in to view attached files.
    May 5, 2018 at 2:10 pm #56249

    Elise Noromit
    Member

    Hello,

    Please add this CSS snippet to the Theme Settings > Custom CSS: 

    @media (max-width: 1024px) {
	div.woodmart-show-sidebar-btn {
			position: fixed;
			top: 30%;
			left: 0;
			z-index: 30;
			height:50px;
			width:50px;
			justify-content: center;
			-webkit-box-shadow: 0 0 3px rgba(0,0,0,.15);
			box-shadow: 0 0 3px rgba(0,0,0,.15);
			background-color:white;
			font-size: 16px;
			font-weight: 400;
	}

	.woodmart-show-sidebar-btn:before {
		content: "\f115";
		font-family: "woodmart-font";
	}

	.woodmart-show-sidebar-btn span {
		display:none!important;
	}
}

    Best Regards

    May 5, 2018 at 5:56 pm #56266

    Jakob40004000
    Participant

    That is so awesome! You should add this to the next theme update with the posibility to change the size, color and icon.

    I guess the “f115” is the icon? Is there somewhere I can see a list so I can change it?

    May 5, 2018 at 6:05 pm #56267

    Jakob40004000
    Participant

    Correction. I see that the code is the icon, but from fontawesome I cannot choose all. I would very much like this: https://fontawesome.com/icons/sliders-h?style=solid Should I upload the icon somewhere?

    May 5, 2018 at 6:15 pm #56268

    Jakob40004000
    Participant

    I see the theme support font awesome 4.7 icons, but why cant I then use “fa-sliders”

    https://fontawesome.com/v4.7.0/icon/sliders/

    May 5, 2018 at 8:02 pm #56278

    Elise Noromit
    Member

    Hello,

    Please find and replace this CSS: 

    .woodmart-show-sidebar-btn:before {
    content: “\f115”;
    font-family: “woodmart-font”;
}

    for this one: 

    .woodmart-show-sidebar-btn:before {
   font-family: “FontAwesome”;
   content: “\f1de”;
}

    Best Regards

    May 5, 2018 at 8:47 pm #56280

    Jakob40004000
    Participant

    THANKS!

    May 6, 2018 at 6:16 am #56300

    Eric Watson
    Participant

    You are welcome!

    June 15, 2018 at 6:21 am #63008

    Jakob40004000
    Participant

    Hallo again,

    Now request have been made a part of the theme (via update), but what do I do now to change the icon to the same https://fontawesome.com/v4.7.0/icon/sliders/ ?

    Also, it would be cool if it didnt show the “show sidebar” until the user scrolles down the page. So it showes the slider icon right away in mobile view. (Like it did before when I used your css)

    June 15, 2018 at 8:22 am #63034

    Elise Noromit
    Member

    Hello,

    What icon do you want to change, please provide the screen?

    Also, it would be cool if it didnt show the “show sidebar” until the user scrolles down the page.

    There is no option to do that.

    Best Regards

    June 15, 2018 at 9:27 am #63046

    Jakob40004000
    Participant

    Nevermind the “Show sidebar” I would just like to change this icon (see pic) to https://fontawesome.com/v4.7.0/icon/sliders/

    Attachments:
    You must be logged in to view attached files.
    June 15, 2018 at 11:59 am #63080

    Elise Noromit
    Member

    Hello,

    Please try this code: 

    .woodmart-sticky-sidebar-opener:after {
    content: "\f1de";
    font-family: fontawesome;
}

    Best Regards

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)