How to customise Dazzling Popular Post Widget

Dazzling
1

Hi Movin,

Trying to customise Dazzling Popular Post Widget to no avail. Could you help me with the following:

  1. change active tab (i.e. background colour, text colour, border colours)
  2. change non-active tab (i.e. background colour, text colour, border colours)
  3. change border colour of main content box
  4. change background colour of main content box
  5. change link colour of posts
  6. change date colour of posts
2

Hi @4alex,

I hope you are well today and thanks for posting here.

To achieve this try adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS

1) change active tab (i.e. background colour, text colour, border colours)
body .nav-tabs>li.active>a {
  background-color: #EEE;
  border-color: #000;
  color: #1e73be;
}
2) change non-active tab (i.e. background colour, text colour, border colours)
body .nav-tabs>li > a {
  background-color: #EEE;
  border-color: #1FA67A;
  color: #81d742;
}
3) change border colour of main content box
ul#popular-posts {
  border-color: #1FA67A;
}
4) change background colour of main content box
ul#popular-posts {
  background-color: #E8E8E8;
}
5) change link colour of posts
ul#popular-posts a {
  color: #81d742;
}
6) change date colour of posts
ul#popular-posts .content i {
  color: #1FA67A;
}

Please note the color value used in the above code is for display purpose, you can change it to whatever you want to.

You can change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

Best Regards,
Movin

3

Thanks Movin for the above; all the codes seem to work minus the first two. When I implement the code for first two, they are saved with errors (i.e. body .nav-tabs>li>a}. Everytime I try and correct it, it just repeats errors. Any suggestions?

Regards,

4

Hi @4alex,

Sorry for that. It seems first two solutions are not working because of the issue with the custom CSS option as reported below.

You can instead try using the following code for the above two solutions.

body .nav-tabs li.active a {
  background-color: #EEE;
  border-color: #000;
  color: #1e73be;
}

body .nav-tabs li a {
  background-color: #EEE;
  border-color: #1FA67A;
  color: #81d742;
}

Cheers,
Movin

5

Thanks Movin, will do!

6

You are most welcome here :slight_smile: