X template to a different domain, override all the Colors of the Site Links per page in CONTENT CSS

[Flexcin]

Hi,
I moved a page over with x template to a different domain. This domain is going to have different brand pages. The issue is the customize Site Links changes all the links and elements on the whole website to the same color. Is there a way to override all the Colors of the Site Links per page in CONTENT CSS?

Here is the link to the page I am moving https://flexicus.com/flexicus-1-month-supply

Below is the way I want this page to look:

Here is the link to the page that I move to new domain https://store.flexcin.com/flexicus-1-month-supply/

I want all of the red to be the orange color #ff6600
Below is the way the page looks on shop domain all of the links and elements default to the red color:

Thanks for the help

[mldarshana]

Hi there,

Thanks for writing in! Try adding the following CSS rules into your Theme Options > Global CSS area.

.entry-thumb::before, .x-pagination span.current, .flex-direction-nav a, .flex-control-nav a:hover, .flex-control-nav a.flex-active, .mejs-time-current, .x-dropcap, .x-skill-bar .bar, .x-pricing-column.featured h2, .h-comments-title small, .x-entry-share .x-share:hover, .x-highlight, .x-recent-posts .x-recent-posts-img::after {
    background-color: orange;
}
a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .x-breadcrumb-wrap a:hover, .widget ul li a:hover, .widget ol li a:hover, .widget.widget_text ul li a, .widget.widget_text ol li a, .widget_nav_menu .current-menu-item > a, .x-accordion-heading .x-accordion-toggle:hover, .x-comment-author a:hover, .x-comment-time:hover, .x-recent-posts a:hover .h-recent-posts {
    color: orange !important;
}
.x-btn, .button, [type="submit"] {
    background-color: orange !important;
    color: white !important;
}

.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
    box-shadow: inset 0 3px 0 0 orange;
}

Hope that helps.

[Flexcin]

Hi,
Thanks, that works for the most part just one small issue when hovering over the social share buttons the icon does not show.

Thank you for the help.

[Prasant]

Hello @Flexcin,

You can fix the social icon hover problem by adding following CSS:

.x-entry-share .x-share:hover {color: #fff !important;}

Thanks.

[Flexcin]

Worked perfect, thanks again.

[friech]

You’re more than welcome, glad we could help.

Cheers!