EPIC - Responsive Multi-Purpose Theme

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.