Black Screen Issue: Please update your theme to ensure WordPress 5.6 compatibility. Dentalia 2.1 and Recycle 2.1 are now available on ThemeForest. 

  Public Ticket #2706617
Styling a link in the Contact heading


  •  3
    vapovix started the conversation

    What's the best practice to style a link in the heading of a SiteOrigin Editor widget?

    i.e. on the demo "Request an Appointment" make the "Request" a link, with a different link color and hover color?

  •  497
    OrionThemes replied


    Generally you can always use the editor view, add a custom HTML class to an element then style this class with CSS.

    Like the example below, which has a made-up class="unique-class-name"


    Then set the color with CSS (Copy it to Theme Options -> Custom CSS):

    .unique-class-name {
        color: red!important;
    } .unique-class-name:hover {
        color: purple!important;

    And you have the result (bottom example is on hover):


    Some of color classes are alredy defined and you don't need to write CSS for them, for example, if you want it to be the theme primary color, you can use the "primary-color" class:


    Kind regards,


  •  3
    vapovix replied

    Worked like a charm!

    But why does the CSS go in the Theme Options and not in the Widget Styles CSS Declarations?

  •  497
    OrionThemes replied

    Basically, this is because the Widget Styles CSS affects the entire widget. If you want to style a specific element inside the widget, you need to use a class.

    Adding the code to Theme Options also allows you to style more widgets at once, so you don't need to add the same CSS over and over again. Just use the same class anywhere you want this style. 

    This is a huge time-saver. If you want to make some adjustments later, you can simply change the TO CSS without the need to edit all widgets separately.

    I hope this explains it.

    Kind regards,