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
11 years ago · Last reply by Andrew Misplon 11 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 11 years, 3 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 11 years, 3 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 11 years, 3 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 11 years, 3 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 11 years, 3 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 11 years, 3 months ago

    I’m set for now. Thanks!

  7. Andrew Misplon Staff 11 years, 3 months ago

    Super!

    All the best.

  8. kdm-site 11 years, 1 month 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 11 years, 1 month 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 11 years, 1 month 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