How to remove woo-commerce themes default css
like
layout.css
style.css
and other files
You can disable WooCommerce default style sheets by adding the below code snippet to your theme's functions.php.
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
Related
I downloaded the bootstrap icon and font awesome packages. But I don't know how to use it, I just imported the following into styles.css file : #import "~bootstrap/dist/css/bootstrap.css"; #import "~font-awesome/css/font-awesome.css";
I guess I need to add something in the angular.json file, but I'm typing the path incorrectly
I want it to look like this:
But it looks like this:
$ npm i bootstrap-icons
And add follow line to style.css file:
#import "~bootstrap-icons/font/bootstrap-icons.css";
And use icons like that(just example):
<i class="bi bi-person-fill"></i>
You can find any icons you would like to use in follow bootstrap official docs: bootstrap icons
Try after removeing ./.
like :
"styles": [
"node_modules/font-awesome/css/font-awesome.css",
"node_modules/bootstrap/dist/css/bootstrap.css",
],
On my laravel app, I'm using a forum package called "chatter".
This forum is injected into my master layout, so it looks like this:
nav bar
chatter package
footer
It's injected into a container called <div id="chatter">, and its styles are found in the style sheet chatter.css, which is separate from my main sheet.
The problem is, some of the styles in this sheet are conflicting with my nav and footer. Furthermore, some of the styles in my main sheet are affecting the forum (albeit minimally, so I don't mind making the changes manually).
I can't change the markup, but I can edit the styles.
So how could I make it so that all the styles found in chatter.css ONLY apply to what's inside of <div id="chatter">?
Add #chatter to every style in chatter.css like this
#chatter table{...}
#chatter tr{...}
#chatter td{...}
etc.
If style is for level above the chatter div then add after like this:
html #chatter{..}
body #chatter div{...}
You will have to namespace your CSS as user Nawed Khan pointed out but there is a much simpler way to do that than changing each of your styles manually. This method uses less to handle it for you.
Drop this in a file called chatter.less.
#chatter {
#import (less) 'chatter.css';
}
Then you need to include it on your page...
<link rel="stylesheet/less" type="text/css" href="chatter.less" >
Then you need to include less.js AFTER you've included your .less file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
In your .less file you might have to mess with the path to chatter.css, I believe it's going to be relative to whatever file you are including the .less file on.
My directive uses an HTML file. The HTML file uses a CSS stylesheet. I need to distribute the directive js, HTML and CSS files, so the CSS location definition needs to be relative to the HTML.
Note: This is how I solved the location of the HTML, I have pending to solve the location of the CSS file.
I put the CSS file in the same folder as the HTML file, and then defined in the HTML:
<link rel="stylesheet" href='somefile.css'>
however this points to the domain root, not to the HTML file location.
Any ideas how to achieve this?
I think there are two ways to fix your issue as you don't know where the directives are located:
Solution 1 - Ancient HTML Way
If the length of the CSS is small, you can directly include it in your template HTML itself, through the style tag.
<style type="text/css">
Add style rules here
</style>
Solution 2 - The Angular Way(most recommended)
Use ngHref directive.
In your directive.js code, you can just put the path of the directive.html to a scope/rootScope variable and then you can access it from the directive.html
In directive.js
link: function (scope, iElement, iAttrs) {
scope.htmlPath = <path of templateURL>;
}
In directive.html
<link rel="stylesheet" ng-href="{{ htmlPath }}/filename.css">
Note:
I hope you are not using Gulp to build the angular JS code. But, If your are using gulp, you can add a gulp task and pipe all the CSS to a single CSS and can inject to your index.
You need to make separate directories for css and html(template files)
and use full path from root to the css folder
<link rel="stylesheet" href='/angualr/css/style.css'>
I am using qTranslate plugin which allows me to translate posts and fields.
The first language is English, the second language is Arabic which requires RTL design.
I followed their FAQ and Wordpress' Right-to-Left Language Support.
The FAQ of the plugin says it should work automatically but if it doesn't that I need to check Wordpress' documentation on the issue, so I did, it says this:
Start with your main theme stylesheet (usually style.css). Save this
file as rtl.css Add the following attributes to the body selector:
direction: rtl;
unicode-bidi: embed;
So I created a new copy of style.css and named it rtl.css then added direction:rtl to the body selector.
But it's not working, when I switch the language to Arabic, it still displays LTR.
However if I add direction:rtl to the body selection in style.css it works, the theme switches to RTL.
What can I do in this situation?
The only way I managed to get this to work is by creating a new class in my css called direction and included it whenever the language was Arabic, by doing this
$currentLang = qtrans_getLanguage();
if($currentLang == 'ar') {
// do something
}
In case you need to redirect browse view to read from RTL and by using qtranslate-x plugin, add code below at header.php
<?php
$dir_ar = 'dir="rtl"';
?>
<html <?php language_attributes(); ?> <?php if(qtranxf_getLanguage() == 'ar') echo $dir_ar; ?>>
then at function.php, use wp_enqueue_style, wp_style_add_data, to detrmine which stylesheet you need to read as rtl
wp_enqueue_style('theme-style', get_stylesheet_uri() );
wp_style_add_data('theme-style', 'rtl', 'replace' );
reference link:
- https://codex.wordpress.org/Right-to-Left_Language_Support
- http://princessdesign.net/wpsnippets/qtranslate/
There are any differant among Them
get_template_directory_uri(); and get_stylesheet_uri(); or, get_stylesheet_directory_uri();
get_template_directory_uri();
= Directory of your current (parent) theme without trailing slash at the end.
Example: xyz/wp-content/themes/yourthemename
get_stylesheet_uri()
= Returns your style.css path from your current active theme. It is the same than no1 but with /style.css at the end.
Example: xyz/wp-content/themes/yourthemename/style.css
get_stylesheet_directory_uri();
= Returns your style.css directory as URL. It MIGHT be the same than No1. But No3 referes to the style.css directory of your parent OR, if in use, CHILD Theme. While No1 always returns your parent theme´s style.css directory
Example: xyz/wp-content/themes/yourthemename/childtheme