YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar alphabravo14 asked

Change FJORD primary colour in Card & Buttons - not working in preview


I spent over a day trying to find the correct colour to change whilst previewing UI elements. I wanted to change this green to a yellow on hover but cant find it anywhere. Maybe its just a preview UI elements related problem as I have not yet foudn the issue present in the theme I have customised.

So 2 questions:

1) How do I change the hover colour of the primary button or card, it will not let you edit in the theme. Whilst in UI preview view
2) Is it also possible to save a yellow style in a name I choose? Or do we always have to adapt exisiting colour styles.



Great job on Yootheme Pro overall its getting better month on month. Very happy with it.


  • UIkit
  • YOOtheme Pro


2 Answers


Avatar danny Yootheme answered

Hi Alpha,

we've checked the issue and saw it is indeed a bug within the white-green.less file of the Fjord Website Style "White Green". We will fix this with the next update for YOOtheme Pro (which could take some time) but you can easily solve the issue for yourself by opening the following file:


Now replace all the content of the file with this:

// Global  

@global-link-color: #37CC75;  
@global-link-hover-color: #2aa649;  
@global-primary-background: #2ccd6e;  
@global-secondary-background: #30303C;  
@global-warning-background: #FFB16D;  
@global-border-radius: 0;  

// Base  

@base-code-color: #4d5e9a;  
@base-h2-color: #25252e;  

// Button  

@button-primary-box-shadow: none;  
@button-primary-hover-background: #1fbb5f;  
@button-primary-hover-box-shadow: none;  
@button-primary-active-background: #1caa56;  
@button-secondary-box-shadow: none;  
@button-secondary-hover-box-shadow: none;  
@button-danger-box-shadow: none;  
@button-danger-hover-box-shadow: none;  
@internal-button-primary-gradient: ;  
@internal-button-primary-hover-gradient: ;  
@internal-button-default-active-gradient: ;  
@internal-button-primary-active-gradient: ;  
@internal-button-secondary-active-gradient: ;  

// Card  

@card-default-background: #F4F4F6;  
@card-default-box-shadow: none;  
@card-default-hover-box-shadow: none;  
@card-primary-box-shadow: none;  
@card-primary-hover-background: #2db264;  
@card-primary-hover-box-shadow: none;  
@card-secondary-box-shadow: none;  
@card-secondary-hover-box-shadow: none;  
@internal-card-default-gradient: ;  
@internal-card-primary-gradient: ;  
@internal-card-secondary-gradient: ;  
@internal-card-primary-hover-gradient: ;  
@internal-card-secondary-hover-gradient: ;  

// Overlay  

@internal-overlay-primary-gradient: ;  

// Section  

@internal-section-default-overlap-image: "../../../../uikit-themes/master-fjord/images/section-overlap-image-grunge-m-plain.svg";  
@internal-section-muted-overlap-image: "../../../../uikit-themes/master-fjord/images/section-overlap-image-grunge-m-noise.svg";  
@internal-section-overlap-height: 10px;  
@internal-section-primary-overlap-image: "../../../../uikit-themes/master-fjord/images/section-overlap-image-grunge-m-noise.svg";  
@internal-section-secondary-overlap-image: "../../../../uikit-themes/master-fjord/images/section-overlap-image-grunge-m-noise.svg";  

// Subnav  

@subnav-pill-item-active-box-shadow: none;  

// Table  

@table-row-active-background: rgba(44, 205, 110, 0.1);

or you just simple find

box-shadow: ;

and replace it with

box-shadow: none;

thank your very much and best regards,



Avatar melanie.k Yootheme answered


I also tried to change the hover color of the button/ card but it didn't work. I assume that it is a bug. I forwarded the issue to our developer in order to help you as soon as possible.

Best regards,

Know someone who can answer? Share a link to this question via email or twitter.