Editing styles in the Cherry Framework
In this article, we will teach you how to adjust many styling options within the Cherry Framework which is used by many free and premium themes, such as those made by Template Monster. At the end of this tutorial, you will be able to make changes to many options such as fonts and background colors.
Installing the Cherry Framework
Installing the Cherry Framework is quite simple. In fact, it is just as easy as installing any other theme on Wordpress. In the next steps, we will walk you through fully installing the Cherry Framework as well as activating it on your Wordpress site.
First, you will need to download the Cherry Framework. This can be done directly from the official Cherry Framework website. Simply visit the site, and click the download button directly in the middle to begin your download. Be sure to save it to a place you will remember as you will need this file later.
Next, log into your Wordpress dashboard.
After you are logged into your Wordpress dashboard, click on Appearance, then Themes. On the Themes page, click on the Install tab. Here, you will be presented with a search box. As the Cherry Framework is not available on the Wordpress theme directory, you will not be able to search for it. Instead, click on the Upload link right above that search box. From here, click on Browse and locate the Cherry Framework theme file that you previously downloaded and press Install Now.
Wordpress will then handle the full installation of the Cherry Framework. After it is installed, you may activate it or begin installing any child themes that you may be using which require the Cherry Framework.
Changing background styling in the Cherry Framework
To change any background using the Cherry Framework, you may simply click on Cherry Options to the right side of the Wordpress dashboard. After doing so, you will be automatically taken to the General tab. In here, you will see an option for Body Styling. This option will allow you to wither change the background to a specifically designated color, or upload an image that you would like displayed as the background image.
To set the color, simply click the small color box to the left side of this field and choose the color that you want. You may also enter the hexidecimal color code into the first field as well to se it.
If you want to set an image for the background, just click on the Upload button to the right of the Body Styling section. You may then browse for an image to set.
Once you are done making any changes, click on Save Options to the bottom of the page.
Changing header styling in the Cherry Framework
The header styling options are done in the same way that the body styling changes are made. Simply select your header styling using the section labeled Header Styling.
Once those changes are made, be sure to click on Save Options on the bottom of the page.
Changing link colors in the Cherry Framework
To change any colors of links, including the color when a user hovers over them, you may click on Cherry Options to the left side navigation bar in the Wordpress dashboard, then click on the General Tab. From here, you will see two options labeled as Link color and Link color hover. Both of these options change exactly what they are labeled as. To pick a color, you may click on the box to the left and use the color picker to find a color that you like for each. If you have the hexidecimal color that you want, you may enter it into the text field there as well.
Once changed, be sure to click on Save Options once done to make sure that your changes take effect.
Changing font options in the Cherry Framework
Just as background content and links can be changed, all text on your site can easily be changed on the fly quite easily when using the Cherry Framework for your theme. Under the Body Text section, you will see various options such as Font Size, Linehight, Font Face, Font Style, Character Sets, and Color. All of these options allow you to make any changes to your theme for any normal paragraph content that is displayed.
You will see many other options such as H1, H2, H3, etc. as well. These are used to make changes to any headings that you may have defined such as an article title or a particular section of a page.
If you are unfamiliar with these various options under each font, we will go over each of these options:
- Font Size: Defines the exact size of the font displayed.
- Lineheight: Defines how close one line of a paragraph is to the next. The bigger the number, the further away each line will be from the one above and below it.
- Font Face: Defines what font to use for the text.
- Font Style: What style of the particular font will be used.
- Character Sets: Defines what characters are able to be disoplayed within the paragraph.
- Color:Of course, defines what color the text will be.
Where do I go from here?
My best recommendation is to have fun and play around with various styling options. Sometimes the little changes can make a huge difference. Don't be afraid to get your hands dirty and play with different styles to get the optimal look. You may be pleasantly suprised.
We value your feedback!
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
new! - Enter your name and email address above and we will post your feedback in the comments on this page!
2014-04-28 4:44 pm
Currently we are unaware of any way to add additional font support the the Cherry Framework.
2014-07-24 3:27 pm
Are you using the WordPress Cherry Framework as discussed in this guide? You should be able to navigate to Cherry Options > Cherry Options in your WordPress dashboard and then look at the Header styling section.
If you clicked on Upload and then selected an image for your header, directly below the image once you've selected it there will be a drop-down for Repeat All. You can click on that and change it to No Repeat so that your header image doesn't get repeated.
Please let us know if that works for you, or if you were possibly talking about another theme or framework.
2014-08-07 8:39 am
How can i increase the size of the logo image?
2014-08-07 9:36 am
Are you looking to change the logo image specifically through the Cherry framework or overall? In either case, if no setting exists for it, you would need to edit the source code for that area. You may also want to check the css files that govern that area as the settings may also be stored there. Once you find the size code you can make any changes you like.
2014-08-07 9:56 am
Thanks for getting back to me scott.
I have sifted through the source code but can't find where to change the dimensions.
Its on this site and its on a template iv installed : http://www.herefordcanoes.co.uk/
2014-09-01 5:11 pm
Hi, where in the code do I need to go to change the button colors and background colors from the dropdown menus from yellow? There is no setting in the Cherry Options that I'm able to find. If it's in the source code and CSS, where should I find to change it?
2014-09-02 2:11 pm
To determine any styling that has been applied to a particular element, using Firefox, right-click on the element and click on Inspect Element. Within your browser, you will then see any styling that is applied to the selected element.