This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

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

Open 10 replies premiumthemetheme-vantage
kdm-site
10 years ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

10
  1. Andrew Misplon Staff 10 years, 10 months ago

    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. Andrew Misplon Staff 10 years, 10 months ago

    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. kdm-site 10 years, 10 months ago

    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. kdm-site 10 years, 10 months ago

    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. Andrew Misplon Staff 10 years, 10 months ago

    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. kdm-site 10 years, 10 months ago

    I’m set for now. Thanks!

  7. Andrew Misplon Staff 10 years, 10 months ago

    Super!

    All the best.

  8. kdm-site 10 years, 8 months ago

    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. kdm-site 10 years, 8 months ago

    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. Andrew Misplon Staff 10 years, 8 months ago

    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.

Have a different question or issue?

Start New Thread