Changing Primary Colour through Customizer in Child Theme

Hi, I’m not able to change the primary colour through Customize in my Sydney theme.

I am using a child theme and have cleared cache, hard refreshed, copied customizer.php and customizer.js into my child theme directory. All of these don’t work to solve the problem.

The primary colour change option works fine in the parent theme.

Any way I can address this issue?

I changed the colours one by one and it seems to work for now.

Hope there can be a simpler solution for the child theme overriding the parent theme :slight_smile: especially for the “primary colour” change in Customize to work for child theme too.

/CHANGE OF PRIMARY COLOUR ON WEBPAGE ONE BY ONE, BECAUSE PRIMARY COLOUR OPTION IN CUSTOMIZE TAB OF CHILD THEME NOT WORKING/
/--------------------------------------------------------------
Social
--------------------------------------------------------------
/
.widget-area .widget_fp_social a,
.social-menu-widget a,
.social-menu-widget a:hover {
color: #1ac3f3;
}

/* navigation ————————— */
#mainnav ul li a:hover {
color: #1ac3f3;
}

/--------------------------------------------------------------
Panels
--------------------------------------------------------------
/
.panel-grid-cell .widget-title:after {
background-color: #1ac3f3;
}

/* Contact widget
-------------------------------------------------------------- */

.sydney_contact_info_widget span {
color: #1ac3f3;
}

/* Team
-------------------------------------------------------------- */
.archive .team-social li a {
color: #1ac3f3;
border: 1px solid #1ac3f3;
}

/* Elements
-------------------------------------------------------------- */
a {
color: #1ac3f3;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: #1ac3f3;
}

.text-color { color: #1ac3f3;}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #1ac3f3;
	border: 1px solid #1ac3f3;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background-color: transparent;
	color: #1ac3f3;

}

textarea:focus,
input[type=“text”]:focus,
input[type=“password”]:focus,
input[type=“datetime”]:focus,
input[type=“datetime-local”]:focus,
input[type=“date”]:focus,
input[type=“month”]:focus,
input[type=“time”]:focus,
input[type=“week”]:focus,
input[type=“number”]:focus,
input[type=“email”]:focus,
input[type=“url”]:focus,
input[type=“search”]:focus,
input[type=“tel”]:focus,
input[type=“color”]:focus {
border: 1px solid #1ac3f3;
}
#mainnav > ul > li > a.active,
#mainnav > ul > li > a:hover {
color: #1ac3f3;
}
#mainnav ul li ul:after {
background-color: #1ac3f3;
transition: all 0.8s ease;
-webkit-transition: all 8s ease;
}
#mainnav .sub-menu li:hover > a {
background-color: #1ac3f3;
}
.error-wrap #search-submit:hover {
background-color: #1ac3f3;
border-color: #1ac3f3;
}
.text-slider .maintitle:after {
background-color: #1ac3f3;
}
.content-area .hentry:after {
background-color: #1ac3f3;
}
.hentry .meta-post a:hover {
color: #1ac3f3;
}
.hentry blockquote {
border-left: 3px solid #1ac3f3;
}
.blog-pagination ul li {
border: 1px solid #1ac3f3;
}
.blog-pagination ul li.active,
.blog-pagination ul li:hover a {
background-color: #1ac3f3;
}
.sidebar .widget:before {
background-color: #1ac3f3;
}
.widget-tags .tag-list a:hover {
border: 1px solid #1ac3f3;
}
.comment .comment-detail {
border: 1px solid #1ac3f3;
}
.bottom .socials li:hover a,
.go-top {
background-color: #1ac3f3;
}
.go-top:hover {
color: #1ac3f3;
}
.switcher-container .switcher-icon a:focus {
color: #1ac3f3;
}
.owl-theme .owl-controls .owl-page span{
border: 2px solid #1ac3f3;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
background-color: #1ac3f3;
}
.roll-icon-box .icon {
border: 1px solid #1ac3f3;
}
.roll-icon-box .icon i,
.roll-icon-box .content h3 a:hover {
color: #1ac3f3;
}
.roll-icon-box.white .icon {
background-color: #1ac3f3;
}
.roll-icon-box.white .content h3 a {
color: #1ac3f3;
}
.roll-icon-list .icon {
border: 1px solid #1ac3f3;
}
.roll-icon-list .icon i,
.roll-icon-list .content h3 a:hover {
color: #1ac3f3;
}
.roll-button {
background-color: #1ac3f3;
border: 1px solid #1ac3f3;
}
.roll-button:hover {
color: #d65050;
}
.roll-button.border {
color: #d65050;
border: 1px solid #1ac3f3;
}
.roll-button.border:hover {
background-color: #1ac3f3;
}
.roll-button.light:hover {
border: 1px solid #1ac3f3;
background-color: #1ac3f3;
}
.project-filter li a.active,
.project-filter li a:hover {
background-color: #1ac3f3;
}
.roll-testimonials .name {
font-family: “Raleway”, sans-serif;
font-size: 18px;
font-weight: 500;
color: #1ac3f3;
}
.roll-project .project-item .project-pop {
background-color: #1ac3f3;
}
.roll-socials li a {
border: 1px solid #1ac3f3;
}
.roll-socials li a:hover {
background-color: #1ac3f3;
border: 1px solid #1ac3f3;
}
.roll-infomation li.address:before,
.roll-infomation li.phone:before,
.roll-infomation li.email:before {
color: #1ac3f3;
}
.roll-progress .progress-animate {
background-color: #1ac3f3;
}
.roll-team .team-item .team-pop .team-social li:hover a {
color: #1ac3f3;
}
.roll-team .team-item .team-pop {
background-color: #1ac3f3;
}
.roll-team .team-content .name {
color: #1ac3f3;
}

/PRIMARY COLOUR CHANGE ENDS HERE/

Hello @yj-grace,

It’s great that it works now, and thank you for sharing a solution!

Have a nice day :slight_smile:

Kind Regards, Roman.

Hi,

If adding the customizer.js and .php to child theme haven’t worked, then adding the Custom CSS to Child Theme’s style.css is a good way to override the parent theme’s styles.

I’m glad it’s resolved. If you need help with anything else, please open a new topic.

Best Regards,
Csaba

I’m having problems with my sites slider images…
they’re not appearing anymore after installing the Sydney child theme!
please help…
Here’s a link to the web
http://www.thewebville.gq/

Hello @cleverboi,

Please create a new topic for your question in order to make it easier to help you.

Kind Regards, Roman.