I am new to the whole WordPress themes so please bear with me while I try an explain the problem especially after most answers to child css applies to the style.css.
I have downloaded the roots theme and then created a child theme with that so then I could just play with the theme with out causing any issues.
My problem is the local css folder that contains the app.css, bootstrap.css etc is not being set.
Using the same folder structure as the parent theme I have noticed that the local folder is still loading the parents local folder and not the child's local folder.
What I am getting is:-
<link rel="stylesheet" href="http://localhost:8080/infinity/wp-content/themes/parent-theme/assets/css/bootstrap.css">
What I was expecting is :-
<link rel="stylesheet" href="http://localhost:8080/infinity/wp-content/themes/child-theme/assets/css/bootstrap.css">
Could anyone explain what I am missing because it is giving me a headache or ultimately a possible solution to this problem.
Thanks
Still no specific solution but after asking the same question on the roots group page I was informed that roots was intended to be a 'Starter theme' and not a parent.
Effectively meaning the coding around roots makes it difficult to use as a child theme.
My suggestion is make css changes to the app.css file these means the bootstrap css stay the same and your changes are in one page.
Hope this helps someone.
Why not try to import the css file you need in your child-theme style.css ?
It seems that the overwrite of parent theme only applys to style.css and wordpress template php files. So for your situation, try this in your child-theme style.css:
/*
Theme Name: xxx Child
Theme URI: http://example.com/
Description: Child theme for the xxx theme
Author: Your name here
Author URI: http://example.com/about/
Template: xxx
Version: 0.1.0
*/
#import url("../xxx/style.css");
#import url("assets/css/bootstrap.css");
#import url("assets/css/app.css");
#import url("etc.");
/*Here goes other styles*/
I'm also coming across the similar problem, but what bothers me is an js file and some non-template php files. Merely keeping the same filename and the same structure as in parent theme won't help.
Anyone knows how to keep my changes with those files after updating my parent theme?
Related
I just made my first child theme and it is working fine. But there are other css that needs to be changed which is loading from the parent and its dir structure is themes/css/layout.css
So I need to make that css load through child
I tired to do like this:
/*
Theme Name: Artificer
Theme URI: http://example.com/twenty-thirteen-child/
Description: artificer Child Theme
Author: Rabin Shrestha
Author URI: http://example.com
Template: artificer
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/
/*
#import url("../artificer/css/layout.css");
*/
/* =Theme customization starts here
-------------------------------------------------------------- */
and put the other css below and also put that css directory and layout.css inside the child theme but nothing happned. please help me
I realize your attempt to comment out the parent theme's css is intentional (unlike commenters)...and you have also tried to implement your own css.
Your issue is that most likely artificer (i'm not entirely familiar with that theme) most likely enqueues (or references) their other CSS files directly...and not via css imports. This is why your attempts at preventing that theme from loading their css files (and not your own) are not working.
Two possible solutions.
If the artificier author created conditional checks (is function defined) around the methods that enqueue their css files...you can use define your own function with same name to enqueue your own css files. Not too many theme authors do this though.
The not so elegant way...is to just include a CSS override file that gets called after artificier css files that applies the tweaks you want done.
On creating a custom theme i faced one problem http://templategraphy.com/wp-demo/landro/
lookwise its not look so good because it not supported style.css By default it shows all its css properties from bootstrap.min.css.
I want theme look good like this html http://templategraphy.com/demo/landro/ what should i do so that theme take all its css properties from style.css.
Thanks in advance
you first need to link bootstrap.css and then your style.css
cause in css order is important for cascading.
all custom styles or created by you comes last.
I've created child themes before using the same method, but for some reason with Bootstrap3 themes (I've tried multiple) I can't override the CSS. I'm currently using this Flatty theme.
I'm thinking maybe the trouble comes from the fact that there is a style.css in the parent but the styles I'm attempting to change are in a css folder in a file called main.css. I've tried duplicating this folder and file as well, but no luck. I've also tried just putting the classes I want to change in my child style.css.
Any help would be greatly appreciated!
Your CSS file needs to load after Bootstrap's CSS file. That way, your styles with the same name as Bootstrap's styles will take precedence.
I´ve created a child theme of the Snapshot theme from WooThemes.
But it seems I´m not succeeding to style the child theme.
Here´s the style.css header/code of the child theme:
/*
Theme Name: My Child Theme
Theme URI: http: //kevingstongramado.p.ht/
Description: This is a custom child theme I have created.
Author: Marcelo Noronha
Template: snapshot
Version: 1.0
*/
#import url("../snasphot/style.css");
div#temp{
color:#00FF00;
}
I´ve pressed F12 in Chrome, to see what could be.
The 'style.css' file, that appears, is the 'style.css' from the parent theme.
I don´t know if it shouldn´t has loaded the 'style.css' from the child.
I´ve a directory, 'snapshot', for the parent, and 'snapshot-child', for the child theme.
I have activated the child theme.
Can´t seem to find the 'style.css' file of the child theme, using F12 in Chrome.
The URL of the site is http://kevingstongramado.p.ht/
The text that should be styled in the page, is 'Test2'.
EDIT:
I´ve used FireBug in FireFox. Also, the site doesn´t seems to have loaded the 'style.css' from child theme.
Anyone?
Answer from an anonymous user, found in the edit review queue:
I don´t know, but it seems that in this theme, you can´t add styles in the 'style.css' child theme file.
I´ve tried to make some changes in the header.php, using one of the answers from this forum.
Like:
<link rel="stylesheet" type="text/css" href="<?php echo
get_stylesheet_directory_uri()
?>/style.css" />
But it completly screwd up layout.
So I realized, using FireBug, that the stylesheet that is loaded from the child theme, is the file "custom.css".
So that is the answer. Using the child theme file, "custom.css", you can add styles to your child theme.
I'm having trouble troubleshooting a new client site.
I'm using CSS media queries but for some reason modernizr/respond.js is not working for IE7 & 8 – I've been looking over this all morning and cannot fix it. Wondered if a fresh pair of eyes could spot anything I can't...?
Site is here: http://cy4or.co.uk
UPDATE:
I'm wondering if this has anything to do with Parent/Child themes in Wordpress. Previously this site used one theme, I since split that theme into a parent and child theme and (I think) that's when the problem began.
UPDATE 2:
It DEFINITELY has something to do with parent / child themes. activated just the parent them and all works fine.
I too was suffering from Respond.js not parsing the media queries in my WordPress parent/child theme configuration which involves using #import in the child CSS file to pull in the parent theme CSS. I then discovered that according to the Respond.js documentation:
Respond.js doesn't parse CSS referenced via #import, nor does it work
with media queries within style elements, as those styles can't be
re-requested for parsing.
Since I am using Sass, the solution in my case was to #import the Sass file, not the CSS file:
#import '../parent/scss/style.scss';
This compiles the parent CSS into a single style.css file in the child theme and Respond.js renders the media queries as expected. If you were not using a preprocessor or had another reason to load the parent CSS file itself, this could be done with wp_enqueue_style.
function link_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts', 'link_parent_theme_style');
Technically, this question should read "Respond.js not working with WordPress parent/child theme"
Your page does not validate, and JavaScript will most likely need a correctly validating page to stand the best chance of executing without errors.
So it turns out this problem was a bit of a tricky one to resolve.
I'm using .less to compile my css but for some reason when doing so with the Child theme and importing the parents css at the top of style.css it wasn't working in ie8 & below.
I wish I could expand on 'it wasn't working' but after 2 days of trouble shooting I really couldn't tell you what the problem was.
In the end I resorted to adding the child css directly to the header, followed by the parents css:
<link rel="stylesheet" href="http://site.com/wp-content/themes/Parent/style.css">
<link rel="stylesheet" href="http://site.com/wp-content/themes/Child/style.css">
This worked for me, I know it's not ideal but I can live with it.
If anyone has any knowledge on working with .less app to compile child themes and parent themes css successfully I'd like to know.