SiteOrigin Features – how to change the link color?

Hi @wccwts ??

Nicely done, sounds like you have a solid grasp on how to use the Attributes fields for widgets and rows. In this instance there might be more specific rules overriding yours. Try this in Custom CSS, it’s what I’ve included in the pending update and should work for you too:

/* SiteOrigin Features Widget */

.panel-grid-cell .sow-features-list .sow-features-feature p.sow-more-text a {
  border: none;
  font-weight: 700;
}
.panel-grid-cell .sow-features-list .sow-features-feature p.sow-more-text a:hover {
  border: none;
  color: #0896fe;
  text-decoration: none;
}

Let me know how that goes.

Hi @misplon!

I just added your code on custom CSS and I don’t see any changes.
My widgets formatting is still following this code I previously added on the custom CSS:

#main a { color: #0072bb; text-decoration: none !important; }
#main a:hover { color: #d81d22; text-decoration: none !important; }

So I tried removing the code snippet above to see if it’s overriding your suggested code, but it’s still not rendering mytest at all
.

A quick check, did you change my default blue color values to yours? If you did and still no love, then if possible, please send a link to your site and I’ll take a look. Thanks ??

Hi @misplon!

I did not change your color. So in theory the hover color should be that blue color, but it’s transitioning to red from the #main… code.

Here’s the site:
https://westcoastcarwheelandtireshow.com/

I’m trying to change the link color of the first siteorigins widget features (there’s another one at the bottom that does not need changes).

Ahh my bad, I was looking only at the more link. Please try for us:

/* SiteOrigin Features Widget */

.panel-grid-cell .sow-features-list .sow-features-feature .textwidget * a {
	color: blue !important;
  	text-decoration: none;
}

.panel-grid-cell .sow-features-list .sow-features-feature .textwidget * a:hover {
	color: red !important;
  	text-decoration: none;
}

Hi @misplon!

It’s getting there ??
Ok, so your most recent code above is affecting all siteorigin features widget. Is there any way I can format a specific siteorigin features widget? I have 2 widgets on the same page, one sitting on a white background and the other on a dark gray background. I am using a text-shadow formatting to make the icons stand out more. One link color would look good on the white background, but not on the gray.

sample: https://westcoastcarwheelandtireshow.com/test-2/

Ideally, I’d like the widget on the white background to have a black or red a link color, and the bottom widget to have white or orange link color. Is it possible to format it this way?

Perfect time to add in a custom widget css class.

Edit the Features widget in question, click the Attributes tab top right, enter in a widget class name of your choice in the first field. For this example I’m using:

custom-features

For anyone else reading, note how there is no period in front of our class name when we insert it into the Attributes class field. We only need the period when targeting the class name in Custom CSS.

Then let’s head over to our Custom CSS plugin and target our new class name:

/* SiteOrigin Features Widget */

.panel-grid-cell .custom-features .sow-features-list .sow-features-feature .textwidget * a {
	color: blue;
  	text-decoration: none;
}

.panel-grid-cell .custom-features .sow-features-list .sow-features-feature .textwidget * a:hover {
	color: red;
  	text-decoration: none;
}

If you inspect the HTML you’ll see custom-features is inside of panel-grid-cell and sow-features-list is inside of custom-features. Hence the ordering. Because we’ve been so specific with our selectors we can now remove the !important hack.

(If you ever want to know more about specificity, check out Chris on the topic here:
https://css-tricks.com/specifics-on-css-specificity/. The summary is that a rule that’s more specific than another will take priority).

Let me know how this goes ??

Huzzahhh it works!!! Thank you so much, @misplon! Really appreciate your time helping me out ??

(forgot to click the resolved box on last post)

Awesome ?? Really glad to hear that did the trick. Let me know if anything else comes up.

All the best.