I'm using opencart (version 1.5.1.3.1) for a client store, and am wondering what the best way to code it so I can have certain stylesheets added for certain routes.
For example, on my category page I'd like to have a different stylesheet to the default one, or one that will over ride the default styles with my custom sheet. I have use for this for more than one route obviously, and want to do this with as little edits required as possible, so as to reduce the amount of edits in the framework should I need to upgrade at any stage (and with opencart's well known random changes and bug fix releases this is quite probable)
Open catalog/controller/common/header.php
Right after the line protected function index() { on a new line put
$route = empty($this->request->get['route']) ? 'common/home' : $this->request->get['route'];
$css_file = str_replace('/', '_', $route) . '.css';
if(file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/stylesheet/' . $css_file)) {
$this->document->addStyle('catalog/view/theme/' . $this->config->get('config_template'). '/stylesheet/' . $css_file);
}
Then go to your current theme, and create a file in catalog/view/your-theme/stylesheet/ folder called product_category.css and put your styles in that. The stylesheets work off your route name except you replace the forward slash to an underscore followed by .css, ie common/home becomes common_home.css
Note that is is going to use the override method rather than replacing your default stylesheet
Related
I'm themeing a drupal site using display suite - all current versions. As you may realise, in drupal there are many ways to achieve an equivalent result. I have created a number of custom layouts in display suite. Now I want to add jquery to some of those layouts so that the jquery only loads when those layouts are displayed (as opposed to making the same jquery file load on every page in the theme).
Sure I can use something like drupal_add_js() or $form#attached etc. But what's wrong with adding a tag in my template file? What is the 'Display Suite method' for doing this - I have to believe they (Display Suite team) have already thought of this...
Thanks.
One way to accomplish this is through hook_ds_pre_render_alter(), e.g:
/**
* Implements hook_ds_pre_render_alter();
* Add custom JavaScript.
*/
function MYMODULE_ds_pre_render_alter(&$layout_render_array, $context, &$vars) {
if($vars['type'] === 'MY_NODE_TYPE' && $vars['view_mode'] === 'full') {
drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/js/my_js_file.js');
}
}
Adding the JavaScript through #attached would be preferable as it seems cleaner and is more in line with the approach taken in Drupal 8, however I couldn't find a way to do this. Display Suite seems to override hook_node_view() and adding #attached in to an implementation of ds_pre_render_alter() didn't get me anywhere. Declaring a .js file in a custom DS .inc layout file is also unfortunately not supported.
Implementing drupal_add_js() directly in a .tpl.php template file might not work as expected and seems to not be 'best practice' (see https://drupal.stackexchange.com/questions/20520/drupal-add-js-in-html-template-file).
Interestingly though in Drupal 8 drupal_add_js() is being removed entirely in favour of #attached and it will be possible to add JavaScript directly in templates, see https://www.drupal.org/theme-guide/8/assets).
I generate css dynamically using query_vars.
Right now the url of query var is http://example.com/index.php?loadcss=mycss
How can I rewrite those urls into http://example.com/css/mycss.css instead of using query string that cannot cached, it would look better to use something like I wrote above.
I have read about add_rewrite_tag, but have no idea how to use it. Can someone give me direction how to use it?
In the case of wordpress I would just use a PHP to generate the dynamic CSS.
This is the method most people are using .
See HERE or HERE or HERE for example .
You have many ways to do this technique, some of them also show style.css and not style.php on the code (actually it is only about changing header or putting php code inside the css.. )
Could you not use a str_replace() since the url will be the same for each?
$baseURL = 'http://example.com/index.php?loadcss='
$cssURL = 'http://example.com/css/'
str_replace($baseURL . 'mycss', $cssURL . 'mycss.css', $the_queried_vars);
Try out the Redirection WordPress Plugin
I am building a module that lets the administrator choose a number of optional CSS and JS files that should be included when every page is rendered.
The function hook_init seems to be the right place, but on the hook_init page it says that this is actually not the right way to do it:
To add CSS or JS that should be present on all pages, modules should not implement this hook, but declare these files in their .info file.
Does this not apply to my case, or is there a better way to do it?
That doesn't apply in your case. It only applies if the include of the CSS and JS are not conditional on anything.
My problem was aggregation if the css was added conditionally(in my case conditioned on language).
The result was the css not being loaded when aggregation was enabled.
Simply reading the documentation of drupal_add_css helped me a lot.
I had 2 options preventing this from working:
'every_page' set to TRUE because I misinterpreted it ( I actually wanted it on all pages, but only for certain languages )
'preprocess' has a default value of TRUE and it causes a css to be included in aggreation, problem being that if it is not loaded at the time the aggregated files get created, it will not be loaded at all afterwards.
Solution was: drupal_add_css(path_to_theme() . '/css/language-override.css', array('weight' => 101, 'preprocess' => FALSE));
I am creating a custom page for a dynamic site and I was wondering if there was a way to block the Default CSS (of the overall site) from affecting my custom page. Nowhere on my custom page do I call up the default .css but I DO link to my custom .css for the particular page I am working on. Some of the .css is picked up from MY CSS, while other parts are altered by the CSS for the existing site. I didn't know if there was some way to ensure that a page only answers to ONE .css page. I basically want to BLOCK the Default style sheet from affecting my custom page. I hope this isn't too wordy and confusing of a question! Thank you!
You basically have two options. One is to just download their default CSS stylesheet, make a copy of it, and for each and every style they have defined, reset it to the auto value or whatever value works for your site's design. This will be extremely tedious, and won't work if they update their stylesheet, but should work.
Another option would be to use javascript to remove the stylesheet's association with the page. As long as the URL of the stylesheet you want to remove remains constant, you should be able to do this. A quick google search found the following code to do this:
function removejscssfile(filename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
}
}
removejscssfile("somestyle.css", "css") //remove all occurences "somestyle.css" on page
Essentially, what this does is it searches the page for any stylesheets, then checks their location, and if it matches what you want to remove, removes that stylesheet. The script I found also works for javascript files.
I am trying to remove the default lightbox.js file coming from the Lightbox2 module, by using template.php, and load in my own. I would like to do this via template.php if possible, and not place this code in a custom module. I am adding my javascript file, then unsetting the module javascript file. The problem is $vars['scripts'] isn't getting replaced with the output from $js, and still outputting the module javascript. krumo($js) shows the default lightbox.js removed. Below is what I have in template_preprocess_page. Thanks in advance.
drupal_add_js(path_to_theme() . "/resources/js/lightbox.js", 'theme');
$js = drupal_add_js(NULL, NULL, 'header'); //get header js files in an array
$lightbox_path = drupal_get_path('module', 'lightbox2');
unset($js['module'][$lightbox_path . '/js/lightbox.js']); //unset lightbox default js
$vars['scripts'] = drupal_get_js('header', $js);
Alright, let's take another look at it, then.
Having just looked at http://api.drupal.org/api/function/drupal_add_js/6 a second time, I note that the lightbox code is probably in
$js['header']['module'][$lightbox_path .'/js/lightbox.js']
and not in
$js['module'][$lightbox_path .'/js/lightbox.js'].
I suggest sneaking a dpm($js) in before your 'unset' call, and then hit refresh a couple of times until it shows up, and make sure you've got the exact correct combination of $scope and $type to find the lightbox code at.
(Note: dpm() is a function provided by the devel module, which I guess I'm assuming your'e already using. If you're not, then drupal_set_message('<pre>'. print_r($js, TRUE) .'</pre>); will do as well.