Portfolio Filter Styling

[nobodynozem]

Hi,

I want to style the portfolio-filter. But after hours of tweaking in the css i can’t figure it out.

I want no background color / shadows / borders. Just flat text and on hover only the text-color changes.

Can you tell me which elements i need to style to get this done?

Thanks!

[Kyle – SUPPORT]

Hi

i recommend using firefox and installing the firebug extension, this will allow you to select elements and view the css. You can also make changes to the css and see the changes live. Once it looks how you want it to, you can copy the css and paste it into your custom css.

http://getfirebug.com/

– Kyle

[nobodynozem]

Hi Kyle,

I already tried firebug but nothing changes. In firebug these work:

.filter-wrap ul {
font-size: 13px;
list-style: none outside none;
}

ul.portfolio-filter-tabs li a {
border-color: #fff;
}

.pagination-wrap li a:hover, ul.bar-styling li:not(.selected) > a:hover, ul.bar-styling li > .comments-likes:hover, ul.page-numbers li > a:hover, ul.page-numbers li > span.current {
color: red !important;
background: #fff;
border-color: #fff;
}

.pagination-wrap li a:hover, ul.bar-styling li:not(.selected) > a:hover, ul.bar-styling li > .comments-likes:hover, ul.page-numbers li > a:hover, ul.page-numbers li > span.current {
color: red !important;
background: none repeat scroll 0% 0% #fff;
border-color: #fff;
}

But if i put them in the custom-css under the theme-options nothing changes.

[Kyle – SUPPORT]

You will need to use !important for changes like colors, so that they are not overwritten

– Kyle

[nobodynozem]

.filter-wrap ul {
font-size: 13px;
list-style: none outside none;
}

ul.portfolio-filter-tabs li a {
border-color: #fff !important;
}

.pagination-wrap li a:hover, ul.bar-styling li:not(.selected) > a:hover, ul.bar-styling li > .comments-likes:hover, ul.page-numbers li > a:hover, ul.page-numbers li > span.current {
color: red !important;
background: #fff !important;
border-color: #fff !important;
}

.pagination-wrap li a:hover, ul.bar-styling li:not(.selected) > a:hover, ul.bar-styling li > .comments-likes:hover, ul.page-numbers li > a:hover, ul.page-numbers li > span.current {
color: red !important;
background: #fff !important;
border-color: #fff !important;
}

That didn’t work either. I save the changes ofcourse. So what next?

[Kyle – SUPPORT]

Please could you share your login so I could take a look?

– Kyle

[nobodynozem]

This reply has been marked as private.

[Kyle – SUPPORT]

Please check now 🙂

– Kyle

[nobodynozem]

Thanks! Really appreciate it! Can you tell me what i did wrong?

[Kyle – SUPPORT]

No problem! You had .h5 for e.g. to apply custom css to headings, however their should not be a dot before it.

– Kyle