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.
Related
I'm building a Wordpress site with Understrap, customizing a child theme.
The way I understand it, the theme comes with Font Awesome installed.
I'm attempting to add some icons, like so:
<i class="fab fa-facebook"></i>
But all I see in the browser is what looks like a weird slanted hamburger. See Image
It looks like the styles are being pulled in when I inspect. See Image
Not sure what I'm missing. Is there some special step I need to take to activate Font Awesome? Everything's being imported correctly as far as I can tell. I'm just using the default child theme.
First check the page source to see if the parent theme styles have been enqueued or not. You must use the following code to load parent theme style. Put this code in the child theme functions.php file :
add_action( 'wp_enqueue_scripts', 'prefix_load_parent_theme_style');
function prefix_load_parent_theme_style() {
wp_enqueue_style( 'parent-style',
get_template_directory_uri().'/style.css' );
}
Try and redeclare the font:
.fa-apple:before{
font-family: Font Awesome;
}
Sometimes it gets overridden by other :before fonts
I edited my Wordpress style.css in the child theme folder but the CSS is not overriding unless I uses !important on everything.
How can I set the child theme style.css to a higher priority.
I already searched on Google and tried multiple solutions but somehow I don't get it working.
Try dequeueing the child CSS in the child theme's functions.php and then enqueuing it with the parent theme's CSS as a dependency.
https://codex.wordpress.org/Function_Reference/wp_dequeue_style
https://developer.wordpress.org/reference/functions/wp_register_style/
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 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?
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.