Topic: css file | Themeco Community

Tagged: x

Author

Posts
April 26, 2016 at 3:27 pm #900950

blazeys
Participant

Hello. I am trying to figure this out and looked at the older posts but couldnt find a solution.

How can i just edit css of child theme? I am not looking to add from Custom > CSS but how to reach it so i can delete lines also. Such as deleting “.x-logobar{border-top: 10px solid red;}” . Where is this code and how can i reach it?

But X – Child Theme: Stylesheet (style.css) only contains the below:

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

Thanks

April 27, 2016 at 1:35 am #901522

blazeys
Participant

Anyone? Newer posts getting replied

April 27, 2016 at 6:21 am #901926

Rupok
Member

Hi there,

Thanks for writing in! You can edit your Child Theme’s CSS from Appearance > Editor

You can also use FTP to edit your file but it needs to download, edit and upload again. So it’s easier to edit from Appearance > Editor.

Additionally, for future reference we kindly ask that our users not bump their threads as stated in our support policy. Since we answer questions from oldest to newest and bumping a thread makes it appear as brand new, this will only serve to lengthen our response time. Replies in the forum can take up to 24 hours during the week, but oftentimes we are able to get to questions much quicker than that. We request that our users wait patiently while we work our way through the forum as we can assure you that all questions will be addressed as soon as possible.

April 27, 2016 at 11:54 am #902579

blazeys
Participant

Thanks for the reply but as i mentioned before it only brings up the following:

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

I am trying to remove the red bar upon the menu by deleting “.x-logobar{border-top: 10px solid red;}”

As css file seems plain empty, how to find that line for removing?

Thanks

April 27, 2016 at 11:50 pm #903511
Friech
Moderator
Hi There,

Sorry for the confusion. Let me clarify this, the css code that you’re looking for is on the parent X|Theme’s style.css file.

But, since editing/deleting any files on the parent theme is not a good practice, that is when the child theme came in.

With the child theme you can modify/overwrite any default styling that is declared on the parent theme.

What you need to do is to re-declare that same rule but different value on the child theme’s style.css file.

e.g.
```
.x-logobar{
	border-top: none;
}
```
Keep in mind that sometimes you might not overwrite a default styling because it is more specific than the rule you declared on the child theme’s style.css file. So what you need to do in this case is to make your selector more specific.

e.g.
```
header .x-logobar{
	border-top: none;
}
```
Please follow this link on how CSS Specificity works.

Hope this shed some lights.

Cheers!
April 28, 2016 at 1:50 pm #904544

blazeys
Participant

Thanks for the reply.

I would like to ask one more thing, when I make css edits from Custom > Edit Global CSS they are taking effect but when i check Editor from Appearance, X – Child Theme: Stylesheet (style.css) seems plain empty still.

Is it the wrong place I am adding my css as it is not writing to my child theme’s css or is it just not showing there?

Thanks.

April 29, 2016 at 12:53 am #905202

Friech
Moderator

Hi There,

The Custom Global CSS and Child theme’s style.css are two different places.

The Custom Global CSS will output directly in the <head> of page (Embedded styles). While the style.css is an external file that will be linked to your page (External styles).

You can read more about Embedded styles and External styles here.

Hope this shed some lights.

Cheers!

April 29, 2016 at 10:36 am #905813

blazeys
Participant

Thanks for the reply and useful link.

But I understand the overwriting idea however below is the codes that i am using for css:

.x-colophon.bottom {
background-color:black;
}
.x-child-theme-active .x-colophon.bottom .x-nav li a {
color:white;
}
x-colophon.top { background-color: grey; }
footer.x-colophon.top { padding: 2% 0; }

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none; !important;
}

When I paste those to cornerstone’s editor, there is no problem but when it is pasted to child theme’s css, they take no effect eventhough last one is declared as important.

Actually, all I want is to keep the changes in a future update to parent theme, if cornerstone can keep them still after an update, it is ok for me but if not, can you help me to work it for child theme’s css.

Thanks.

April 30, 2016 at 2:27 am #906644
Friech
Moderator
Hi There,

Would you mind updating your code to this:
```
footer.x-colophon.bottom {
	background-color:black;
}
footer.x-colophon.bottom .x-nav li a {
	color:white;
}
footer.x-colophon.top {
	background-color: grey;
}
footer.x-colophon.top {
	padding: 2% 0;
}

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none !important;
}
```
If this did not work, please provide us your site URL and login credentials (wp-admin and FTP) in private reply, so we can take a closer look.

And do you already have a lot of custom css on your child theme’s style.css file? Can you check it here: http://csslint.net/ and see if there is an error.

Thanks.
April 30, 2016 at 3:09 am #906690

blazeys
Participant

This reply has been marked as private.

April 30, 2016 at 11:26 pm #907450
Rad
Moderator
Hi there,

Hover will not take effect on items that are already set as active. They are active because all menu items are the same, and they are linked to http://benchem.co/ which is a home page. And they are all active on home page, since it’s the current page where it’s linked.

And your CSS will not take effect since you added them within the comment block. http://benchem.co/wp-content/themes/x-child/style.css?ver=4.4.2

It’s currently like this,
```
/*

Theme Name: X &ndash; Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

footer.x-colophon.bottom {
	background-color:black;
}
footer.x-colophon.bottom .x-nav li a {
	color:white;
}
footer.x-colophon.top {
	background-color: grey;
}
footer.x-colophon.top {
	padding: 2% 0;
}

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none !important;
}

.esg-overflowtrick { overflow:visible
}

*/
```
and it should be like this,
```
/*

Theme Name: X &ndash; Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/

footer.x-colophon.bottom {
	background-color:black;
}
footer.x-colophon.bottom .x-nav li a {
	color:white;
}
footer.x-colophon.top {
	background-color: grey;
}
footer.x-colophon.top {
	padding: 2% 0;
}

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none !important;
}

.esg-overflowtrick { overflow:visible
}
```
Should be outside of /* */

Hope this helps.
Author

Posts

<script> jQuery(function($){ $("#no-reply-900950 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>