Home>Support>Change Font Color — Image Caption Link — in PageBuilder Visual Editor Widget

Change Font Color — Image Caption Link — in PageBuilder Visual Editor Widget

By kdm-site, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

I have a Page Builder Widget – Visual Editor. I have some text and some images with captions. (If you visit page, it’s the navy box with 3 people/images)

I have added the following to Attribute tab (below). My goal is to have all text white, navy background. The main text is great – background great. Problem: My caption is a link and therefore is inheriting the main theme setting for a-link font color. I need it to be white.

Would you please let me know how to code?

Thanks!
________________________________________________________
bgcolor: #22374D
font-color: #ffffff

/* Vantage Caption Text */

.entry-content .wp-caption p.wp-caption-text a {
font-color: #ffffff;
font-size: 13px;

URL: http://www.langleyharper.com/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hi Kdm-site

    If you’re using the CSS Styles field then you can only add properties and values.

    Here is our Custom CSS tutorial: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

    If you inspect what happens when you add CSS Styles you’ll see why you can’t add a full selector (the styles are added inline to the row div concerned).

    The easiest here would be to edit each widget, click Attributes and give each widget a CSS class name, that’s the first field under Attributes. Something like:

    team-text

    You can then go to Appearance > Custom CSS and target that using something like this:

    .team-text {
background: #000000;
}

    and

    .entry-content .team-text .wp-caption p.wp-caption-text {
  color: #ffffff;
}
  2. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Here is a brief overview of how the settings available in row/widget attributes work:

    Thread: How do Page Builder row attributes work – row class, cell class and CSS styles

  3. 9 years, 6 months ago kdm-site

    Thanks for all the great references. I have a much better handle now on the Attributes ‘tab’ of the Pagebuilder widgets.

    Meanwhile, I’d like to change the link color of text within a caption. Can you provide the code for that — I’m hoping to just add it in the CSS Styles box of the widget in question.

    Also – when working on this widget I switched from “Visual” editing to “Text” editing and now I can’t go back to Visual with it stripping out all my added code.

    Thanks.

  4. 9 years, 6 months ago kdm-site

    Specifically, I’m trying to change the color of links in widgets. If I use CSS Style, what is the code?

    I tried this in a widget:
    a:link color: #FFFFFF
    a:visited color: #00FF00

    (For this widget I just removed the caption so it’s just text in a Visual Editor)

    Thanks.

  5. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Glad to hear you’re making progress.

    Caption links might look something like this:

    /* Caption Links */

.wp-caption-text a {
color: #000;
}

.wp-caption-text a:hover {
color: #000;
}

    What else are you looking to change? Thanks.

  6. 9 years, 6 months ago kdm-site

    I’m set for now. Thanks!

  7. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Super!

    All the best.

  8. 9 years, 4 months ago kdm-site

    I’m back on this project again — I still can’t figure out how to get my link text white for the Visual Editor I’m working on.

    I put “lh-link-text” in the Attribute – A CSS name field.

    I put:

    /*Link color change for words on blue background*/

.lh-link-text a {
  color: #FFFFFF;
}

    in the Custom CSS – I’m guessing my syntax is wrong but W3 School isn’t leading me to the answer. Do you know?

    I don’t have a live link to show you but I can add a login for you if you’d like.

    Thanks!

  9. 9 years, 4 months ago kdm-site

    Well, for this exercise I was able to change the color of the link (not a caption this time) to white. (I tried it before I wrote you but it didn’t ‘take’ — after a couple of refreshes it “appeared from the WP Gods”!

    I would still like to know what was wrong with my code if you would. Thanks!

  10. 9 years, 4 months ago Andrew Misplon
    Hi, I Work Here

    Glad you made progress.

    Are you using your browser’s developer tool to inspect the link. That’ll make a big difference. If there is more specific CSS being loaded then your link might be losing the battle. You can increase its specificity to compensate.

    https://css-tricks.com/specifics-on-css-specificity/

    If/when the site is live we could assist in this regard.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More