I'm currently building a custom theme on top of the _S Underscores Wordpress theme. One of the things I immediately did was remove all the content in the style.css file, as I want to create my own styling (largely using Bootstrap).
However, I can't seem to get certain attributes in the style.css to make changes to the html. For example, I'm trying to set the following <h1> tag to red. But it will not change.
<h1 id="testOfContent">Test</h1>
CSS (in the style.css file provided by Underscores):
#testOfContent {
color: red;
}
However, the font remains black. How do you manipulate a wordpress theme (especially _S Underscores which is meant to be customizable) to use your own css? Any ideas as to why it won't register my own CSS?
Here's my functions.php file and how I'm loading the script:
function tlas_css() {
// Enqueue bootstrap css
wp_register_style('bootstrap-css', get_template_directory_uri() . '/bootstrap-3.3.4/css/bootstrap.min.css');
wp_enqueue_style('bootstrap-css');
// Enqueue custom stylesheet
wp_enqueue_style( 'tlas-custom-style', get_template_directory_uri() . '/css/tlas.css' );
wp_enqueue_style( 'tlas-style', get_template_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'tlas_css' );
You should use wp_enqueue_style( 'your-style', get_stylesheet_uri() ); which retrieves the URI of the current theme stylesheet.
Read more on codex.wordpress.org
The workflow I prefer to customize and add to the css for the _s theme is by editing the .scss Sass files. Be sure to select the Advanced Options so you can tick the _sassify! check box if using the _s theme Generator at https://underscores.me/#generator
Then you can import the Bootstrap Sass you want since Bootstrap 4 is written with Sass. If you prefer using Bootstrap 3, you can find it's Sass ports as well.
If you're not sure how to build the Sass, I put together a Webpack 4 development workflow for the Sassify option included with the underscores Wordpress starter theme. Hope this helps https://jimfrenette.com/2018/08/completely-blank-no-css-_s-wordpress-starter-theme/
If you are working with Chrome, try to clear cache (ctrl+F5).
Or Open Dev tools > settings > preferences > network > disable cache (when dev tool is open)
You can try this one:
add_action( 'wp_enqueue_scripts', 'yourstyle' );
function yourstyle() {
wp_enqueue_style( 'yourstyle', get_template_directory_uri() . '/css/yourstyle.css', array(), PARENT_THEME_VERSION );
}
Related
Problem
When I build my gatsby website with "gatsby build", the size of the generated HTML and CSS files is fairly large (approx. 200kB; even though there is close to zero real text-content in it).
When looking into the generated HTML-file, it turns out, that in each and every generated HTML-file, the complete global CSS is (in text-form) included. So it is completly redundant.
In my case: I use bootstrap as frontend framework, so all the bootstrap-css-classes (used and unused ones) are
100% included in the generated HTML-files
AND additionally: in the seperate "styles.ac6d....css" file.
To clarify: What I get after the gatsby built:
index.html 210 kB
about.html 210 kB
imprint.html 210 kB
....
style.css 200 kB
Expected Behaviour
What I would have expected after the gatsby built:
index.html 10 kB
about.html 10 kB
imprint.html 10 kB
....
style.css 200 kB
I would like to have small HTML-files without any unused CSS in it OR at least not to have the CSS redundently in 20 different files.
Questions
Is it possible to get gatsby built HTML-files without all CSS redundently included in every file?
AND / OR: Is it possible to have only the needed CSS-classes in the file (especially in the case of bootstrap)?
Am I doing something wrong here?
Additional Infos
How do I import the bootstrap CSS?
in global.scss:
#import "./node_modules/bootstrap/scss/bootstrap
in gatsby-browser.js
import "./src/styles/global.scss"
How does the compiled HTML look like?
The compiled HTML in index.html (and about.html, ...) from gatsby looks like so:
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.ac6d966df9cf852917cd.css" id="gatsby-global-css">/*!
* Bootstrap v4.6.0 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;
<!-- .... [ALL THE REST OF BOOTSTRAP CSS] -->
Edit: Conclusion for me
To inject the full global CSS in all the HTML files seems to be a normal behavior from the gatsby build process according to the comments. So just in case anybody else wonders about this gatsby behaviour...
I would go the SCSS way by importing a global styles.scss in which you only import the needed parts of the bootstrap distribution.
/*----------------------------------------------------
Overriden Bootstrap Variables (by me!!!!!)
------------------------------------------------------*/
$primary: #00B056;
$secondary: #bf9571;
$body-bg: #fff;
$body-color: #5a5a5a;
/*----------------------------------------------------
Import Bootstrap SCSS
------------------------------------------------------*/
// use this one only for debugging purposes. This is the whole package
//#import "../../../node_modules/bootstrap/scss/bootstrap";
// Required
#import "../../../node_modules/bootstrap/scss/functions";
#import "../../../node_modules/bootstrap/scss/variables";
#import "../../../node_modules/bootstrap/scss/mixins";
// Optional
#import "../../../node_modules/bootstrap/scss/reboot";
#import "../../../node_modules/bootstrap/scss/type";
#import "../../../node_modules/bootstrap/scss/images";
// add more bootstrap stuff as needed
There are of course more partial scss bootstrap packages available. Check their documentation for scss handling or check your node_modules path.
Of course you need to install bootstrap via npm/yarn to have it available. Also you need gatsby scss plugins like gatsby-plugin-sass and node-sass.
Among not using Bootstrap as #George suggested in #Logemann's answer, which in my opinion should be always avoided because tend to overload the applications and the same effect can be easily applied using own custom CSS.
I would suggest only importing the mandatory Bootstrap modules, rather than all the dependency to save some KB.
In addition, if get rid of Bootstrap is not an option I will try to look at some purging plugin, such as gatsby-plugin-purcecss to remove some duplicated styles in specific files.
// gatsy-config.js
module.exports = {
plugins: [
`gatsby-plugin-stylus`,
`gatsby-plugin-sass`,
`gatsby-plugin-less`,
`gatsby-plugin-postcss`,
// Add after these plugins if used
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: true, // Print removed selectors and processed file names
// develop: true, // Enable while using `gatsby develop`
// tailwind: true, // Enable tailwindcss support
// whitelist: ['whitelist'], // Don't remove this selector
// ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
// purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
}
}
]
};
I have inherited a work for another developer, it is a website made with WP Bakery Page Builder and I have to fix some design issues.
The thing is that the other developer add some custom css code that I don't find in the backend.
It is generated as inlince css in the index.php. Looks like this.
<noscript><style type="text/css">body .wpex-vc-row-stretched, body .vc_row-o-full-height { visibility: visible; }</style></noscript><style type="text/css" data-type="vc_shortcodes-custom-css">.vc_custom_1530389595419{padding-top: 5% !important;padding-bottom: 5% !important;}</style>
I have problems with these vc_custom_* classes, I want to remove all of them.
Can you guys help me to find these mysterious css?
Thank you so much.
I had exactly the same problem. But as the previous answers have suggested, it is more a matter of codification than of code.
The solution for me was to enter:
And then the values that are automatically like vc_custom_
are margins, border and padding
You can use conditional tags to target the specific page you need to remove the styles on. You can use is_page() to target a page page (as opposed to another post type) and pass a page ID, slug, title, or no argument to target any page.
function wpse_217881_remove_scripts() {
// Check for the page you want to target
if ( is_page( 'About Me And Joe' ) ) {
// Remove Styles
wp_dequeue_style( 'parent-style' );
wp_dequeue_style( 'child-style' );
wp_dequeue_style( 'parent-style-css' );
wp_deregister_style( 'parent-style' );
wp_deregister_style( 'child-style' );
wp_deregister_style( 'parent-style-css' );
}
}
I'm assuming you already are, but to be explicit, you should be calling the function that dequeue/deregisters the styles from an action hook - in this instance wp_enqueue_scripts.
From the wp_enqueue_scripts docs:
Despite the name, it is used for enqueuing both scripts and styles
I have a wordpress site and I got an HTML for the homepage, buy when I put the the whole HTML code in Wordpress it doesn't show the page correctly
So I want that wordpress charges this page independenly of the theme CSS, how can I do that ?
Thanks !
Your theme style.css is included by default by the wordpress by wp_head() function. Before you end you HEAD tag add this function.
<?php wp_head(); ?>
If you want to add additional stylesheets then use this function in your functions.php file.
function additional_custom_styles() {
/*Enqueue The Styles*/
wp_enqueue_style( 'themename', get_template_directory_uri() . '/css/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'additional_custom_styles' );
I'm having some really weird issues with converting a static HTML page to a wordpress custom theme. I have a style css sheet and a foundation css sheet as I am using that frameowrk.
The CSS works perfectly on the static html page but when it goes to wordpress there are issues with the font including the colour and size. Is there a specfic way you should be importing the CSS or a conflict I should be aware of?
The CSS of both are added to the page because I can see them in style editor when I 'inspect element'. I enque the scripts as shown below;
// Adds the css to the theme
function add_theme_scripts()
{
wp_enqueue_style('styles', get_stylesheet_uri() );
wp_enqueue_style('foundation', get_template_directory_uri() . "/css/foundation.css" );
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');
I didn't know if it was to do with any form of config error or just faulty files so I recreated the theme from scratch and the problem persisted.
If someone could perhaps point me in the right direction it would be very appreciated.
Thank you.
-Edit-
I've checked inspect element and removed all the addtional CSS that has been added by wordpress and the problem persists.
try to view source and check any other css are included in the page. May be some plugin css is conflicting with your css. If any plugin css conflicting deactivate that plugin and then change.
If you are en-queuing css file in parent theme.Try like this
function add_theme_scripts()
{
wp_register_style( 'foundation', THEME_DIR . '/css/foundation.css', array(), '1', 'all' );
wp_enqueue_style( 'foundation' );
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');
I need to add a shadow effect png picture to the top banner in my Magento website tamween.biz, I could do this on my local server using firebug by adding a new class in the right coding area and I have made all selector properties in the bootstrap.css file.
This test was very successful, The problem is I don't know where to locate the real HTML file in the server to edit these changes?
HTML code that calls image is in root/app/design/frontend/<package>/<theme>/template/page/html/header.phtml
Image's path is stored in System => Configuration => General => Design => Header => Logo Image Src
Any skin is located in root/skin/frontend/<package>/<theme>/css
Magento HTML page is made up of blocks, and each block has a template file.
To find out where each block template file is you can add some code to the core and get rid of it after you are done.
Open app/code/core/Mage/Core/Block/Template.php:241. This should be in the method fetchView and then edit the line having the include code to the following
if (strpos($includeFilePath, realpath($this->_viewDir)) === 0 || $this->_getAllowSymlinks()) {
echo "<!-- template hint start\n";
echo $includeFilePath."\n";
echo get_class($this)."\n";
echo "-->";
include $includeFilePath;
echo "<!-- template hint end\n";
echo $includeFilePath."\n";
echo get_class($this)."\n";
echo "-->";
} else {
This will add HTML comments telling you about the template file path and what $this means in that context.
(Reference)
In magento go to System - > configuration and set template hints yes.
This way you will see each template section from where static blocks will come from.
If you have created your custom theme then go to
root/app/design/frontend//yourtheme/template/page/html/header.phtml
if not then go to
root/app/design/frontend/base/default/template/page/html/header.phtml
and the n search for
<img src="<?php echo $this->getLogoSrc() ?>">
this is the code that output the image.you can add css class to it.