Border colors around widgets, post content and input fields for Sparkling theme

Sparkling
1

I’m curious how to change the border color with sparkling? It’s the thin, light grey border around the posts. Many thanks!

2

You can change border by adding this code to Theme Options - Other - Custom CSS

.post-inner-content {
  border: 1px solid #F00;
}

.well {
    border: 1px solid #F00;
}

The first part of code will change border for post content and the second one for widgets. If you don’t want to change border for widgets then just remove that part of code.

This example will change color to red but you can use any color code you want.

Let me know if this helps

3

Thanks so much!

It worked, for the most part.

All the borders on the homepage are changed, but on a single post page (Roundup: Valentine’s Day recipes – Fresh Family Food) all the borders changed except the top one (I’m going for a blackish color, rather than the light gray).

Also, is there a way to change the widget box borders to square instead of rounded?

4

Also, this is unrelated but thought I’d ask ----- how do I change the color of the text in my widget custom menus? I have two.

5

One more thing (now I’m officially being a pain). How do I change the border color on the search box?

6

Add this code to remove rounded corners for widget area:

.well {
    border-radius: 0;
}

And use previous code in combination with this one to change color for the top border as well. theme had a separate border on the top because there supposed to be featured images that you are not using.

.post-inner-content:first-child {
    border-color: #111;
}

Let me know if this helps.

7

Those fixes worked perfectly! Thank you :slight_smile:

Two more questions (the ones I asked above):

How do I change the color of the text in my widget custom menus? I have two.

How do I change the border color on the search box?

8
  1. Widget text can be changed like this:
#secondary .widget a { /* This code will change link color in sidebar widget area */
  color: #f00;
  font-size: 14px;
}

If you don’t need to change font size then just remove that line and use color code instead.

  1. Here are other things. I left a comments for CSS codes to understand what they do. You can also add them inside Theme Options - Other - Custom CSS field and it will work just fine with these comments and it will also work as reference for you.
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { /* This code will change search and other input form border color */
  border: 1px solid #111;
}

.form-control:focus { /* This code will change search and other input form border color when clicked */
  border-color: #999;
}
9

That’s awesome. Is there an easy way to also change the search box text color?

10

Something like this should do the trick for text inside search box:

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea {
  color: #f00 !important;
}
11

Thank you SO SO SO SO MUCH! :slight_smile: