Hi there,
I have originally heavily modified my Vantage Parent Theme (before I realized I should have created a child theme first). Now I need to update my Vantage Premium Parent Theme from 2.3.3 to 2.4.4, so now I’m creating a child theme. (I’m quite new to this so please excuse my lack of knowledge here! :))
Here’s the website: basoneguitars.com/shop
I’ve used the Vantage child theme started file from SiteOrigin, and added the custom css from parent to the child style.css file. Before activating it, I went to live preview and noticed that two things differ from the Parent theme: The background color is no longer black (only the first page is black, everything else is back to white default) and the top menu doesn’t collapse (there should be some sub-menus when you hover over it).
Is there a way to fix this or do I have to change everything manually after activating? I’m just afraid there will be some more errors once I activate the child theme and update the parent. Another question: do I have to add any other files to my child theme folder, other than the style.css and functions.php?
Here’s the child style.css: (to follow)
Hi there,
I have originally heavily modified my Vantage Parent Theme (before I realized I should have created a child theme first). Now I need to update my Vantage Premium Parent Theme from 2.3.3 to 2.4.4, so now I’m creating a child theme. (I’m quite new to this so please excuse my lack of knowledge here! :))
Here’s the website: basoneguitars.com/shop
I’ve used the Vantage child theme started file from SiteOrigin, and added the custom css from parent to the child style.css file. Before activating it, I went to live preview and noticed that two things differ from the Parent theme: The background color is no longer black (only the first page is black, everything else is back to white default) and the top menu doesn’t collapse (there should be some sub-menus when you hover over it).
Is there a way to fix this or do I have to change everything manually after activating? I’m just afraid there will be some more errors once I activate the child theme and update the parent. Another question: do I have to add any other files to my child theme folder, other than the style.css and functions.php?
Here’s the child style.css:
/*
Theme Name: Vantage Child
Author: SiteOrigin
Author URI: https://siteorigin.com/
Theme URI: https://siteorigin.com/theme/vantage
Description: Vantage Child Theme
Version: 1.0.0
Template: vantage
Text Domain: vantage
Domain Path: /languages/
*/
/* =Theme customization starts here
-------------------------------------------------------------- */html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
html {
font-size: 62.5%;
/* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
overflow-y: scroll;
/* Keeps page centred in all browsers regardless of content height */
-webkit-text-size-adjust: 100%;
/* Prevents iOS text size adjust after orientation change, without disabling user zoom */
-ms-text-size-adjust: 100%;
/* http://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}
body {
background: #fff;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
ol,
ul {
list-style: none;
}
table {
/* tables still need 'cellspacing="0"' in the markup */
border-collapse: separate;
border-spacing: 0;
}
caption,
th,
td {
font-weight: normal;
text-align: left;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
blockquote,
q {
quotes: "" "";
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
/* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
outline: 0;
}
a img {
border: 0;
}
/* =Global
----------------------------------------------- */
/* Consistent fonts across all elements */
body,
button,
input,
select,
textarea {
color: #333;
font-family: Arial;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5em;
font-size: 13px;
word-wrap: break-word;
}
/* Links */
a {
color: #248cc8;
}
a:hover,
a:focus,
a:active {
color: #f47e3c;
}
/* Headings and Rulers */
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
/* Text elements */
p {
margin-bottom: 1.5em;
}
ul,
ol {
margin: 0 0 1.5em 3em;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom: 0;
margin-left: 1.5em;
}
dt {
font-weight: bold;
}
dd {
margin: 0 1.5em 1.5em;
}
b,
strong {
font-weight: bold;
}
dfn,
cite,
em,
i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", Courier, monospace;
line-height: 1.6;
margin-bottom: 1.6em;
padding: 1.6em;
overflow: auto;
max-width: 100%;
}
code,
kbd,
tt,
var {
font-family: "Courier New", Courier, mono;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark,
ins {
background: #fff9c0;
text-decoration: none;
}
sup,
sub {
font-size: 75%;
height: 0;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
small {
font-size: 75%;
}
big {
font-size: 125%;
}
figure {
margin: 0;
}
table {
margin: 0 0 1.5em 0;
width: 100%;
}
th {
font-weight: bold;
}
button,
input,
select,
textarea {
/* Corrects font size not being inherited in all browsers */
font-size: 100%;
/* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
margin: 0;
/* Improves appearance and consistency in all browsers */
vertical-align: baseline;
*vertical-align: middle;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
button,
input {
/* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
line-height: normal;
/* Corrects inner spacing displayed oddly in IE6/7 */
*overflow: visible;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
padding: 12px 20px;
border-top: solid 1px #d2d2d2;
border-left: solid 1px #c3c3c3;
border-right: solid 1px #c3c3c3;
border-bottom: solid 1px #9f9f9f;
background: #ffffff;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dfdfdf), color-stop(1, #ffffff));
background: -ms-linear-gradient(bottom, #dfdfdf, #ffffff);
background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #ffffff 100%);
background: -o-linear-gradient(#ffffff, #dfdfdf);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf', GradientType=0);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
font-weight: bold;
color: #646464;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5);
width: auto;
text-decoration: none;
/* Improves usability and consistency of cursor style between image-type 'input' and others */
cursor: pointer;
/* Corrects inability to style clickable 'input' types in iOS */
-webkit-appearance: button;
line-height: 1;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
/* Button hover style */
border-top: solid 1px #dadada;
border-left: solid 1px #cfcfcf;
border-right: solid 1px #cfcfcf;
border-bottom: solid 1px #a8a8a8;
background: #ffffff;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ebebeb), color-stop(1, #ffffff));
background: -ms-linear-gradient(bottom, #ebebeb, #ffffff);
background: -moz-linear-gradient(center bottom, #ebebeb 0%, #ffffff 100%);
background: -o-linear-gradient(#ffffff, #ebebeb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ebebeb', GradientType=0);
}
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
html input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
/* Button click style */
border-top: solid 1px #aaaaaa;
border-left: solid 1px #bbbbbb;
border-right: solid 1px #bbbbbb;
border-bottom: solid 1px #bbbbbb;
-webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}
input[type="checkbox"],
input[type="radio"] {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
/* Addresses excess padding in IE8/9 */
}
input[type="search"] {
/* Addresses appearance set to searchfield in S5, Chrome */
-webkit-appearance: textfield;
/* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input[type="search"]::-webkit-search-decoration {
/* Corrects inner padding displayed oddly in S5, Chrome on OSX */
-webkit-appearance: none;
}
…sorry, there’s LOTS more to my style.css file but it’s just too big to copy-and-paste it here… let me know if you need to see the whole thing in order to shine a light on this issue.
THANK YOU so much in advance!
Hi there, sorry, one more question.. would it be easier to copy all the Custom CSS I’ve done so far on the Parent Theme (Under Appearances in WordPress Editor), activate the child theme (even if it looks wonky at first), update the Vantage Premium Theme and finally paste the Custom CSS code in the Child Theme’s Appearances’ Custom CSS?
Does that make sense? Thanks for your time… :-)
Hi basone
Sorry for the delay. Please, feel free to reach out via email on Private Snippet for support as you’re using one of our premium themes.
Initial question
The Customizer resets after changing from the parent to the child, that might explain some of the issues you’re seeing in preview.
do I have to add any other files to my child theme folder, other than the style.css and functions.php?
Only theme files that have been modified need to be included. So if you haven’t edited any PHP files at a code level then functions.php and style.css are the only files you need in your child theme.
What goes in the child style.css file?
This is the important part. Only CSS rules you’ve edited should go in the child style.css file. If you’re still stuck on this part you can use a program like Diffmerge to compare the original with your edited version to find the edited rules:
https://sourcegear.com/diffmerge/
Assuming you’re still in the same position, please backup your vantage folder before updating the theme. This can be done via FTP or Hosting File Manager. The theme folder is at /wp-content/themes/ and is called vantage. Back that up to your desktop in case you need to go find edits later.
If you email me on Private Snippet and let me know which version of Vantage you’re running I’ll send you the original style.css file so we can compare it with your version and extract changes.