Child-theme for already customized Travelify

Travelify
1

I’m using the travelify theme and customized it by
> Design > Customizer
Now I want to use this customized theme as a base theme for a Child Theme which I want to use for a Clone of the page in an other language. (There are some changes requiered like header image an more)
But when I make a child theme in the standard way (style.css + functions.php provided by Colorlib), it does not use all the changes done by
> Design > Customizer
but shows the basic travelify design :frowning:
Even when I copy the css code done in the customizer into the child css file, it does not change anything.

Any idea anyone?

Thanx in advance…
Carsten from Berlin

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile:

Is your changes only made in > appearance > Customize? this is only what you want to migrate in the child theme?
what about to manually replicate customizer setting from parent theme to child theme? there is really not big parameters to replicate,
regarding css, can you paste your code here?
also, please provide url of the website

Thanks!
Colorlib Support Team

3

Is your changes only made in > appearance > Customize?

No - I changed more, but most via > Design > Customize, what could be the german equivalent to appearanve > customizer.. See screenshot attached...

if this is only what you want to migrate in the child theme?
what about to manually replicate customizer setting from parent theme to child theme?

Don't know how to do this..

there is really not big parameters to replicate,
regarding css, can you paste your code here?

Here it is (additional CSS): body { border-top: none; }

body.custom-background{
background-image: none;
background-color: #63b3cd;
}

.wrapper {
background: #4f4f4f none repeat scroll 0 0;
-webkit-box-shadow: 2px 3px 4px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 2px 3px 4px 3px rgba(0,0,0,0.75);
box-shadow: 2px 3px 4px 3px rgba(0,0,0,0.50);
}

#footerarea .widget-area {
padding: 14px 0;
}

#site-generator {
border-top: 2px dashed #eaeaea;
color: #999;
padding: 10px 2.5%;
}

div.breadcrumbs {
margin: 10px 0 0 25px;
}
a.current_language {
margin-right: 20px;
}

#footerarea .widget {
box-shadow: none;
background:#4f4f4f;
}

#footerarea .widget-title {
font-size: 15px;
color: #b2b2b2;
}

div.breadcrumbs {
color: #439f55;
}

div.breadcrumbs span > span {
color: #fff;
}

#main-nav a:hover, #main-nav ul li.current-menu-item a, #main-nav ul li.current_page_ancestor a, #main-nav ul li.current-menu-ancestor a, #main-nav ul li.current_page_item a, #main-nav ul li:hover > a, #main-nav li:hover > a, #main-nav ul ul *:hover > a, #main-nav a:focus {
background: #525252 none repeat scroll 0 0;
color: #63b3cd;
}

.widget {
height: 100%;
}

@media only screen and (min-width: 769px) {
#footerarea div.widget-area {
display: flex;
align-items: stretch;
}
}

@media only screen and (max-width: 768px) {
#footerarea div.widget-area {
display: block;
margin-top: 2.5%;
}
#main {
padding-top: 10px;
}
}

#footerarea .widget-wrap {
border-top: 1px solid #63b3cd;
}

#site-generator {
border-top: 1px dashed #63b3cd;
color: #999;
padding: 10px 2.5%;
}

/* ####### MENUE ######*/

/*#main-nav a {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(79, 79, 79, 1) 73%, rgba(79, 79, 79, 1) 79%, rgba(79, 79, 79, 0) 117%, rgba(79, 79, 79, 0) 100%) repeat scroll 0 0;
} */

#main-nav li {
margin-right: 3px;
}
#main-nav {
border: none;
background: none;
box-shadow: 0 0 0 rgba(255, 255, 255, 0.2) inset;
z-index:60;
}

#main-nav a {
background: #57ad68 none repeat scroll 0 0;
}

#main-nav a {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(79, 79, 79, 1) 84%, rgba(79, 79, 79, 0) 85%) repeat scroll 0 0;
}

#main-nav a:hover, #main-nav ul li.current-menu-item a, #main-nav ul li.current_page_ancestor a, #main-nav ul li.current-menu-ancestor a, #main-nav ul li.current_page_item a, #main-nav ul li:hover > a, #main-nav li:hover > a, #main-nav ul ul *:hover > a, #main-nav a:focus {
background: #525252 none repeat scroll 0 0;
line-height: 35px;
}
#main-nav a, #main-nav a:hover, #main-nav a:focus, #main-nav ul li.current-menu-item a, #main-nav ul li.current_page_ancestor a, #main-nav ul li.current-menu-ancestor a, #main-nav ul li.current_page_item a, #main-nav ul li:hover > a {
transition: line-height 0.5s ease 0s, color 0.5s ease 0s;
}

/* ####### MENUE ######*/

/* ####### SLIDER ######*/

.featured-slider, .featured-slider .slider-cycle {
margin-top: -40px;
position: relative;
z-index: 5;
}
figure a {
cursor: default;
}

.featured-text {
display: none;
}
.ngg-slideshow, .slideshow {
max-height: 376px !important;
}

/* ####### SLIDER #####*/

.header-image {
height: auto;
margin-bottom: -35px;
margin-top: -81px;
position: relative;
width: 100%;
z-index: 50;
}

#site-logo {
float: left;
margin-top: -2px;
}

.hgroup-wrap {
padding-bottom: 10px;
padding-top: 15px;
}

.hgroup-wrap {
padding-bottom: 20px;
padding-top: 15px;
}

#site-description {
color: #999;
font: 200 18.5px/20px helvetica,sans-serif;
}
#site-title {
font: 200 24px/42px helvetica,sans-serif;
}
#site-title a {
letter-spacing: 0;
}
.ngg-singlepic {
padding: 0px !important;
}
div.breadcrumbs {
background-color: #555555;
padding: 5px 0 5px 25px;
margin: 0;
display:none;
}
#main-nav a:hover, #main-nav ul li.current-menu-item a, #main-nav ul li.current_page_ancestor a, #main-nav ul li.current-menu-ancestor a, #main-nav ul li.current_page_item a, #main-nav ul li:hover > a, #main-nav li:hover > a, #main-nav ul ul *:hover > a, #main-nav a:focus {
color: #0088cf;
}
#site-logo {
display: none;
}
.header-image {
margin-top: -60px;
margin-bottom:0;
}
.wpcf7-form-control.wpcf7-select {
font-size: 15px;
padding: 5px;
}
a.ngg-fancybox img.ngg-singlepic {
cursor:default;
}
#main-nav a:hover, #main-nav ul li.current-menu-item a, #main-nav ul li.current_page_ancestor a, #main-nav ul li.current-menu-ancestor a, #main-nav ul li.current_page_item a, #main-nav ul li:hover > a, #main-nav li:hover > a, #main-nav ul ul *:hover > a, #main-nav a:focus {
background: #444040 none repeat scroll 0 0;
border: 0 solid rgba(0, 0, 0, 0);
border-radius: 10px 10px 0 0;
line-height: 13px;
}
nav#main-nav {
border-bottom: 3px solid #3a3a3a;
margin-top: 50px;
}
/nav#main-nav ul {
float: right;
margin-right: 116px;
}/

/* ::: Font-size content ::: */

#content ul, #content ol {
font-size: 1.05rem;
}
.hwim-text p {
margin-bottom: 0;
font-style: italic;
}
.wp-caption .wp-caption-text {
padding: 0;
}
.widget {
margin-bottom: 25px;
}
article {
border-radius: 2px;
}
.metaslider .caption {
display: none;
}
.flex-control-paging li a.flex-active {
background: #0088cf !important;
background: rgba(0, 136, 207, 0.9)!important;
cursor: default;
}
.metaslider .flexslider {
margin: 0 0 30px 0 !important;
}
.flex-control-nav {
bottom: -20px !important;}
a.current_language {
margin-left: 20px;
}

also, please provide url of the website

I'm sorry, I can't because it is still ocal (XAMPP)
4

Hello there,

I hope you are doing well today.

In this case you can use a clone plugin to duplicate the theme with its settings, here is one such plugin:

or you can use a child theme editor:

Best Regards,
Support

5

Hi again…
I installed the child-theme-configurator. Good advice!
But I can’t change the header-image in the child theme.
In the Customizer all looks good. The thumbnail shows the right image.
All seems to be perfect.
But when refreshing the page in the Browser there ist still the old header-image from the parent theme… I’m going crazy soon.
The code
do_action( ‘travelify_header’ )
in line 61 in header.php seems to do the job as it “learned” it once upon a time … in the parent theme and I have no idea, where to change something…

6

Hello there,

Were you able to replace the header in the customizer? If so then you may need to clear your browser cache to see the changes.

Best Regards,
Support

7

Good morning, the problem with different header-images for different pages in a multi-site is stil not saved - but has changed :frowning:

After I deleted the header-images in the two sites by > Customizer > Header-Image, deleted all former header-images from the server and uploaded new ones with new file-names, and after that loaded new (different) header-images to both sites by > Customizer > Header-Image, both sites don’t show a header-image at all but only the alt-tags! (But luckyly they now try to load different images for the two sites!!! :-))

I found out, that the scrset is put together wrong. It still uses the old paths…
This is the actual output:

<img src="http://localhost/motoloader/international/wp-content/uploads/sites/3/2018/01/Header_MotoLoader_EN.png" 
     class="header-image" 
     srcset="http://localhost/motoloader/wp-content/uploads/2017/09/cropped-Header_MotoLoader_white_Typo_mobil.png 480w, 
             http://localhost/motoloader/wp-content/uploads/2017/09/Header_MotoLoader_LightBlue_Typo_white_SloganLU.png 1018w" 
     alt="MOTOLOADER – Relaxed arrival" 
     height="140" 
     width="1018">

So the src is correct - and if I change the srcset to the right directories and filenames by Firefox-developer-tools temporarely like this:

<img src="http://localhost/motoloader/international/wp-content/uploads/sites/3/2018/01/Header_MotoLoader_EN.png" class="header-image" srcset="http://localhost/motoloader/wp-content/uploads/sites/3/2018/01/cropped-Header_MotoLoader_white_Typo_mobil.png 480w, 
             http://localhost/motoloader/international/wp-content/uploads/sites/3/2018/01/Header_MotoLoader_EN.png 1018w" alt="MOTOLOADER – Relaxed arrival" height="140" width="1018">

… it works.
So now the question is, where is the srcset generated? Is it in a file or is it somewhere in the database?
Would be great to get an advice where to do changes!

Greetings from B.
Carsten

8

Hello there,

You would have to go to Appearance > Editor > Functions. php and add a new filter to force WordPress to use your custom srcset

Best Regards,
Support

9

Well, I found the file, where the srcset is defined:
…\wp-content\themes\travelify\library\structure\header-extensions.php
and edited the path to the right images (for the main page (+theme).
But now again main site and second language site load the same header-image.
So I thought, it would be good to copy the header-extensions.php to
…\wp-content\themes\travelify-child02\library\structure
and there edit the srcset as needed.
But the second page uses allways the files from the main theme.
I tried to copy more files to the child theme, which might tell wp not to use the functions.php, where the path to the header-extensions.php is defined - but all without success.

I just get mad about this.
I want my analog camera back …

Best regards
Carsten G.

10

Hello there,

The child theme will take the header from the parent theme so there needs to be new code added to force the theme to use another image. If you are not comfortable writing code then I would recommend to enlist the aid of our developer to create the code, you can contact him here:
https://colorlib.com/out/envatostudio

Best Regards,
Support

11

Solved!
replaced the absolut paths in the header-extensions.php by placeholders.
As there are two files in the scrset, I had to do a trick…
I renamed the second one to the same name as the first one and added the file-extension to the name.
like filename.png and filename.png.png
So I could use the same placeholder twice - but by adding the .png after the placeholder it calls the right image. Surely not a clean solution in the eye of a coder. But I don’t speak PHP and it works. :slight_smile:
Gose like this than:
srcset="<?php echo esc_url( $header_image ); ?>.png 480w, <?php echo esc_url( $header_image ); ?> 1018w"

But thanx again for your attempts to help! 5 Stars for the colorlib support team.

12

Hello there,

I am glad that you found a solution for this issue.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support