{"id":91,"date":"2019-03-12T14:36:38","date_gmt":"2019-03-12T14:36:38","guid":{"rendered":"http:\/\/localhost\/wordpress\/lore-demo\/?post_type=lsvr_kba&p=91"},"modified":"2019-03-12T14:36:38","modified_gmt":"2019-03-12T14:36:38","slug":"colors","status":"publish","type":"lsvr_kba","link":"https:\/\/help.letterhub.com\/index.php\/knowledge-base\/colors\/","title":{"rendered":"Colors"},"content":{"rendered":"\n\t\t\t\t\n

Theme colors can be managed under Appearance \/ Customize \/ Colors<\/em>. You can either choose from predefined color schemes, pick your custom colors or create your own color scheme. The difference between Custom Colors<\/em> and Custom Scheme<\/em> is that the latter is much more involved and requires some coding. On the other hand, it gives you more freedom and it is the recommended way for customizing theme’s colors<\/strong>.<\/p>\n\n\n\n

Since the Predefined Scheme<\/em> and Custom Colors<\/em> options should be pretty much self-explanatory, let’s describe the process of creating your own custom color scheme<\/strong>.<\/p>\n\n\n\n

1.) Open http:\/\/<\/em>yoursite.<\/em><\/strong>com\/wp-content\/themes\/lore\/assets\/css\/skins\/default.scss<\/em> file. It should open directly in your browser, but some browsers may download it on your disk instead.
If you are not able to access the file on your own installation, simply unpack the lore.zip<\/em> installation file (please see the Theme Installation<\/a> chapter to learn how to obtain it) and you will find the default.scss<\/em> file under assets \/ css \/ skins<\/em> folder.<\/p>\n\n\n\n

2.) Copy all the code from that file to any text editor. If your browser downloaded your file, open that file in the text editor. You can use for example Notepad++<\/a> for Windows or Brackets<\/a> for Mac, but any basic text editor (for example Windows Notepad) should do.<\/p>\n\n\n\n

3.) Make your changes. Basically you just need to change color variables at the top of the file. The most important one is $accent1<\/em> variable on line 28. By default, it look like this: <\/p>\n\n\n\n

$accent1: #74aa7b; \/\/ primary accent color<\/pre>\n\n\n\n
There are many online tools where you can generate a hex code for your color, for example colorpicker.com<\/a>. Just change #xxxxxx to the hex code of your custom color (don’t forget that it has to start with the # sign). Feel free to change values of other color variables in the file as well.<\/p>\n\n\n\n
4.) Once you’ve made your changes, copy the whole code and paste it to the SASS column on sassmeister.com<\/a> (or any other online SASS to CSS convertor). Please note that any typo in your syntax may lead to an error<\/strong>.<\/p>\n\n\n\n
5.) Copy the generated code from the CSS column.<\/p>\n\n\n\n
6.) Make sure the child theme is active under Appearance \/ Themes<\/em>.<\/p>\n\n\n\n
7.) Go to Appearance \/ Editor<\/em>, set Select theme to edit<\/em>: to Lore Child<\/em> and paste your generated CSS after the “\/* Add your custom css after this comment *\/” comment. <\/p>\n\n\n\n
\"\"<\/a>
1. Make sure Lore Child theme is selected
2. Select the stylesheet file
3. Put your CSS here and save your changes<\/figcaption><\/figure>\n\n\n\n
8.) Next, repeat all the steps but now with the default editor color scheme file<\/strong> – http:\/\/<\/em>yoursite.com<\/em><\/strong>\/wp-content\/themes\/lore\/assets\/css\/skins\/default.editor.scss<\/em>. Again, if you are not able to access it on your installation, unzip the lore.zip<\/em> file and you will find it under assets \/ css \/ skins<\/em> folder.<\/p>\n\n\n\n
9.) There is one difference<\/strong> though, the final generated editor CSS code have to be pasted into editor-style.css<\/em> file instead (which is also accessible under Appearance \/ Editor<\/em>).<\/p>\n\n\n\n
10.) Last step: go to Appearance \/ Customizer \/ Colors<\/em>, switch Set Colors By<\/strong><\/em> option to Custom Scheme<\/em><\/strong> and save.<\/p>\n\t\t","protected":false},"excerpt":{"rendered":"
Theme colors can be managed under Appearance \/ Customize \/ Colors. You can either choose from predefined color schemes, pick your custom colors or create your own color scheme. The difference between Custom Colors and Custom Scheme is that the latter is much more involved and requires some coding. On the other hand, it gives […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":[],"lsvr_kba_cat":[12],"lsvr_kba_tag":[],"_links":{"self":[{"href":"https:\/\/help.letterhub.com\/index.php\/wp-json\/wp\/v2\/lsvr_kba\/91"}],"collection":[{"href":"https:\/\/help.letterhub.com\/index.php\/wp-json\/wp\/v2\/lsvr_kba"}],"about":[{"href":"https:\/\/help.letterhub.com\/index.php\/wp-json\/wp\/v2\/types\/lsvr_kba"}],"author":[{"embeddable":true,"href":"https:\/\/help.letterhub.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.letterhub.com\/index.php\/wp-json\/wp\/v2\/comments?post=91"}],"version-history":[{"count":0,"href":"https:\/\/help.letterhub.com\/index.php\/wp-json\/wp\/v2\/lsvr_kba\/91\/revisions"}],"wp:attachment":[{"href":"https:\/\/help.letterhub.com\/index.php\/wp-json\/wp\/v2\/media?parent=91"}],"wp:term":[{"taxonomy":"lsvr_kba_cat","embeddable":true,"href":"https:\/\/help.letterhub.com\/index.php\/wp-json\/wp\/v2\/lsvr_kba_cat?post=91"},{"taxonomy":"lsvr_kba_tag","embeddable":true,"href":"https:\/\/help.letterhub.com\/index.php\/wp-json\/wp\/v2\/lsvr_kba_tag?post=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}