changes to layout.css in child theme

quicky2000 · November 2015

Hi guys,

please forgive me if my question is stupid. I'm a newbie when it comes to child themes:

I'm running woocommerce and with this I'm having an issue that the breadcrumbs are sometimes so long that they need two rows to show up. I was able to fix this by changing the width in the following two css lines in layout.css:

#Subheader .title { margin-bottom: 0; width: 60%; float: left; }

#Subheader ul.breadcrumbs { display: block; width: 40%; margin: 1px 0 0; font-size: 1em !important; float: right; text-align: right; }

This worked perfectly but I didn't want to have this in the original layout.css so I tried to add this to the child's theme style.css. And that didn't work.

Is there any chance to do this change in the child theme?

Thanks for your support.

Cheers,

quicky2000

Albert · November 2015

Hey,

child theme works only with 2 files: functions.php and style.css what has been described on https://codex.wordpress.org/Child_Themes - so from child theme you can overwrite styles but you can not remove current styles from parent theme at all. To remove these styles completely, it would be necessary to modify parent theme files.

Thanks!

quicky2000 · November 2015

Oh, I didn't want to remove it I just want to change

#Subheader .title { margin-bottom: 0; width: 70%; to 60%

and

#Subheader ul.breadcrumbs { display: block; width: 30%; to 40%

to allow the breadcrumbs-part more space

I tried the following:

added "wp_enqueue_style( 'layout', get_stylesheet_directory_uri().'/layout.css' );" to the child's functions.php
added a new layout.css to the child's theme which only includes those to styles mentioned above.

this seems to work but based on your reply I wonder if this is okay to do.

Thanks for your feedback on my approach.

Cheers,

quicky

Albert · November 2015

If above solution works, then it's fine of course. Sometimes result is more important than they way of how you did it

changes to layout.css in child theme

Comments