Custom Color
Go to
\epic-jellythemes\css\colors\
Create a new file name: custom-color.css and copy style from black.css file to new file.
Then change all the hex color code to your color. The new file will look like below:
#owl-main .owl-controls .owl-page.active span, #owl-main .owl-controls.clickable .owl-page:hover span, .carousel-wrapper.with_pagination.round_inner .owl-theme .owl-controls .owl-page.active span { background:your-hex-color-code-here; border-color:your-hex-color-code-here; } a.close.top {background: url(../../images/close/blacks-close-project.png) no-repeat;} .ip-header .ip-loader svg path.ip-loader-circle {stroke: your-hex-color-code-here;} .project-info h4:after {background: your-hex-color-code-here;} .project-info .btn2 {color: your-hex-color-code-here;} .section .text strong, a {color:your-hex-color-code-here;} .section .title {border-color:your-hex-color-code-here;} #header .menu-item.current a, #header .menu-item a:hover {border-bottom-color:your-hex-color-code-here;} #header .menu-item.current .sub-menu a {border-bottom-color: transparent;} #header .menu-item.current .sub-menu a:hover {border-bottom-color: your-hex-color-code-here;} .options-head {background: your-hex-color-code-here; } .carousel-wrapper.with_buttons .owl-controls .owl-buttons div,.carousel-wrapper.with_buttons .owl-controls .owl-buttons div.owl-next {background-color: your-hex-color-code-here; } .carousel-wrapper.full .generic-carousel .owl-item .ulitem li .icon {background: your-hex-color-code-here; } .carousel-wrapper.with_pagination .owl-controls .owl-page.active span, .carousel-wrapper.with_pagination .owl-controls.clickable .owl-page:hover span {background: your-hex-color-code-here; } .team-wrapper .team-member .hover .name {color: your-hex-color-code-here;} .team-wrapper .team-member .hover .hover-border, .post .tags a {border-color:your-hex-color-code-here;} .folio-filter li a.selected, .folio-filter li a:hover { background:your-hex-color-code-here; border-color:your-hex-color-code-here; } .portfolio-dark-overlay {background:your-hex-color-code-here;} .section .button:hover, .section .button.playstop, .contact-form .submit, .section .button.inverse, .post .date {border-color:your-hex-color-code-here;} #footer .thanks, #testimonials, #our-story{background-color: your-hex-color-code-here; } .slide-sep, .section .ball, .comment-reply-link, #respond input[type=submit] {background: your-hex-color-code-here;}
Then go to:
\epic-jellythemes\inc\theme.options.php
Find color or go to line 820, you will see the code below:
array( 'id'=>'color', 'type' => 'select', 'title' => __('Theme color scheme', 'jellythemes'), 'subtitle' => __('Select your themes alternative color scheme.', 'jellythemes'), 'options' => array('blue'=>'Blue', 'black'=>'Black', 'green'=>'Green', 'red'=>'Red', 'yellow'=>'Yellow', 'purple'=>'Purple', 'turquoise'=>'Turquoise', 'orange'=>'Orange', ), 'default' => 'red', ),
Add your new custom color in here, it will similar new code below:
array( 'id'=>'color', 'type' => 'select', 'title' => __('Theme color scheme', 'jellythemes'), 'subtitle' => __('Select your themes alternative color scheme.', 'jellythemes'), 'options' => array('blue'=>'Blue', 'black'=>'Black', 'green'=>'Green', 'red'=>'Red', 'yellow'=>'Yellow', 'purple'=>'Purple', 'turquoise'=>'Turquoise', 'orange'=>'Orange', 'custom-color'=>'Custom Color', ), 'default' => 'red', ),
Now, you can change to new color in theme option, please make sure you save it because it will lose when you update our theme.