Child Theme Colors Not Reflecting

Hi Support Team,

Thanks for developing such a nice theme!

Background: I am new to wordpress, I have used the Travelify Child Theme given in the sticky post above on localhost, the purpose of using child theme is:

  1. I am using google fonts and I read that if I make any changes in the parent theme, it will be reset after upgrade thus I used following code in the child theme:
    <link href="https://fonts.googleapis.com/css?family=Average|Dosis" rel="stylesheet">

  2. I am making many changes in the css and I was not sure if using “Additional CSS” was the right option to make that many changes thus I am customizing style.cc of the child theme.

Problem: Many of the changes I made in the style.cc of the child theme reflects on the website, like layout size changes and fonts are appearing correctly but the changes in the colors are not reflecting. If I make the same changes in colors using “Customizing ▸ Travelify Main Options” then the changes reflect. The changes also reflect by using “Additional CSS” but it seems child style.cc is not overriding parent style.cc.

Questions:

  1. What is the solution for the colors problem?
  2. The reasons I mentioned for using child theme are good enough or should I stick to parent theme only?
  3. Changes in “Customizing ▸ Travelify Main Options” and “Additional CSS” stays if the theme upgrades or these are reset?
  4. Where is the css mentioned in “Additional CSS” saved? I tried to look for it in the theme folder but couldn’t find it.

Thanks in Advance!

Hello there,

I hope you are doing well today.

  1. As it stands, it would be best to use the Additional CSS options because the style.css file won’t reflect changes made to it because the style.css and the addition CSS are both stored in different sections of WordPress.

  2. It is always better to use the child theme to house our changes because an update to the theme may reset the changes that you made.

3.These changes would remain the same but there is still the possibility that in a major update they maybe be removed.

4.The CSS information is stored in a database in the wp_options table.

I hope this helps you out.

Best Regards,
Support

Thanks for your prompt response.

That means, I should make all css related modifications in the “Additional CSS” of the child theme, in this way the modifications will reflect and they won’t be disturbed by any future upgrades to the parent theme, plz share if my understanding is correct?

Hello there,

Thanks for getting back to us.

Yes, you are correct however please keep in mind that you can use a backup plugin to backup you theme setup and customizations just in case an issue occurs with a future update.

Here is one such backup plugin:

Best Regards,
Support

Hey there,
Hope you’re doing well today

Did you manage to get this issue resolved?

Just asking so that I may provide some additional support, or close the ticket.

Please let me know.

I look forward to your reply :slight_smile:

Best Regards,
Support

Thanks! Plz proceed with closing this ticket.

Hi Support Team

It seems there is an additional } at line 1225 in the style.css, can you plz have a look. Thanks!

Hello there,

I hope you are doing well today.

I have checked the theme style.css file and there is an extra }, so I will have to notify our development team to remove it and check the file then release a newer version of the theme.

Best Regards,
Support

Thanks!

I also found out that I had to use !important in the below sections of the css, else it was not changing the color, not sure if its a mistake at my end or these colors were wrongly made permanent in the DB:

input[type="reset"],
input[type="button"],
input[type="submit"] {
  display: inline-block;
  border-radius: 2px;
  font-size: 14px;
  white-space: nowrap;
  text-align: center;
  margin: 0;
  line-height: 24px;
  display: inline-block;
  text-decoration: none;
  padding: 4px 12px;
  text-transform: lowercase;
<em><strong>  border: 1px solid #3d2d23 !important;</strong></em>
  cursor: pointer;
  background: #3d2d23;
  color: #fff;
  position: relative;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
}
.entry-meta-bar .readmore {
  float: right;
  font-size: 16px;
  white-space: nowrap;
  text-align: center;
  margin: 0;
  line-height: 20px;
  display: inline-block;
  text-decoration: none;
  padding: 4px 12px;
  text-transform: lowercase;
<em><strong>  border: 1px solid #8e796a !important;</strong></em>
  cursor: pointer;
  background-color: #3d2d23;
  color: #fff;
  position: relative;
  border-radius: 2px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
}

As you mentioned you would be releasing a newer version of the theme, plz consider the following change request:
as the aim of the child theme is easy customization thus plz consider making style.css in the child theme to override all other css in parent theme and DB. At the moment I am trying to maintain 2000+ lines of css in the “Additional CSS” section of the child theme, which is pretty hard to maintain and scrolling through. style.css of the child theme can be opened with any editor for easy modifications and maintenance.

Hello there,

I hope you are doing well today.

Thanks again for sharing this information.

I have already escalated this post to our developers so the would be able to look into this issue also.

Please feel free to notify us of any new issues.

Best Regards,
Support