Project filter button color problems

Hi folks, I’m struggeling with some color issues in the fIlter buttons of the projcts widget.

  1. I added a margin in addition to the padding but I don’t know how to change the margin color (it remains white as you can see on my page)

  2. Once a filter button has been chosen it comes up with color my CSS code does not change (even though I thought I covered all possibilities for button stated in my CSS code.

See here: http://soundpic.tim-o.com

My custom CSS code looks like that:

/* Filterbuttons */
.project-filter li a {
display:block;
padding: 8px;
margin: 8px;
background-color: #dd9933;
color: #000000;
}

/* Not selected Filter */
.project-filter li:active a {
color: #000000;
background-color: #dd9933;
}

/* Selected filter button */
.project-filter li:link a {
color: #00ffff;
background-color: #0000ff;
}

/* Visited filter */
.project-filter li:visited a {
color: #00ffff;
background-color: #0000ff;
}

/* MouseOver Filter */
.project-filter li:hover a {
color: #dd9933;
background-color: #000000;
}

Additionally, when the page is loaded, the “All Projects” butten should be active (or selected) by default, since it’s what the page starts with (showing all projects). But after the page is loaded no button is selected at all. Is there any way to make “All Projects” the starting selection.

You help is very much appreciated
Cheers, Timo

Hi there,

Here is to remove the white color:

.project-filter li {
    background-color: transparent;
}

Use this code instead:

.project-filter li a.active {
    color: #fff;
    background-color: #000;
}

You need a line of javascript code to achieve this.
Here is the javascript code, you can put this code using Custom Javascript plugin:

jQuery('.project-filter li:first-child a').addClass('active')

Regards,
Awan

Hello Awan, everything works great just as expected. Thanks so much for your help!
Excellent support!!
Vheers, Timo

1 Like