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.
Related
I recently started using Drupal for a new website I am trying to build. Front-end is normally what I focus on and I'd use external services to integrate backend functions. In this (and potentially from now on) I want to start using Drupal. Now, I have installed a bootstrap module and want to start adding own css from there but I can't seem to figure out how/where. I can't do it straight into the bootstrap style files so I - apparently - need to create my own theme and place css files in there. This is what I have done so far:
1: Have my css file with the code.
2: Created a new folder next to the bootstrap folder in sites/all/themes.
3: Put the css file in there.
4: Created an my_theme.info file.
But it is not resulting in any changes on the website (it also does not show up in the source code) most likely because it is not being called by Drupal. How can I make sure Drupal calls my css code?
Thanks in advance and take care!
Assuming this is DRUPAL 7 (Drupal 8 uses yaml)
Create a subtheme of the theme you choose.
In the YOURTHEME.info you add a line like stylesheets[all][] = css/style.css
In YOURTHEME/css directory, here you can start writing your css rules in the file style.css
Make sure caching is off or else you will not see your css being updated.
I've been having trouble implementing templates bought in themeforest in a meteor app.
I'm wondering, what would the best way to implement a template into a meteor app.
Two ways that I think of right now are:
(Tedious way)
Place javascript in Compatibility folder and try to name them in specific alphabetic order in order to get them to work properly.
Place css in client/lib folder and try to name them in specific alphabetic order in order to get them to work properly.
Place fonts and images in the public folder.
The second way (I haven't tested it yet) is to place the template files in the public folder and just link them manually (the old/non-meteor way) in the index.html file.
Now I'm not sure if these are the correct ways to do this and I would like some information regarding this issue.
Thanks!
I've done this myself with a themeforest theme.
Put the theme's css file under /client - it doesn't need to be in /public
Use the class names your theme uses in your templates. Typically a theme will have 3x what you really need so this ends up being much less work than it might seem. If your theme is built on bootstrap then it's even easier.
My theme used fontello a lot for icons, I had to recreate the folder hierarchy under client/fonts and then make sure the cross-references were correct.
Typically themeforest themes don't use js that much, I completely ignored all the js that came with my theme and created what I really needed in Meteor.
How to use a free bootstrap template (e.g., from startbootstrap.com) in meteor. I mean where the resources- html file, css folders and js folders of the free template should be put and what packages are needed to add/remove in meteor project file? I have tried it several times but got errors and the program crashes each time. I also transfer the script and link tags from section to section, but it did not work.
Just add the css of the template to the client of your Meteor project. Also, try using the nemo64:bootstrap package for Bootstrap. This will add some files to your project automatically, one of which will say is editable at the top. You can put your custom css in that file.
You can put the relevant html, css, and js files anywhere on the client. (Sticking it inside a folder called client will do that).
Image and font files should go in a folder called public.
You will need to make meteor templates from the HTML files. As is they will be missing any <template name="foo"> tags.
The css files can go anywhere under /client and they will automatically be added to the project. These are the easy ones.
The js files are the harder ones. If you put these under /client they will be wrapped by Meteor and will not have global scope. In all probability they won't work at all. You can put them under /public and modify your head.html file to include them to get around that problem. Odds are there won't be very many js functions in the free template anyway so you might want to read through them and see which ones you really need and then convert those to be proper template helpers or global functions on the client.
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.
We have a ASP.NET solution using images, css and .skin files with in the App_Theme/{selected theme}. The themes today contains many, many files and images and for a customer theme we add a new folder to the App_Themes and copy all files to the new folder and make the 10-200 changes on images, skin and css's.
The issue here is that the default theme, the one we normally have when we develop, evolve's and grows making theme customer theme out of date. So when an upgrade comes we have to go through all files looking for changes and hopefully finding them all. Sometimes we miss things that are really important.
The perfect solution would be to have a base theme that contains the base css, skin and images. And when we add a new customer theme we only tell the system what has been changed, what css-selectors to override and what images to use instead of the images from the base theme. In my understanding, if using the normal ASP.NET theme functionality in App_Themes folder, you can only have ONE theme and not a BASE theme and then say a DeliveryCustomer-theme that has a different background and some other images that the solution shall use instead of the ones in the BASE-theme.
Does anyone have some guidelines to solve this in a maintainable way for the future. I seen that people override the App_Theme path to make it work with custom skins.
thanks!
Use the concept of a base theme like you described. Pull out all common CSS rules into another file, let's call it base.css.
Take base.css and all the images that are common, and put them in a folder outside of App_Themes, and just include the CSS file like you normally would any other on your master page.
<link rel="stylesheet" type="text/css" href="/styles/base.css" /> <!-- Note this isn't in app_themes -->
Then, make sure your CSS files in various themes only specify the delta for your styles.
Ok, so here is how I'v done it know.
I have created a Default theme that is the original theme with all the css-files, skin-files and images that is needed, and that is alot. This theme is in the App_Themes folder. Them I'v created a new folder called ThemeSkins next to the App_Themes folder. In this folder I have all the new skins in different folders. The folders name is the name of the new theme that one want's to have. In each of the skin folders there are css-files that contains only the selectors that I want to overload. There is also images that I want to replace.
I have created a ThemeCreator tool that does three things:
Remove all themes except the Default theme in the App_Themes folder. This is to only have one main theme to work on for the developers. There will still be work that needs to be done in the ThemeSkins, but the overall work load will be minimal.
Next the tool looks at the folders that is in ThemeSkins and creates a folder under App_Themes for each skin with its name. Then it copies the Default theme into all the new skin folders that it just created.
The last thing is that it will merge the skin specific files into the newly created skin under App_Themes and let the user know what files were added just for information. The tool adds a prefix, "z_", on all css-files so that these are loaded last of all css-files and there for will overload the default selectors.
The thing that remains is to update the skin-files, so far, no customer has needed changes in these files. But when they do, I guess I just add a skin files and have to update the default in a automatic way since the skin-markers can't be overloaded as css-selectors can.
This works really smooth and gives us a nice and lean way to work with skins on our themes.
Any one got a better idea how to get the same result? the major issue using ASP.NET themes are that you can't use a default theme and then just apply skins to it without using the shape and color attribute in the skin-files. This is not recommended as the skin files will copy out all attribute to all the places that they are needed in the markup and not just reference them as css-classes do.