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
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.
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´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 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?