How to override the parent CSS folder into Child theme?

[lucatoParticipant]

Hi folks,
How do I get to override the parent CSS folder into Child theme?

Let’s say that I have at symbiostock/css the files:
styles.css
bootstrap.css

and I want to put these files above with changed code into the symbiostock-child/css folder, but I want it overrides the symbiostock/css and it isn’t happening. With the child-theme activated, the css files used are from the css parent folder instead of the css folder within the child theme.

Any idea how to use the css files within the child-theme instead of the parent? Is there something that I have to set in the functions.php file in the child-theme folder?

Any help will be appreciated.

[AndreParticipant]

How to Create a Child Theme

Child Theme directory structure



Create a directory in your themes directory to hold the child theme. The theme directory is wp-content/themes. You should name the directory without any space as part of the name, and it is common practice to use the name of the parent theme folder with “-child” appended to it. For example, if you are making a child of the twentyfourteen theme, your folder name would be twentyfourteen-child.

In the child theme directory, create a file called style.css. This is the only file required to make a child theme. The style sheet must start with the following lines:







/*

Theme Name:   Twenty Fourteen Child

Theme URI:    http://example.com/twenty-fourteen-child/

Description:  Twenty Fourteen Child Theme

Author:       John Doe

Author URI:   http://example.com

Template:     twentyfourteen

Version:      1.0.0

Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

Text Domain:  twenty-fourteen-child

*/



@import url("../twentyfourteen/style.css");



/* =Theme customization starts here

*/

http://codex.wordpress.org/Child_Themes

Stock Photos at PictureBreeze.com

[ChristineParticipant]

Everytime I try and change anything in the functions.php I get the white screen.

I do use the a child theme though and just change certain things using it – such as

/*button colours
*/
.btn {
border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
color: #8B0E9C;
background-color: #CCA8CC;
border-color: #9710B1;
}

http://kerioakimaging.com - trying to reopen
http://nail-art-at.kerioak.com - Art and Nail Art

[JoAnnSnoverParticipant]

I think I put a post together about this issue before, but it’s about how WordPress looks for files and the order in which it does this.

style.css and functions.php are special, and there are issues with theme files that are in subdirectories off the main theme directory, but you can read some more about this issue here:

http://codex.wordpress.org/Template_Hierarchy
http://themeshaper.com/2009/04/17/wordpress-child-theme-basics/
http://stackoverflow.com/questions/19039492/override-a-function-with-child-themes-functions-php

http://code.tutsplus.com/tutorials/how-to-modify-the-parent-theme-behavior-within-the-child-theme–wp-31006

http://wordpress.org/support/topic/how-to-include-subdirectories-and-their-files-in-a-child-theme

In some cases, things can be made much simpler where the parent theme checks to see if a function exists, so making it easier to customize would be best done by making a change to the parent theme to do that, so our child theme files could then include a variant of that function.

But even that approach has limits; if the parent theme updates the function you’ve modified to include new features, your child theme function will need changes too or those new features will be missing.

At some point – when things are really stable – it’d be nice to go and fix up things to make code (not just style sheet) modifications easier.

[JoAnnSnoverParticipant]

There were two identical posts on this topic – please try to avoid doing that – so I merged them into one and deleted the duplicate.

[lucatoParticipant]

@redneck wrote:

In the child theme directory, create a file called style.css. This is the only file required to make a child theme.

Redneck, by doing this, I don’t get to override the styles.css and bootstap.css changes I have done.

[lucatoParticipant]

@christine wrote:

Everytime I try and change anything in the functions.php I get the white screen.

– Check out this article of mine in my blog to see if it isn’t because leaving blank space…

@christine wrote:

I do use the a child theme though and just change certain things using it – such as…

– Are these changes just in style.css file and all changes just come from parent style.css or do you change also other css files also such bootstrap.css, style-login.css and so on? If so, do you place all them into style.css even coming from diferent css file names?

[ChristineParticipant]

I do not really understand what you are asking so the answer is probably yes. I do things by trial and error, findjthe bit of code I want to change and place it in the child theme editor . Thanks for correcting many of my errors should go to plrang who patiently explained some of the things I was doing totally wrong

http://kerioakimaging.com - trying to reopen
http://nail-art-at.kerioak.com - Art and Nail Art

[Imago BorealisParticipant]

If so, do you place all them into style.css even coming from different css file names?

The answer is yes. The last css file/instruction read is the one that rules. Other identical instructions in any other css file get overruled. If you use Firebug plugin with Firefox you exactly see what’s happening and how it works. That being being said, I found a number of css instructions included in the dragonfly child theme itself or manipulated by .js scripts that in fact are being read after the child theme styles.css so they can’t be overwritten.

I found even a solution for those: add “!important” to the instruction like: “.classxyz {display: none;}” to “.classxyz {display: none !important;}”

That means you can change any css no matter where it is coded in the theme all from within your child theme styles.css (at least I haven’t experienced any restrictions, yet. And my styles.css is almost 900 lines.)

Stock Photos at ImagoBorealis.com

[lucatoParticipant]

@Imago Borealis wrote:

The answer is yes….
That means you can change any css no matter where it is coded in the theme all from within your child theme styles.css (at least I haven’t experienced any restrictions, yet. And my styles.css is almost 900 lines.)

Thanks Imago for the info.
Actually I would say more or less. I just tried it by using codes from bootstrap.css and styles.css into style.css at (-child/css) and it seems to work, thanks, but I have a comment on this practice. I think in this method will face an issue that by repeating each filename.css into the css and overriding wouldn’t happen.

I think that can happen that you have for example:
a:hover, a:active, a:focus, and etc can have in different files such as styles.css, bootstrap.css, and etc, with different values therefore by adding these into style.css will work for both instead of for each file and with different values. Well something to research better.

[Author]

Posts