How to modify the theme using a child theme
-
Hey Syahir,
I love your theme and thank you so much and we will be making a donation for what is excellent work by you!
My concerns are that I have made adjustments to the colors in the style.css (on my LIVE domain http://www.mostabear.INFO), after reading the posts here it’s seems that I should have done that in a child theme to avoid having to make those changes again with every update to the theme, which I have attempted (in my very limited abilities) to do on my TEST site http://www.boganartwork.COM.
t
Although it looks terrific on the LIVE .INFO site with the modifications I made to the parent style.css when I make the child style.css file in the graphene-child folder which is in graphene folder under themes I don’t see the color changes on my TEST site. I did a clean install of the graphene theme on the TEST site and then made the child folder as I thought was directed however it does not seem to be working form me. I’m sure it is something simple and as I am NOT a coder by any stretch of the imagination I could use a little help from you. I am including the code I put in the child theme….there are no backticks since I’m not clear on what that is or how to do/use them (sorry). Any input would be greatly appreciated.
/*
Theme Name: Graphene Child
Theme URI: http: //mostabear.com/
Description: Child theme for the Graphene theme
Author: Christine Grouhel
Author URI: http: //mostabear.com/about/
Template: graphene
Version: 1.0
*/
@import url(“../graphene/style.css”);
/* My modifications go here */
body {
background: url(images/bg_g.png) repeat #000 fixed;
font: 12px Tahoma, Arial;
}
a,
a:visited {
color: #669966;
text-decoration: none;
}
a:hover {
color: #003300;
text-decoration: none;
}
}
#nav .menu li a,
#nav .menu li a:visited {
color: #99ff99;
font: normal 12px arial;
line-height: 24px;
padding: 0 6px;
text-decoration: none;
}
}
#nav #secondary-menu.menu li a,
#nav #secondary-menu.menu li a:visited {
color: #71716F;
font-size: 11px;
text-transform: none;
}
}
h1.page-title {
background: #336633;
background: linear-gradient(left top, #003300, #ccff99);
background: -moz-linear-gradient(left top, #003300, #ccff99);
background: -webkit-gradient(linear, left top, right bottom, from(#003300), to(#ccff99));
-pie-background: linear-gradient(left top, #003300, #ccff99);
color: #e3e3e3;
font-size: 130%;
margin: 0 auto 10px;
padding: 8px 0;
text-align: center;
text-shadow: 0 -1px 0 #333333;
}
}
.featured_slider {
-pie-background: linear-gradient(left top, #003300, #ccff99);
background: #336633;
background: linear-gradient(left top, #003300, #ccff99);
background: -moz-linear-gradient(left top, #003300, #ccff99);
background: -webkit-gradient(linear, left top, right bottom, from(#003300), to(#ccff99));
margin-bottom: 20px;
padding-bottom: 25px;
padding-top: 15px;
position: relative;
width: 100%;
}
}
.full-sized .block-button,
.full-sized .block-button:visited {
border-color: #003300;
position: absolute;
right: 10px;
bottom: 10px;
}
}
.block-button,
.block-button:visited {
background: url(images/bg-block-button.png) left bottom repeat-x #336633;
background: -moz-linear-gradient(#003300, #ccff99);
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#003300), to(#ccff99));
background: linear-gradient(#003300, #ccff99);
border: 1px solid #336633;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
box-shadow: 0 0 5px #555;
color: #fff;
cursor: pointer;
display: block;
float: right;
font: bold 12px arial;
margin: 10px 5px 5px;
padding: 5px 15px 6px;
position: relative;
text-decoration: none;
text-shadow: 0 -1px 1px #444;
}
.block-button:hover {
background: url(images/bg-block-button-hover.png) left bottom repeat-x #336633;
background: -moz-linear-gradient(#003300, #ccff99);
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#003300), to(#ccff99));
background: linear-gradient(#003300, #ccff99);
color: #fff;
cursor: pointer;
text-decoration: none;
}
}
.sticky {
background-color: #bdff8e;
}
}
p code {
background-color: #edffd6;
}
}
/*
#comments li.bypostauthor {
background-color: #003300 !important;
-moz-box-shadow: 0 0 5px #333333;
-webkit-box-shadow: 0 0 5px #333333;
box-shadow: 0 0 5px #333333;
color: #FFFFFF;
}
#comments .children li.bypostauthor {
padding: 10px 10px 0 60px !important;
border:1px solid #003300;
}
#comments ol li.bypostauthor img.avatar {
border-color:#003300;
}
}
.sidebar h3 {
-pie-background: linear-gradient(#003300, #ccff99);
background: #003300;
background: linear-gradient(#003300, #ccff99);
background: -moz-linear-gradient(#003300, #ccff99) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#003300), to(#ccff99));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#003300′, endColorstr=’#ccff99′); /* for IE */
text-shadow: 0 -1px 0 #000000;
}
}
.sidebar h3 a,
.sidebar h3 a:visited,
.sidebar h3 a,
.sidebar h3 a:hover {
color: #336633;
}
Syahir,
Well I did find a couple of problems, I removed the /* My modifications go here */ line and found some blank lines and and an errant } or two. I believe the code is clean now and my pages are rendering as I would expect them too with one small exception….the sidebar widgets on my TEST http://www.boganartwork.com are still blue. I’ll keep plugging away but if you can see my issue in the code above as it relates to color I would appreciate your input. My LIVE http://www.mostabear.info site looks glorious and thanks again for the beautiful theme.
Hi there,
I don’t know anything about code, so this is tough. I’m trying to make the new links that appeared with the update at the bottom of the page. What should I be disabling and what’s the code to do it?
OR, how can I get the proper thumbnail to display in relation to the page it’s linking to?
Example: http://rambunxious.com/?page_id=24
Thanks a million! <3
hello,
I wanted to make test wrap around images in my post so I created a child theme style.css, inside …themes/graphene/graphene-child
then I copied/pasted a code given by wordpress
but I couldn’t find in graphene options how to enable the child theme… pls help. thanks
btw, here’s the style.css I created
/* CSS Document */
/*
Theme Name: Graphene Child
Theme URI: http://weirdseyeview.com/blog/
Description: Child theme for the Graphene theme
Author: WEV
Author URI: http://weirdseyeview.com/blog/author/
Template: graphene
Version: 1.0
*/
@import url(“../graphene/style.css”);
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
/*
Theme Name: Graphene Child
Theme URI: http://weirdseyeview.com/blog/
Description: Child theme for the Graphene theme
Author: WEV
Author URI: http://weirdseyeview.com/blog/author/
Template: graphene
Version: 0.1.2.1
*/
@import url("/wp-content/themes/graphene/style.css");
/* My modification goes from here, example top-bar */
#top-bar {
height:46px;
background: url("/wp-content/uploads/sprite_tb110.png");
}#top-bar
just to show a section. The 6 lines You have looks wrong, no section start & no}
finish.The Child Theme must show up under Themes. It seems You have some section to move into Child Theme from either Custom CSS or core style.css 🙂
Kim
thanks kim
but i don’t know which section to put it under. the code comes from wordpress, it is supposed to make text wrap around images, which is not happening in my blog
Hello
I did what you mentioned but when i go to themes here is what it shows
Broken Themes
The following themes are installed but incomplete. Themes must have a stylesheet and a template.
Name Description
graphene-child Stylesheet is missing.
I have done what you mentioned. Here is my style.css code –
/*
Theme Name: Graphene Child
Theme URI: http: //www.rudragems.com/
Description: Child theme for the Graphene theme
Author: Vaibhav Bathla
Author URI: http: //www.rudragems.com/about/
Template: graphene
Version: 1.0
*/
@import url(“../graphene/style.css”);
/* h2, h2 a, h2 a:visited {
font-family: georgia,verdana,tahoma,arial;
font-size: 20px;
padding-bottom: 4px;
} */
Please tell me what to do now???
I’ve installed my child theme and almost everything is working fine, except the footer. It’s all the way to the left and the copyright link is all screwy. I would also like to find a way to remove the RSS/search bar on the top, if possible.
Website (contains adult material): http://duskinchains.com/
- You must be logged in to reply to this topic.