Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › Portfolio Filter Styling
New Landing › How can we help? › Themeforest Theme Support › Dante › Portfolio Filter Styling
- This topic has 9 replies, 2 voices, and was last updated 10 years by Kyle – SUPPORT.
-
Posted in: Dante
-
March 12, 2014 at 10:58 am #56815
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!
March 12, 2014 at 11:14 am #56826Hi
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.
– Kyle
March 12, 2014 at 1:44 pm #56867Hi 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.
March 12, 2014 at 1:55 pm #56876You will need to use !important for changes like colors, so that they are not overwritten
– Kyle
March 12, 2014 at 1:59 pm #56880.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?
March 12, 2014 at 2:00 pm #56881Please could you share your login so I could take a look?
– Kyle
March 12, 2014 at 2:03 pm #56882This reply has been marked as private.March 12, 2014 at 2:57 pm #56905Please check now 🙂
– Kyle
March 12, 2014 at 3:02 pm #56909Thanks! Really appreciate it! Can you tell me what i did wrong?
March 12, 2014 at 3:11 pm #56911No problem! You had .h5 for e.g. to apply custom css to headings, however their should not be a dot before it.
– Kyle
-
Posted in: Dante
You must be logged in and have valid license to reply to this topic.