I am new to Drupal.
I am in need to add an external stylesheet to an existing site. I see drupal_add_css() to be used to add stylesheet.
I tried to add this function my template.php, but it is not making any change.
Neither it is adding stylsheet nor throwing any error in console.
This is what I did
function drupal_add_css()
{
$path = '/css/new_style.css';
$type = 'module';
$media = 'all';
$preprocess = TRUE;
}
I have added the above snippet in my theme's template.php
How do I add the new_style.css to an existing array of stylesheet.- $Style
The existing theme name is 9ways
Plus this stylesheet should be the first css to be included.
The drupal version being used is v6.0
You don't want to override drupal_add_css() you want to use it.
In your template.php you need to define the hook you want to use to add your CSS file. If you want a page-specific CSS file you can define a hook_preprocess_page() and use drupal_add_css() in that hook:
function mytheme_preprocess_page(&$vars) {
...check for page you want to add css for...
drupal_add_css( drupal_get_path('theme', 'mytheme') . '/css/pagestyles.css', 'theme');
}
That said if you want a css file as part of your theme on all your pages you don't want to add it using drupal_add_css(), you should use the .info file and include the file there:
stylesheets[all][] = css/style.css
Take Note: Drupal 6 is no longer officially supported by the community. While there are some places that are offering long term support for Drupal 6, you should plan to move to Drupal 7 or 8 soon.
You can try module css injector
https://www.drupal.org/project/css_injector
With this module you can inject css style, you must reference the id or class
Related
The question title is self explanatory but, here it goes something else:
I need to add a small amount of CSS rules to style a plugin but I need to do it in my Wordpress functions.php to avoid messing around with core files of that same plugin.
Is this possible, how?
You do not need to "add style to the plugin," as a correctly configured WordPress installation will allow you to override the plugin CSS easily without interfacing with the plugin at all.
You should be using a WordPress Child Theme. You can add your CSS to the end of the child them style.css file.
You can also include CSS through theme settings in some themes. Search for "Custom CSS [YourThemeName].
Or, you can choose one of many plugins that will permit you to configure custom CSS as well.
Finally, you could use one of many different approaches for including style with PHP.
I often use wp_add_inline_style for simple, brief CSS inclusions:
function add_some_custom_style(){
ob_start();
?>
.someclass {
somestyle: style;
}
<?php
$style = ob_get_clean();
if (! wp_style_is('some-custom-style-handle', 'enqueued')) {
wp_register_style('some-custom-style-handle', false );
wp_enqueue_style('some-custom-style-handle');
wp_add_inline_style('some-custom-style-handle', $style);
}
}
add_action('wp_head', 'add_some_custom_style');
The file is manually created by me & not a part of the theme.
I've tried by placing get_header( ) inside my file but it shows a error that get_header( ) is not defined.
Maybe you don't have default header and footer names. Then you need to set additional name.
Includes the header.php template file from your current theme's directory. If a name is specified then a specialised header header-{name}.php will be included.
If the theme contains no header.php file then the header from the
default theme wp-includes/theme-compat/header.php will be included.
Source: https://codex.wordpress.org/get_header
I highly discourage it but you need to include the wp-load.php file that resides in the root of your wordpress installation, in your lone php file. That is how you have access to WP functions and capabilities.
But again I HIGHLY DISCOURAGE IT. Find another way, create a simple plugin and activate it, in which you put that php file's code, or if part of a theme, just create a new page template with a different header, that you can call with get_header('name_of_header_without_php_extension') or a new footer called the same way but with get_footer().
There are alternatives, maybe if you share what you are trying to achieve, we can guide you to a better, safe solution.
Based on theme it's defer.
Same time define as get_header(),get_footer()
But now latest themse assign particular theme name based header & footer function
Ex: Theme Name is "Demo"
So the header function assign as Demo_get_header() or get_header_Demo()
Dashboard ->Appearance ->Editor -> in your Template file or in page.php write
<?php get_header()?>,<?php get_footer()?>
if you want to use different headers on different pages
1. create new file , name it header-example.php
2. you can call this header in any page using code
Good morning. I've two document CCS, one contain Material Design Lite CSS and other is been created by me for customize WP-login.
I'd ask if it's possible write some classes written in Material Design Lite CSS in one class created in my customize WP-login CSS?
Cause for customize WP-login I can't modify his HTML, so I can modify this file by creating another CSS and overwriting class of original WP-login CSS.
Add the following code to functions.php to have WordPress load your new stylesheet.
function custom_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login/login-styles.css' );
}
add_action( 'login_enqueue_scripts', 'custom_login_stylesheet' );
Now any CSS you add to this stylesheet will be loaded for the login page. This enables you to change any part of the design to your liking.
You can refer this alos: https://torquemag.io/2016/08/customize-wordpress-login-page/
Hope this works for you.
i want to hide few plugins style sheets to reduce load on our Index page and categories pages. Actually we want to display plugin style sheet only on Post not on other pages.
we have used following code in plugin, but it doesn't work. please help how to use it.
if( is_single() || is_singular('post') ) wp_enqueue_style('savrix-style.css');
If you are modifying your own plugin I see no reason your code wouldn't work. The is_single() condition is not needed, and will result in the stylesheet being loaded on custom post types and other singles that you don't intend.
However your wp_enqueue_style call is incomplete, so unless you have a wp_register_style call somewhere else defining the handle and URL of the stylesheet you need to change it to something along these lines:
if (is_singular('post')) {
wp_enqueue_style('savrix-style', plugins_url('savrix-style.css', __FILE__);
}
However, I get the impression that you are actually trying to remove a stylesheet included by a thirdparty plugin. It is generally a bad idea to modify a third-party plugin, as your modifications will be lost on the next update... it is very difficult to maintain that sort of modifications in the long run.
Instead make a new plugin and modify whatever you need from there.
What you want to achieve can be accomplished by:
Create a new folder in the wp-content/plugins folder, fx. my_load_reducer.
Inside that folder create a new file called my_load_reducer.php
Paste this in the file:
<?php
/*
Plugin Name: My Load Reducer
Description: Removes unneeded and unwanted stylesheets from other plugins
Version: 0.1
*/
//Use a class to avoid conflicts
class my_load_reducer {
function __construct() {
//Hook into wp_enqueue_scripts with a high priority
add_action( 'wp_enqueue_scripts', array($this, 'deregister_styles'), 1000 );
}
function deregister_styles() {
//Check that current post is not a single post
if (!is_singular('post')) {
//deregister the stylesheet - this removes the twentyfifteen
//main stylesheet - obviously you need to substitute the handle
//of the stylesheet you actually want to remove
wp_deregister_style( 'twentyfifteen-style' );
}
}
}
//Instantiate the class
$my_load_reducer = new my_load_reducer();
Activate the plugin through the wordpress admin.
You can remove perticular plugin css on selected page.
below code is remove plugin css to other pages and display only on post pages:
/*disable loading plugin css to page and load on post page*/
add_action('wp_print_styles', 'my_deregister_styles', 99999);
function my_deregister_styles()
{
if(!is_single())
{
wp_dequeue_style('plugin-css-handle');
wp_deregister_style('plugin-css-handle');
}
}
where 'plugin-css-handle' is perticular plugin's css handle which you want to remove.
I have written a little PHP script that I have included via short-code into a WordPress page. Is it possible to only use a custom css file in the PHP script without it inheriting CSS elements from the WordPress theme?
If yes than how ?
Any styles included after the original stylesheet will override the previous styles (as long as they are qualified to the same level).
A better way of overriding styles would be to give your new page an ID and then in your new stylesheet you can use #NewID .cssSelectorToOverride {\*new styles\*}
This is a good article that can teach you about css selectors and precedence: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Generally if the new style file is called after the previous file it will be over wridden, or else specify the style in the tag it self if its critical in some manner.
I hope this will do, if want more assistance provide example with your work.
thank you
open function.php file inside your root directory of WordPress theme. and just insert this function PFB, just change the directory, for js you don't need to connect a separate file because you can use footer.php and insert your js code in script tag it will work accurately.
add_action( 'wp_enqueue_scripts', 'radliv_child_enqueue_styles' ); function radliv_child_enqueue_styles() { wp_enqueue_style( 'custom-css-style', get_template_directory_uri() . '/inc/assets/css/custom.css' ); } ;
You have to do two things:
give your snippet a parent div id, say "#mySnippet"
At the bottom of your css file, ad a section for #mySnippet elements. It is important to be at the bottom so it can override other properties if you must
A custom CSS files won't always work with wordpress because the platform requires a certain file structure, and if I'm not mistaken, all your css code has to be in style.css. This is why your snippet code has to be in style.css at the bottom (preferably well isolated from the rest with a comment line).
Now all the elements that you need to change would simply be preceded by #mySnippet. For example, your P tags in the snippet should be targeted as such:
#mySnippet p {
property:value;
}
This should take care of it..