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.
Related
Basically I want to load my child's theme css file at the end of element to avoid override of other stylesheets.
At this moment my css file is overridden by builder, which has some sort of bug with responsive design so I wanted to apply certain styles myself.
I tried to lookup for solution online, but could not find anything.
Anybody here has had same issue with it before?
We can use here priority. we add the priority 99. so it will likely be last but some plugins may add CSS at a higher priority, though it's rare. so please check once this code I am truly sure this works for you.
function custom_enqueue_styles(){
wp_enqueue_style('customcss',get_template_directory_uri().'/css/bootstrap.min.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_styles', 99 );
I'm struggling since a while with styles in WordPress.
What happens is that I define a style for a Block in my.css and in the website, this style gets overwritten by the style.min.css. So if WordPress want's the color to be green by default, I can just force it to change this by putting !important everywhere. That's super ugly.
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style.css', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
That is how I load my standard style.css in my self-written theme in WordPress 5.3.2.
So if anyone knows, how I can tell WordPress to load my style.css after the style.min.css or whatever causes this inconvenience.
Use CSS Specificity to assign higher priority to your CSS rules.
Ironically, your desire to "keep selectors as short and basic as possible" is working against you, but the provided link will help you build high-priority, specific, CSS Selectors.
NOTE: Wordpress is NOT "overwriting" your .css file. We know this because your CSS applies when you add !important to the rules -- so, the CSS rules must be loaded, hence this is a CSS priority issue, not a Wordpress issue. Also, note that CSS rules never "overwrite" eachother; instead, all rules are there, but only one is used (typically, the most specific one).
Change your style.css parameter to your-theme-style-css
After experimenting around, I slowly believe, that the problems roots are in css itself. ".wp-block-cover .wp-block-cover__inner-container" is the wordpress class. My class is just ".wp-block-cover__inner-container", as I prefer to keep selectors as short and basic as possible.
But if I change my class name to the exact same, used by WordPress as well, it is working. Also if I just put any other class in front, the styles are applying properly.
So it seems for me now to be a priority question from CSS. Is this possible?
I had a question on how to find out which part of your code needs changing to adjust this "display:none !important" functionality which prevents the website to be responsive on mobile. When going under 767px content simply disappears and that condition triggers.
If I change it to "display:inline !important" that works but I've only done it in-browser and I can't find where to change it in the source files. Is there any methodology on finding this out? I've even used grep on all the files in the theme looking for keywords but I don't know where else to look. Also tried adding the changed code into the "Additional CSS" menu however with no success either.
The question is:
Is there any methodology to finding this [where the CSS lives] out?
You want to know the methodology to find the CSS. Let's walk through how I did it.
Step 1
The inspector gives you the location of the styles. Using your images, I marked the locations with the red boxes:
Notice that the style in question is located in (index):557. Where is that? It's not an external stylesheet, as with the style.css example. Rather, it's been added directly into the <head> and wrapped in <style>.
Using Dev Tools, look in the <head> of the DOM (in the HTML markup). You'll find it there.
Step 2:
Where do you find it? The method that I use is to look at the style declarations first in the <head>. Are there any comments to give you clues?
Next, I look at the actual style attributes. In this case, it's .tm_pb_builder. That is giving you a clue to the component that builds the CSS.
I did a Google search for that class attribute, like this: wordpress tm_pb_builder. That took me to GitHub and the Power Builder plugin from TemplateMonster.
Step 3
Now you know that the plugin Power Builder is the one responsible for adding that style into the <head>. You can then take a look at the respective page and explore how this page is built with this page builder.
That's my methodology.
You can add display:inline !important in the style.css of your child-theme, but it will only works if the plugin css file loads before it.
If the theme's css loads before plugin css, you can create a new css style and enqueue it at the very last end of the style enqueue.
add_action('wp_enqueue_scripts', 'se_41042975', 999);
function se_41042975(){
wp_enqueue_style('css-plugin-override', get_stylesheet_directory_uri(); ?>/css/custom_css.css');
}
Hope it helps!
In my plugin I have some styles for the admin area. Originally, I was just doing them in the main plugin file, inline, but now I've enqueued them. The stylesheet is enqueued properly; all the styles are working, except that -- any images referenced in the stylesheet do not show up. When the styles were inline they showed up fine, but when I enqueue the stylesheet they do not show up. It's not an issue with the path because the stylesheet is in the same directory as the plugin file where the styles were formerly found inline.
Here's how I've enqueued it:
function my_style() {
wp_register_style( 'style', plugins_url('style.css', __FILE__) );
wp_enqueue_style( 'style' );
}
add_action( 'admin_enqueue_scripts', 'my_style' );
And again: the enqueue is correct because all the other styles work fine. So here is an example of an image in my stylesheet:
#mycustom-mb h3:before {
content:url("../wp-content/plugins/my-plugin/images/banner.png");
}
And that same line works when the style is inline, rather than enqueued. Is WordPress doing something weird to block my images? It doesn't even give me a file not found error in Firebug, nor does it show the broken image link in the header (like it does when you have a bad path). It's just not there. And in Firebug, Firebug doesn't even try to search for an image when you hover over its link, like it does on all other images. So it feels like WordPress is doing something weird to images when a stylesheet is enqueued to the admin.
I can't do a regular include either, because, though it works fine, it gives a "unexpected characters" warning message on plugin activiation when I have my CSS inline or included.
When using url() inside one of your css rules, you have to remember, that the paths are relative to the stylesheet that they're found in.
So, in the case of inline styles, the path is relative to /wp-admin/, but when you load a stylesheet found in /wp-content/plugins/my-plugin/style.css, all of the paths will be relative to /wp-content/plugins/my-plugin/.
Therefore in order to target the correct URL at which your images are found, you just have to use this:
#mycustom-mb h3:before {
content:url("images/banner.png");
}
I'm now using Chrome Developer tools, which I know for sure displays a 404 not found error when a rule from a stylesheet causes the browser to load an image, so I'm not sure why FireBug would not show any errors.
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?