How to modify the theme using a child theme

khairul-syahir.com Forum » Graphene Wordpress theme » Support

How to modify the theme using a child theme

(107 posts) (38 voices)

Started 1 year ago by Syahir Hakim
Latest reply from duskinchains
This topic is sticky
This topic is closed
This topic is not a support question

12…8 Next »

Syahir Hakim
Developer
Child theme allows you to modify the theme without actually modifying the theme's core codes, so it makes sure that you can safely update the theme whenever there's a new update without losing your modifications.

I strongly recommend that you use child theme to modify the theme instead of modifying the theme's files directly.

It's quite easy to do. Here's how:
1. Create a graphene-child folder in wp-content/themes/
2. Create a new style.css file inside the graphene-child folder
3. Copy and paste the following code into the new style.css
  
  /* Theme Name: Graphene Child Theme URI: http://example.com/ Description: Child theme for the Graphene theme Author: Your name here Author URI: http://example.com/about/ Template: graphene Version: 1.0 */ @import url("../graphene/style.css"); /* Your modification goes here */
4. You will only need to modify the values of the properties for the elements that you want to modify. There's no need to copy and paste the entire style.
5. Go to your WordPress Appearance > Themes admin page and activate the child theme.
You can learn more about using child theme at the Wordpress codex page.

Find out how you can support the Graphene theme.
New to the forum? Make sure you read the forum rules.
Like Graphene? Check out Graphene Mobile. Now with 7-day money back guarantee!
Posted 1 year ago #
jkeis
Member

Thanks for posting this.

So I followed these directions, accurately too I believe, but can't seem to REM out the RSS button on top. I basically copied your RSS code in the original style.css to this child one, and put them between /* and */. The RSS button still shows...

Thanks.

Jason

Posted 1 year ago #
jkeis
Member

I also tried the following to change the background color to purple but to no avail

#content.one_column{
background:#362942;
}

Posted 1 year ago #
jkeis
Member

ok n/m the last post with the color change, that worked. But the REMming doesn't seem to work the way I thought it would... perhaps I need to REM out the original stylesheet?

Posted 1 year ago #
Syahir Hakim
Developer
So I followed these directions, accurately too I believe, but can't seem to REM out the RSS button on top. I basically copied your RSS code in the original style.css to this child one, and put them between /* and */. The RSS button still shows...

What you did, essentially, is nothing. When you commented what you copied, you are basically making the codes invisible to the browser, so the codes from the original CSS is still used. CSS's cascading property allows you to override the styling, not disable them.

Do this instead:
```
#rss a {
   display:none;
}
```
Find out how you can support the Graphene theme.
New to the forum? Make sure you read the forum rules.
Like Graphene? Check out Graphene Mobile. Now with 7-day money back guarantee!
Posted 1 year ago #
jkeis
Member

Oh ok, thanks, that helps. This example concerns removing the entire object, but how about in those circumstances when say one just wants a particular line to be disregarded inside of an object? The following is how I would do it in the main style.css without a child. How would this be done with a child theme?

.post-meta p.post-author{
font:normal 11px tahoma;
float:right;
display:block;
line-height:18px;
color:#dfedff;
/*position:relative;*/

Posted 1 year ago #
Syahir Hakim
Developer

In that case you have to find a value to reset that CSS property. position:static, maybe?

Find out how you can support the Graphene theme.
New to the forum? Make sure you read the forum rules.
Like Graphene? Check out Graphene Mobile. Now with 7-day money back guarantee!

Posted 1 year ago #
BenGladden
Member

When I activate my Graphene-Child theme, some of my colors are wrong. The gray-to-black fade is now just solid black in the footer and the RSS/Search bar above the header and the menu bar is a dull light gray. Also, some of the interior gray between main and sidebar is missing. I copied the style.css file ONLY to graphene-child directory and changed only the header as you have instructed.

Posted 1 year ago #
Syahir Hakim
Developer

Hi BenGladden,

Do not copy the entire style.css file from the Graphene theme's folder into the child theme. Create a new style.css file instead, and only add CSS codes for the elements that you want to change.

The main style.css contains reference to background images which do not exist in the child theme folder. Of course, you can copy the entire images folder as well, but this is unnecessary.

The purpose of child theme is to make modifications easier and preserve the changes when there's an update. Copying the entire style.css file into the child theme defeats both of those purposes.

Find out how you can support the Graphene theme.
New to the forum? Make sure you read the forum rules.
Like Graphene? Check out Graphene Mobile. Now with 7-day money back guarantee!

Posted 1 year ago #
BenGladden
Member

Thanks for your quick response to my dumb question! Would it be too much for me to ask another? Will you please provide the code necessary to include in my child style.css file that will remove "home" from the menu bar and remove the page title from the top of each of my static pages? Sorry, I don't know code and your assistance would be most appreciated!

Thanks
Ben

Posted 1 year ago #
Syahir Hakim
Developer

Can't remove the Home link using CSS as of the current version of the theme. Consider using Custom Menu to define your own menu instead of using the default one. Also, in the next version, the default hardcoded Home link will no longer be displayed if a static front page is used.

...remove the page title from the top of each of my static pages?

Which page title do you want to remove? The want on the browser top bar or the page title on the page itself?

Find out how you can support the Graphene theme.
New to the forum? Make sure you read the forum rules.
Like Graphene? Check out Graphene Mobile. Now with 7-day money back guarantee!

Posted 1 year ago #
BenGladden
Member

I DO use a static front page. It sounds like the next version will remove the "home" tab from the top menu bar for me. In the meantime, I will try your suggestion.

I want to remove the page title on the page itself. I like the way the page title on the menu bar is highlighted. I want to keep that! I don't need both, and the on page title gets in the way of my content.

Posted 1 year ago #
Syahir Hakim
Developer
Hurm..this is unusual, but if you would still like to do it, add the following code into your child theme's style.css:
```
div.type-page div.entry h2{display:none;}
```
Find out how you can support the Graphene theme.
New to the forum? Make sure you read the forum rules.
Like Graphene? Check out Graphene Mobile. Now with 7-day money back guarantee!
Posted 1 year ago #
BenGladden
Member

Sorry but, it is not working for me. My style.css looks like this:

/*
Theme Name: Graphene Child
Theme URI: http: //example.com/
Description: Child theme for the Graphene theme
Author: Your name here
Author URI: http: //example.com/about/
Template: graphene
Version: 0.1.0
*/
@import url("../graphene/style.css");
/*
div.type-page div.entry h2{display:none;}
*/

Posted 1 year ago #
Syahir Hakim
Developer

Why did you comment out the code? Those /* and */ shouldn't be there after the @import line

Find out how you can support the Graphene theme.
New to the forum? Make sure you read the forum rules.
Like Graphene? Check out Graphene Mobile. Now with 7-day money back guarantee!

Posted 1 year ago #

RSS feed for this topic

12…8 Next »

Topic Closed

This topic has been closed to new replies.