{"id":48,"date":"2018-06-22T16:29:06","date_gmt":"2018-06-22T16:29:06","guid":{"rendered":"https:\/\/documentation.px-lab.com\/rscard-html\/?p=48"},"modified":"2020-07-31T09:34:20","modified_gmt":"2020-07-31T09:34:20","slug":"theme-colors","status":"publish","type":"post","link":"https:\/\/documentation.px-lab.com\/rscard-html\/2018\/06\/22\/theme-colors\/","title":{"rendered":"Theme Colors"},"content":{"rendered":"

Our template goes with an ability to change template color. We provide 24 predefined colors.<\/p>\n<\/p>\n

Change Theme Color<\/h4>\n

To change theme color using existig color add appropriate class (theme-color-33d685) on the <html> tag and link to appropriate external style sheet ( green.css ).<\/p>\n

\n
<html lang=\"en\" class=\"theme-color-33d685<\/strong>\">\n   <head>\n      ...\n      <link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\">\n      <link rel=\"stylesheet\" type=\"text\/css\" href=\"colors\/green.css<\/strong>\">\n   <\/head>\n   ...\n<\/html><\/pre>\n<\/div>\n
\n
Theme colors table<\/h4>\n<\/div>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Color<\/strong><\/td>\nHEX format<\/strong><\/td>\nCSS File<\/strong><\/td>\nColor Class<\/strong><\/td>\n<\/tr>\n
Amber<\/td>\n#fec107<\/td>\namber.css<\/td>\ntheme-color-fec107<\/td>\n<\/tr>\n
Blue<\/td>\n#1a77d4<\/td>\nblue.css<\/td>\ntheme-color-1a77d4<\/td>\n<\/tr>\n
Coral<\/td>\n#e8676b<\/td>\ncoral.css<\/td>\ntheme-color-e8676b<\/td>\n<\/tr>\n
Cyan<\/td>\n#07aaf5<\/td>\ncyan.css<\/td>\ntheme-color-07aaf5<\/td>\n<\/tr>\n
Green<\/td>\n#07cb79<\/td>\ngreen.css<\/td>\ntheme-color-07cb79<\/td>\n<\/tr>\n
Indigo<\/td>\n#5d6cc1<\/td>\nindigo.css<\/td>\ntheme-color-5d6cc1<\/td>\n<\/tr>\n
Lime<\/td>\n#8dc24c<\/td>\nlime.css<\/td>\ntheme-color-8dc24c<\/td>\n<\/tr>\n
Orange<\/td>\n#ff9801<\/td>\norange.css<\/td>\ntheme-color-ff9801<\/td>\n<\/tr>\n
Pale Coral<\/td>\n#ffcfd3<\/td>\npale-coral.css<\/td>\ntheme-color-ffcfd3<\/td>\n<\/tr>\n
Pale Cyan<\/td>\n#83d5fb<\/td>\npale-cyan.css<\/td>\ntheme-color-83d5fb<\/td>\n<\/tr>\n
Pale Green<\/td>\n#a7d9a8<\/td>\npale-green.css<\/td>\ntheme-color-a7d9a8<\/td>\n<\/tr>\n
Pale Pink<\/td>\n#fbbdd4<\/td>\npale-pink.css<\/td>\ntheme-color-fbbdd4<\/td>\n<\/tr>\n
Pale Purple<\/td>\n#c7ccea<\/td>\npale-purple.css<\/td>\ntheme-color-c7ccea<\/td>\n<\/tr>\n
Pale Red<\/td>\n#d1a3a6<\/td>\npale-red.css<\/td>\ntheme-color-d1a3a6<\/td>\n<\/tr>\n
Pale Teal<\/td>\n#b4e1dc<\/td>\npale-teal.css<\/td>\ntheme-color-b4e1dc<\/td>\n<\/tr>\n
Pale Violet<\/td>\n#e2bfe7<\/td>\npale-violet.css<\/td>\ntheme-color-e2bfe7<\/td>\n<\/tr>\n
Pink<\/td>\n#ec407a<\/td>\npink.css<\/td>\ntheme-color-ec407a<\/td>\n<\/tr>\n
Purple<\/td>\n#673bb7<\/td>\npurple.css<\/td>\ntheme-color-673bb7<\/td>\n<\/tr>\n
Red<\/td>\n#e83b35<\/td>\nred.css<\/td>\ntheme-color-e83b35<\/td>\n<\/tr>\n
Royal Blue<\/td>\n#3f51b5<\/td>\nroyal-blue.css<\/td>\ntheme-color-3f51b5<\/td>\n<\/tr>\n
Teal<\/td>\n#27a79a<\/td>\nteal.css<\/td>\ntheme-color-27a79a<\/td>\n<\/tr>\n
Turquoise<\/td>\n#56c8d2<\/td>\nturquoise.css<\/td>\ntheme-color-56c8d2<\/td>\n<\/tr>\n
Violet<\/td>\n#8e45ae<\/td>\nviolet.css<\/td>\ntheme-color-8e45ae<\/td>\n<\/tr>\n
Yellow<\/td>\n#ffde03<\/td>\nyellow.css<\/td>\ntheme-color-ffde03<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\n
<\/div>\n
Use Custom Color<\/h4>\n<\/div>\n
If you want to use your custom theme color, then do following steps:<\/div>\n
    \n
  1. Choose your color in HEX format (for example #98002b)<\/li>\n
  2. Create new css file in colors folder ( for example cherry.css )<\/li>\n
  3. Copy following css in you created file\n<\/p>\n
    .theme-color-[custom-color] a,\n.theme-color-[custom-color] blockquote:before,\n.theme-color-[custom-color] .contact-map .contact-info a:hover,\n.theme-color-[custom-color] .interests-list i,\n.theme-color-[custom-color] .input-field.used label,\n.theme-color-[custom-color] .logo span,\n.theme-color-[custom-color] #map .map-icon,\n.theme-color-[custom-color] .nav-wrap .btn-mobile-nav,\n.theme-color-[custom-color] .page-404 h2 span,\n.theme-color-[custom-color] .post-box .post-title a:hover,\n.theme-color-[custom-color] .post-single .post-title a:hover,\n.theme-color-[custom-color] .post-comments .section-title,\n.theme-color-[custom-color] .ref-box .person-speech:before,\n.theme-color-[custom-color] .timeline-box .date,\n.theme-color-[custom-color] .widget-title,\n.theme-color-[custom-color] .widget_meta ul li a:hover,\n.theme-color-[custom-color] .widget_archive ul li a:hover,\n.theme-color-[custom-color] .widget_nav_menu ul li a:hover,\n.theme-color-[custom-color] .widget_categories ul li a:hover,\n.theme-color-[custom-color] .widget_recent_entries ul li a:hover,\n.theme-color-[custom-color] .widget_recent_comments ul li a:hover,\n.theme-color-[custom-color] .widget_search .search-form:before,\n.theme-color-[custom-color] .widget-popuplar-posts .post-title a:hover,\n.theme-color-[custom-color] .widget-recent-posts .post-title a:hover {\n      color: #[custom-color];\n}\n\n.theme-color-[custom-color] ins,\n.theme-color-[custom-color] mark,\n.theme-color-[custom-color] .btn-primary,\n.theme-color-[custom-color] .btn-primary-outer,\n.theme-color-[custom-color] .btn-sidebar-close,\n.theme-color-[custom-color] .calendar-busy .calendar-body td .current-day,\n.theme-color-[custom-color] .calendar-busy .calendar-today .date,\n.theme-color-[custom-color] .filter .active:after,\n.theme-color-[custom-color] .filter-bar .filter-bar-line,\n.theme-color-[custom-color] .input-field .line:before,\n.theme-color-[custom-color] .input-field .line:after,\n.theme-color-[custom-color] .mobile-nav,\n.theme-color-[custom-color] .nav > ul > li > a > span,\n.theme-color-[custom-color] .post-datetime,\n.theme-color-[custom-color] .profile-social,\n.theme-color-[custom-color] .profile-preword span,\n.theme-color-[custom-color] .progress-bar .bar-fill,\n.theme-color-[custom-color] .progress-bar .bar-line:after,\n.theme-color-[custom-color] .price-box.box-primary .btn,\n.theme-color-[custom-color] .price-box.box-primary .price-box-top,\n.theme-color-[custom-color] .profile-list .button,\n.theme-color-[custom-color] .pagination .page-numbers.current,\n.theme-color-[custom-color] .pagination .page-numbers.current:hover,\n.theme-color-[custom-color] .pagination .page-numbers:active,\n.theme-color-[custom-color] .pagination .page-numbers.next:active,\n.theme-color-[custom-color] .pagination .page-numbers.prev:active,\n.theme-color-[custom-color] .timeline-bar,\n.theme-color-[custom-color] .timeline-box .dot,\n.theme-color-[custom-color] .timeline-box-compact .date span,\n.theme-color-[custom-color] .widget_tag_cloud a:hover {\n       background-color: #[custom-color];\n}\n\n.theme-color-[custom-color] .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current,\n.theme-color-[custom-color] .mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {\n       background: #[custom-color];\n}\n\n.theme-color-[custom-color] .timeline-box-inner,\n.theme-color-[custom-color] .price-box.box-primary .btn,\n.theme-color-[custom-color] .widget_search .search-form,\n.theme-color-[custom-color] .widget_tag_cloud a:hover {\n       border-color: #[custom-color]; }\n\n.theme-color-[custom-color] .page-404 h2 span:before,\n.theme-color-[custom-color] .profile-preword span:before,\n.theme-color-[custom-color] .timeline-box-compact .date span:before {\n       border-left-color: #[custom-color];\n}\n\n.theme-color-[custom-color] .price-box.box-primary .price-box-top:before {\n       border-top-color: #[custom-color];\n}<\/pre>\n<\/li>\n
  4. Replace all [custom-color]-s with your choosed color without hex simbol ( i.e. 98002b )<\/li>\n
  5. Add color class to <html> tag : <html class=”theme-color-98002b”><\/li>\n
  6. Link to created external style sheet : <link rel=”stylesheet” type=”text\/css” href=”colors\/cherry.css”><\/li>\n<\/ol>\n
    Change Skin Color<\/h4>\n
    Theme has dark and light skins. To use light skin just add “theme-skin-light” class to the tag, for dark version add “theme-skin-dark”.<\/p>\n
    <html class=\"theme-skin-light<\/strong>\">...<\/html>\n\n<html class=\"theme-skin-dark<\/strong>\">...<\/html><\/pre>\n
    So if you want to use the light skin with color scheme then use in the body these clases:<\/p>\n
    <html class=\"theme-color-33d685 theme-skin-light<\/strong>\"><\/pre>\n","protected":false},"excerpt":{"rendered":"
    Our template goes with an ability to change template color. We provide 24 predefined colors. Change Theme Color To change theme color using existig color add appropriate class (theme-color-33d685) on the <html> tag and link to appropriate external style sheet ( green.css ). <html lang=”en” class=”theme-color-33d685″> <head> … <link rel=”stylesheet” type=”text\/css” href=”style.css”> <link rel=”stylesheet” type=”text\/css” […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/posts\/48"}],"collection":[{"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":17,"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/posts\/48\/revisions"}],"predecessor-version":[{"id":132,"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/posts\/48\/revisions\/132"}],"wp:attachment":[{"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/media?parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/categories?post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/tags?post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}