I need to theme my lightbox. I can see the HTML generated by the JavaScript code in lightbox.js, but I cannot overwrite that file, or I will lose my changes when I update the module. Is there any better way to override a theme output?
You didn't report for which Drupal version you are interested; the answer I am giving is valid for Drupal 6, but few things would change for Drupal 7.
Lightbox2 uses a template file for its output. If you create a custom module that implements hook_theme_registry_alter() to use a different template file, then you can use a template file that uses a JavaScript file you wrote.
can you not theme it just by changing the CSS?
In your theme's .info file you can override the module's css and/or js and then you copy the css or js file from the module into your own theme folder, (every theme should have a .info, if not create one) - this means you don't touch the actual contrib modules files
Drupal will then use the one from your theme, which you can edit to your hearts content, and if you do hit problems you just remove the entry from the .info file and it will then go back to using the original module filea.
I haven't done it for JS but I believe the process is the same as for CSS and here is a snippet of what's in my .info file - btw I think once you use this method of overriding you have to declare the default style.css too
stylesheets[all][] = style.css
stylesheets[all][] = lightbox.css
Update:
It's only possible to use the .info file to override JS in D7, but there is module JSAlter which might help with D6
Related
I'm using the Saturn Site theme from Grav (https://getgrav.org/downloads/skeletons) and want to change the background image of the home page (and eventually other styles). In the theme's custom CSS (user/themes/saturn/css/custom.css) I changed the background image, but the new image is not rendered unless I update both custom.css and custom.min.css.
I believe it is inappropriate to change both files; the system should generate a new version of the minified CSS. Reading the Grav docs (https://learn.getgrav.org/themes/asset-manager) I discovered that Grav provides
an Asset Pipeline that can be used to minify and compress assets to reduce the number of browser requests, and also the overall size of the assets.
How do I run this pipeline to update/minify the theme's CSS? Or do I need to install a separate CSS minifying tool?
Additional information:
My user/config/system.yaml file includes this:
assets:
css_pipeline: false # The CSS pipeline is the unification of multiple CSS resources into one file
css_minify: true # Minify the CSS during pipelining
css_rewrite: true # Rewrite any CSS relative URLs during pipelining
Grav only minifies the files which are loaded in the theme.
According to https://github.com/getgrav/grav-theme-saturn/blob/develop/templates/partials/base.html.twig, custom.min.css is the loaded CSS file, so Grav will minify it, not custom.css.
You have 3 solutions:
Edit the line in base.html.twig
{% do assets.addCss('theme://css/custom.min.css') %}
to
{% do assets.addCss('theme://css/custom.css') %}
then you can add anything you like to custom.css and Grav will minify it for you.
However if you do this, your change in base.html.twig will be lost when you update the theme.
You just add you CSS to custom.min.css and you don't need to minify it at all (although its name is *.min.css), Grav will help you minify it. This way your changes in custom.min.css will still be lost when you update the theme.
Create a child theme of this theme, override base.html.twig and apply the first or second solution above. This way your change will not be lost when you update the theme. However this requires Grav development skills.
While in the root directory of GRAV try running bin/grav clear. That should update the minified CSS file as well.
Can't style my menu css,i tried to change in master-ccda(my site www.blobus.on.kg)It helps for 5 minutes than changed back.Please help me to find place where i can change it.
You use a rocketheme/gantry template. Your website has compression/caching enabled for the css. This is enabled either by the template settings or another compression/caching system plugin. Therefore what you get as a final css file, is a dynamically generated compressed css file. Any edits you are doing on this file are getting lost, as soon as the system will generate a new final master.css file.
You need to disable these functions while you are building your website. Doing so will stop the compression of all the css files into one and you will see what rules and from which files your menu and other elements/sections of your website inherit their styles.
In addition keep in mind that it is best to avoid making changes on the core files of your template/extensions.
Gantry templates allow you to create a custom css file where you can put your own css overrides.
The custom css file need to be place inside the css folder of your template and usually needs to have a name of this convention: rt_templatename-custom.css.
I was able to create a Wordpress theme that I am working on, using my local machine. The issue I am having is incorporating Sass into the Underscores Starter theme, with Twitter Bootstrap's Sass and Wordpress.
I was creating the fixed-top bootstrap navigational bar. I managed to add the proper code to include WP_Walker_Nav in my functions.php file, but this is what my navigation looked like My Bootstrap Nav.
The content is too close to the fixed-top navigation and I wasn't able to control the body tag styles to provide padding of at least 60px from the top.
I was wondering if someone can guide me in the direction on how to incorporate Twitter Bootstrap's Sass and Font-Awesome's Sass into Underscore's Wordpress theme.
I'm struggling with the proper workflow. For my Wordpress default style.css, all I would do is put
#import url("css/style.css");
underneath Wordpress Stylesheet default comments.
I have a folder labeled sass (for all my scss files) and a folder css (for all my compiled css). In my style.scss, I import bootstrap and font-awesome's sass files, and I create a separate scss file (main.scss) to use for my custom styling, but nothing works when I create a variable in my main.scss file.
I would set my style.scss file like this:
#import 'main';
#import 'bootstrap-sass';
#import 'font-awesome';
For example:
$padding10: 10px;
body {
padding-top: ($padding10 * 6)
}
nothing happens when I set up my body tag. Please tell me what I am doing wrong, any help is appreciated. Thank you!
For those wondering about how to do this: the _S Underscores theme added direct support for generating a starter theme with a sass-based architecture last year, which I only recently found out about. If you click the “Advanced Options” link on the Underscores main page, you can then select the _sassify! option and you’re on your way. From there, it should be clear to you how to wire in Bootstrap. The generated sass/styles.scss file in your new theme is a very well organized and documented list of imports, to which you can add Bootstrap however you wish (via Bower, direct download, whatever).
As a side note, you can automate this and make it even easier via wp-cli, which very recently added support for the sassify option to their wp scaffold _s subcommand, which looks something like:
wp-cli scaffold _s my-sassy-theme --theme_name="My Sassy Theme" --sassify
(Note that as of this writing, there hasn’t been a release of wp-cli with that feature; you can use it immediately, however, by installing the wp-cli nightly.)
The problem is like this:
We're trying to implement a versioning scheme for our CSS and wherever we have accessed CSS through href (like \themes\ssss\abc.css) we append this link with a build number programatically (such as \themes\ssss\abc.css?1011) so that with new build the client gets the latest css files.
The problem is coming in themes. For e.g. under App_Themes we created a theme folder with the name MyTheme; now wherever this theme is used we need the CSS for this theme to be replaced by latest build files. How to do that?
why don't you create a new theme folder on each build/deploy?
Something similar to \themes\ssss-1011\abc.css.
Add some extra hash to your css url ("#somethingnew"). You can also you tools like SquishIt. It also can minify you css/js files.
Is there a place where I can place override theme files other than a theme's folder? For example, if I wanted to override the appearance of a view's row in the same style for more than one theme without having to use more than one file.
If there isn't a generic way to do this (for any theme file), is there a way to do it for a view's theme files?
In your module, you can use hook_theme to declare a theme function or template for your view's row. This way, your single template will be used by all your themes without any special code in them. See the Theming your views in your module section in the Views's API Advanced Help page.
You could include an include_once type statement in your tpl.php file and just import the code from where ever. This way you have any number of files that refer to one.
It is not recommended though since if you move your theme folder or rename anything this can be harder. Also if you put your theme in another site you need to keep track of all of these off-theme hacks.
I think views seeks tpls inside of the theme folder. It's be nice to have something like that though.