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,
Related
I want to create a theme very closely based on the default (valo) theme but with a few extra CSS rules.
I am following the basic instructions here
I have my own CSS under VAADIN/themes/mytheme/styles.css
I have the annotation #Theme("mytheme") on my UI class
The css file contains:
#import "../valo/styles.css";
.my-additional-styles {...}
The rendered page picks up my additional styles OK but none of the valo style are applied at all. Looks like the #import is not working.
When I check the validity of the valo/styles.css URL in the browser, the correct css is retrieved.
What I am doing wrong?
I have got some Bootstrap functionality up and running on my app. So far so good. I know that the 2 defaults colors for the navbar are black and white,using navbar-default and navbar-inverse. I am trying to add the navbar color change CSS to the assets/stlyesheets/application.css file, but not having any luck. the color im changing it to is green. ( an irrigation system website. Green for grass, yay)
this is what my application.css file currently looks like.
/*
* This is a manifest file that'll be compiled into application.css, which will include all the
files listed below
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets
/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*/
.navbar-default {
background-color: #33FF33;
border-color: #E7E7E7;
}
Create a new file under app/assets/stylesheets, add your custom styles to the file, then include it in application.css.scss.
#import custom_navbar.css.scss;
You will want to change application.css to application.css.scss and remove the comments entirely. You will then import the files you want using the #import directive.
Note that this somewhat breaks away from convention, but it might work for your purposes. You can read more about structuring SASS projects on the SASS blog.
If you are using the bootstrap-sass gem (you should), the right way to do this, is to set the bootstrap variables, in your application.css.scss, before including bootstrap:
$navbar-default-bg: #33FF33;
$navbar-default-border: #E7E7E7;
#import "bootstrap";
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'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 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?