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.
Related
I'm currently going through an issue with the SASS compiler. I've started creating the basic layout for a Wordpress website using CSS but the compiler, Prepros is not letting me compile the files. I fear that it may have something to do with the comment blocks at the start of the style.css file. If you know what the issue may be, then that will be great.
style.sass
/*
Theme Name: Xtra Child
Theme URI: http://themeforest.net/user/Codevz/portfolio
Description:Sample child theme of Xtra theme for customization.
Author: Codevz
Author URI: http://themeforest.net/user/Codevz
Template: xtra
Version: 1.0
*/
#import "global.sass"
The error log I've gotten from Prepros :
If you can give me an idea on how to combat this problem, that would be really great. Thank you for your time. :)
Try this instead:
/*Theme Name: Xtra Child
*Theme URI: http://themeforest.net/user/Codevz/portfolio
*Description:Sample child theme of Xtra theme for customization.
*Author: Codevz
*Author URI: http://themeforest.net/user/Codevz
*Template: xtra
*Version: 1.0 */
With SASS comments the closing comment */ needs to be on the last line, not underneath. Hopefully that works
I have a situation. My child style.css file contain the following line :
#import url("../notio-wp/style.css");
The Main theme style.css file, contain the following message:
/*
* PLEASE DO NOT EDIT THIS FILE!
*
* This file is only in your themefolder for WordPress to recognize basic theme data like name and version
* CSS Rules in this file will not be used by the theme.
* Instead use the app.css file that is located in your themes /assets/css/ folder to add your styles.
* If you just want to add small css snippets you might also want to consider to add it to the designated
* CSS option field in your themes backend at: Appearance -> Theme Options
*/
I've made some modifications in custom css Main theme field and also in app.css file.
What is the best way to include into the Child theme, the new css styles, should I simply copy the app.css file into the Child theme structure, or only the app.css modified lines, into the Child style.css file, next to the css lines from the custom css Main theme field? thank you,
I'm still new to WP and I don't know where I can change those colors in the Editor (I understand that I must create a child theme first so not to disturb the original codes).
Regards.
Edit:
I can't even get the child theme to function properly:
/*
Theme Name: Twenty Fourteen Child
Theme URI: xxxhttp://www.xxx.xxx/wp-content/themes/twentyfourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: xxxhttp://www.xxx.xxx
Template: twentyfourteen
Version: 1.0.0
*/
#import url("xxxhttp://www.xxx.xxx/wp-content/themes/twentyfourteen/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */
Activated the theme, but nothing show: xxxhttp://i.imgur.com/mOq1h7z.png
But the theme details are correct: xxxhttp://i.imgur.com/wxZoxok.png
Yet nothing show on the blog: xxxhttp://i.imgur.com/g5ujPdL.png
Help...
As far as I know, there is no way to do this in the visual editor that comes with WordPress (for the Twenty Fourteen theme, that is).
You are correct about child themes. I highly recommend creating your own child theme before tampering with the style sheets.
How to create a child theme
When you have created your child theme you can add CSS rules to it.
Example of child theme style.css file with a CSS rule to change your footer background color:
/*
Theme Name: user3134685's theme
Theme URI: http://example.org
Description: user3134685's theme
Author: User 3134685
Author URI: http://example.org
Template: twentyfourteen
Version: 1.0.0
*/
#import url("../twentyfourteen/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */
.site-footer{
background-color:#770000; /*Dark red*/
}
The rest of the elements that you want to change have similar CSS classes or ID's that you will have to type in your style.css file. You can easily figure them out by using a web developer tool like Firebug and the element inspector tool.
There are two ways:
1) Right click on front site and inspect element and find the line number of
style.css and edit whatever you want.
2) Follow given screenshot in admin:![Appearance->Background or Header][1]
[1]: http://i.stack.imgur.com/xnJLj.png
First you need to create a child theme, which is basically creating a child style.css for your twenty fourteen theme. You can use a free editor such as Notepad++ to edit your child style.css. After activating your child theme from dashboard (what you did is correct), add all your modifications to the bottom of this same file.
For more information, you can check out Twenty Fourteen Child Theme and also How to Customize Twenty Fourteen Theme.
I'm developing a WordPress theme, and using LESS for the CSS. LESS has many dynamic solution, and I found them helpful throughout my project. I'm using LESS, but not directly, I'm compiling the LESS file into CSS and enqueueing them (.css) into the site <head>. To compile the LESS files, I'm using WinLESS (v. 1.8.1), and it's an excellent and quick one. It has a built-in minfication technique so that with a single click I can (1) Compile the LESS file, and (2) Minify them at once. To ensure site speed I'd like to prefer the minified version of the CSS. But...
But, we all know that a WordPress theme CSS file contains the theme information at the header, like:
/*
Theme Name: my theme
Theme URI: http://www.example.com/
Description: my theme description
Author: you
Author URI: http://www.example-author.com/
Version: 1.0
*/
If I command WinLESS to compile my style.less to Compile && Minify then I get a minified version to style.css, but you know a minified CSS doesn't contain any CSS comments, so the theme information simply blown by the process. And in wp-admin/themes.php page the theme become header-less (unnamed).
I then tried something different. I made my stylesheet into two files:
style.less - contains only the header information a theme needs, nothing else
my-site.less - contains all the site CSS
I am compiling the style.css as non-minified, but the my-site.css as minified. In style.less I am including or taking all the CSS from the my-site.css with:
#import (less) 'css/my-site.css`;
So that, the minified my-site.css is completely imported to the style.css file (there would be no #import CSS parameter there). They will be included like the regular CSS codes, line-by-line, with the (less) included [details].
PROBLEMS...
That's actually the problem. Though I'm importing a minified CSS file, but the LESS #import (less) is taking the declarations as line-by-line.
Where my my-site.css is like:
*{margin:0;padding:0}html{margin:0;padding:0}
when I'm opening the style.css file it's like:
* {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}
The importing is vanishing the minification completely.
Is there any other solution to #import CSS codes into a stylesheet being minified?
P.S.: I'm completely aware about the WP-Minify plugin (a nice one), and I don't actually want to use it on the first hand.
WinLess uses the YUI compressor to do its minifying. (Well, specifically, I think WinLess uses LESS.js, which uses YUI compress.) Because of this, you can use a particular starting comment style -- /*! to hint to the minifier that the comment should be kept:
/*!
Theme Name: my theme
Theme URI: http://www.example.com/
Description: my theme description
Author: you
Author URI: http://www.example-author.com/
Version: 1.0
*/
WordPress should still recognise the block comment and use the theme information.
See the "special comments" section of the YUI compressor documentation.
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?