Link colors in upfront

Please refer to the attached Image. I need to set the global colors for links to be unique to a region of content. For instance as you can see in the picture I change the color for links in the global settings to a light color for contrast in a dark bg but not all regions are dark. I would like to set them up so that each region has a color schema for headers and links and such. How can I achieve that? Templates?
I need a set and forget format for the default page, the default blog post list page and the single post page so that contributors do not have a need to fool with it and I don't have to go back in a change it whenever someone updates the site.

Thanks for all the support you provide here.

Bradley

  • Sajid

    Hello Bradley,
    Hope you are doing good today :slight_smile:

    When you set the link colors globally then those will apply every where regardless of color contrast.

    However, what you can do is target links colors by region class.

    For example, if the class of your region is upfront-region-container-header then add the following code in Upfront -> Theme Settings -> Global Theme CSS.

    .upfront-region-container-header a{
    color: red;
    }

    This is just the example, so you have to find the proper classes of links and other elements to style accordingly using the browser developer tools (see screenshot).

    Again, there is no default setting for this to detect the contrast of bg and the above is a workaround.

    Once you have this created then it will be applied every where on existing regions. But in case, your users create new regions then you would have to set rules for that new region too.

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid

  • Bradley

    hmmmm. I can find the selector etc. Not a problem there. I just new to the builder and it is not allowing me to add any css anywhere. I cannot enter text in the css editor and what are those buttons on the right supposed to do insert an element or selector? They also don't function for me. I know righty what I want to edit but it won't let me. I also want to edit once and have it show up theme wide. It would seen that cutomizing one global region and reusing it as needed would be the way to do it. I can't change anything but the globals........

    Brad

  • Sajid

    Hello Bradley,
    Hope you are doing good today :slight_smile:

    Its working fine for me on my own site. I could add the CSS and save it successfully. Please make sure the CSS code is valid otherwise it would not get saved.

    Also, I forgot to mention that, instead of copying the code, what you can do is create different presets for each section. Lets say, you are going to have preset light for darker background, preset dark for lighter backgrounds etc..

    This way, when adding the element in a darker section you are your users just need to select the correct preset and that's it.

    Also, those buttons suppose to add the class of a specific HTML container, link or buttons.. For example, if you click on read more button it should give you following CSS selector.
    .uposts-object li .read_more

    Take care and have a nice day :slight_smile:

    Best Regards,
    Sajid