I am trying to accomplish the following. I need to use Drupal 6 as a project requirement, but I want to use it with my own HTML and CSS stylesheets for each node/view/panel etc.
The problem is, whatever the theme, I always found that Drupal applies to my HTML content both my CSS stylesheets and the CSS related to the theme chosen. I have also tried, without success, using the stylestripper module (installed in sites/all/modules). No matter what I do, additional CSS stylesheets are applied to my pages, completely destroying my layout.
What is the proper way to achieve this? Why stylestripper does not work at all? Is there a completely blank theme available? I have tried basic, mothership, zen etc, but I always see additional CSS stylesheets applied to my pages.
This is driving me crazy, Drupal was chosen by someone else for its flexibility.
Thank you in advance.
<?php
/**
* Helper function to allow easy CSS excludes + includes
*/
function _phptemplate_get_css($exclude = array(), $include = array()){
$css = drupal_add_css();
foreach ($css['all']['module'] as $k => $path) {
$file = substr($k, strrpos($k, '/') + 1);
if (in_array($file, $exclude)){
unset($css['all']['module'][$k]);
}
}
foreach ($include as $file){
$css['all']['theme'][path_to_theme() .'/'. $file] = true;
}
return drupal_get_css($css);
?>
Read more at drupal.org.
Update:
The proper place to put this function, is in the template.php file of your theme. Actually in your case you need to pass an array of css filenames which you want to exclude.
The call to drupal_add_css() with no arguments passed, will provide $css with an array of CSS files which are going to be attached to your theme. So this is the right time to get in!
As you see, In the first foreach loop we simply seek the $css array for filenames which are existed in the passed $exclude array, for style deletion. And we do the same job in the second loop for style insertion. And at the end of this, we return a themed representation of all styles that should be attached to the theme making use of drupal_get_css() function. (maybe nothing in your case)
Well, Where to call this function? You can call this helper function in _phptemplate_variables() for D5 or YOUR_THEME_preprocess() for D6. As we see this in action for D6 (untested):
function YOUR_THEME_preprocess(&$vars, $hook){
// Stylesheet filenames to be excluded.
$css_exclude_list = array(
'lightbox.css',
'lightbox_lite.css',
);
// Making use of previously defined helper function.
$vars['styles'] = _phptemplate_get_css($css_exclude_list);
}
I'm sure you know how to exclude 'em all ;)
If you define CSS and/or JavaScript files in your theme's .info file using filenames that match the core files then you override them, and if your overrides don't exist then they're not included.
See the .info file for the Tao theme for an example
I don't this will work but i think just remove the following line in your theme's page.tpl.php
<?php echo $styles ?>
and then drupal will not any of its own styles..
this may be work for you.
Nitz
Related
I’m developing a custom module, but need that only in the page where I use this module add some CSS and JavaScript files, I know how to do this from template.php using a condition to specific node, but I need do it more generic, that the condition can stay in .module file, or some similar solution.
I have a little code in my .module file:
function mymodule_init() {
$url = request_uri();
$path = drupal_get_path('module', 'module_name');
if ($url == 'xxxx') {
drupal_add_js($path . '/js/animations.js');
}
}
This work very well, but I’m limiting, because I need know the URL where the module will used.
Rather than checking for the URL, you should add your drupal_add_js when you initialize the code your module will be using on a given page.
For example, if you are adding a block, you could add it to hook_block_view. If you're adding a theme template, you could do it in hook_preprocess for that theme template.
I am attempting to load a script using wp_enqueue_style following the advice on the Wordpres Codex, but the script doesn't seem to be included in the source. Is this the correct way to do it?
function load_scripts() {
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
Your action and function looks fine from here. The wp_enqueue_scripts hook should work perfectly for both stylesheets and scripts.
Have you tried echoing something out in the function to see if it's actually being called at all? I.e:
function load_scripts() {
echo "Does this output to the actual page?";
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
If it's not, you might have a problem with your placement of the code, but if you keep everything in functions.php and outside of any other scope this shouldn't be a problem.
Another thing that can cause this behaviour is if you have already registered a stylesheet or script with the same handle ("bootstrap.css" in this case). The first argument in the wp_enqueue_style() function is just a handle for internal dependency management and should be unique, try renaming it to something else and see if that fixes your problem.
Okay, first step is to ensure you are using the correct path of the CSS file.
Add the following line in the functions.php of your theme or other appropriate place.
print( get_template_directory_uri() . '/css/bootstrap.min.css' );
This should print the URL of your desired stylesheet on top of the page. Copy and paste this URL in a new tab, if it opens a stylesheet then you are good to go. Otherwise, there is a mistake in the path.
Second step is to ensure that wp_head() is being called on the page you are displaying. It can be placed in your header template or top of archives/post files etc. This function actually renders the styles and scripts on the page.
Without wp_head(), its basically useless to enque anything as you can add links and scripts manually if you know the exact paths.
Note that in admin mode there is a special hook 'admin_enqueue_scripts'. So, if there is need to load CSS in both modes, it should be done on two hooks.
function load_scripts() {
wp_enqueue_style('bootstrap.css', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
add_action('admin_enqueue_scripts', 'load_scripts');
You are trying to enqueue style on wp_enqueue_scripts hook.
Try wp_print_styles.
add_action('wp_print_styles', 'load_scripts');
Also try to register style, first.
in case you don't want to use wp_head(); in your template, you could also include your styles directly:
<link rel="stylesheet" href="<?php echo get_theme_file_uri( 'style.css' ); ?>">
beware though: wp_head() includes tons of stuff (scripts, styles,...), by wordpress itself as well as most plugins, so only omit it if you know what you're doing.
Register the style first:
function register_plugin_styles() {
wp_register_style('my-plugin', plugins_url('my-plugin/css/plugin.css'));
wp_enqueue_style('my-plugin');
}
http://codex.wordpress.org/Function_Reference/wp_register_style
Do that way. Dont try to enqueue directly. And put code into functions.php of course.
Fist confirm path of the css file is correct or not if is it a correct try with below code :
function load_scripts() {
wp_enqueue_style('load-custom-css-new', get_template_directory_uri() . '/css/bootstrap.min.css');
}
add_action('wp_enqueue_scripts', 'load_scripts');
or Go with this URL.
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
I had the same problem. Although I have implemented this many times before, I lost many hours to find out what went wrong with this.
Because I made my own themes, I had declared this file unit as “fuctions.php” (I lost the -n- letter).
So, besides all the things described above you should also consider, take a good look at the file name and confirm that is “functions.php” (not fuctions, not function etc).
This might be also the reason for you.
I had the same issue. I fixed it by hard refreshing the page with Ctrl + F5 to clear cache and the css loaded normally.
If you are protecting the directory with .htpasswd, the https call generated by get_stylesheet... will fail, and you might lose some time chasing that one.
For each node preview, I want to have little flag icons at the top representing the available translations. I have seen the language switcher code, but it outputs all the languages all the time. That is annoying because people will click their language and then find that the page is only available in English anyway (I have a site with many articles in a great variety of languages). I have seen this done though. I'm relatively new to Drupal programming. Can anyone give me a pointer?
Thanks!
Figured it out by myself, and noting it here because I know I'm not the only one with this issue.
The template I'm working off is called scaccarium, so I went to /themes/scaccarium/template.php and added the following function:
function scaccarium_preprocess_node(&$vars) {
$node = $vars['node'];
$translationlinks = array();
// Move translation links into separate variable
foreach ($node->links as $key => $value) {
if ($value['attributes']['class'] == 'translation-link') {
$translationlinks[$key] = $value;
// unset($vars['node']->links[$key]);
}
}
$vars['translationlinks'] = theme('links', $translationlinks, array('class' => 'links translationlinks inline'));
}
If your template is called something else, you should obviously go to a different folder and also change the first word of the function name. And if your theme comes with an existing _preprocess_node function, carefully modify it.
Then, I went to my template's node.tpl.php and I added
<?php if ($translationlinks) {
print $translationlinks;
} ?>
next to the title.
Then I had to clear the Drupal cache (even though caching was disabled!) in Performance > Caching in order to get this to work.
Done!
...
To add language links at the top of full nodes, I had to add another "print $translationlinks" at a different place in node.tpl.php as well, as the h3 title thing was just for node previews. Then, to remove the redundant language links at the bottom of full nodes, I tried that unset line that you see commented out in template.php - I found that it had no effect even though another website had recommended it. So what I ended up doing was using CSS for this, adding the following to my template's CSS file:
.node-links .translation-link {
display: none;
}
I hope that my experience will help someone else with the same problem.
I have a custom template for my portfolio page. However, after switching theme, it's gone because it is in my previous theme's folder.
Technically, I can copy that file into my new theme folder. However, I plan to change theme every two weeks and this becomes non-trivial. Is there a way to always have a bunch of common template files available to me no matter when and how often I switch theme? (In other words, I want to create template files that are not dependent on themes.)
Thanks!
There is, using template_redirect, which you would put in the functions.php file.
function uniquename_default_template() {
global $wpdb;
if(get_post_type() == 'posttype') : /* You could use is_single() instead of get_post_type() == '' or any type of conditional tag) */
include(TEMPLATEDIR . 'path/to/theme/file.php'); /* You could use TEMPLATEDIR to get a file from a template folder, or PLUGINDIR to get a file from the plugins directory - doesn't support HTTP requests */
exit; endif;
}
add_action('template_redirect', 'uniquename_default_template');
Hope it helps.
Up to now, I've always hard coded what page template a certain page should use, either based on the URL, or what type of node it is.
What would be really useful is if there was a way to select which tpl file to use, right there in the node edit form. This would allow the user to flick between different page layouts at will.
Does anyone know a good way to approach this problem, or a flat out solution to it?
ThemeKey will let you load a theme based on a path or other criteria. You can use other methods like utilize preprocesser functions of template.php, and hook it in with hook_form_alter and come up with a way to switch files.
I ended up adding a new vocabulary for template files (the VID for this is 2 in my case) , and then rolled this into the page preprocessor in my template.php:
function phptemplate_preprocess_page(&$vars) {
if (count($vars[node]->taxonomy)>0)
foreach ($vars[node]->taxonomy as $term)
$template = $term->vid == 2 ? $term->name : NULL;
if ($template) $vars['template_files'][] = "template-".preg_replace("/[^a-zA-Z0-9s]/", "", strtolower($template));
}
Now if I have a node in a taxonomy term called: A Green Page! it will look for template-agreenpage.tpl.php as a template file.
I was wanting this functionality as well, so I made a module to do this very thing for node templates. You can find it here: http://drupal.org/project/template-picker