Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Hi, thanks for this great project. I'm Omega and Delta now for my first time and is really powerfull!
But since I'm not a coder I want to know if the follow feature is possible and how can I do that.
In my Omega subtheme (Drupal 7, html5) I want to add some custom css files (that I have in sites/all/themes/my-omega-subtheme/css) with color definitions and turn on or off (like the css files you provide) in order to "active" some scheme of colors, etc. If that possible??? I know with skinr something like that is possible... but without add the sknir module?
Thanks in advance!
Comments
Comment #1
himerus CreditAttribution: himerus commentedI'm about to get on my flight for Drupalcon. This answer will take a little explanation... but YES... it is completely possible....
For now, you can take a glance in the omega base theme in omega/omega/inc/default-theme-settings.inc for how to add the form elements to the settings for the CSS section, and then look in omega/omega/preprocess/preprocess-html.inc as to how the are added "on the fly" depending on the setting available to the administrator.
I'll put this a lil more in depth when I get a chance, with an example of adding one in a subtheme of Omega.
Comment #2
khiustin CreditAttribution: khiustin commentedThanks!
Searching in the Omega settings files I was capable to output the form with my custom css in the admin section of the subtheme, copying and pasting one bit of the forms and changing css definitions but I could not link this with the real css file. I'll trate again with your advice but a future complete example would be great.
Take a good flight and better DrupalCon!
Comment #3
himerus CreditAttribution: himerus commentedI will be adding this item to the new Omega Documentation soon as well... it's definitely a valid item... and will also show how to disable a user/client from disabling some of the CSS options as well (which could break layout in many cases once a site is fully built).
Comment #4
Argus CreditAttribution: Argus commentedPerhaps also for 7.x-3.0
Comment #5
brunodboFor 3.0, you can add custom CSS files to the 'Enable optional stylesheets' page through your subtheme's .info file:
- Create the CSS file and drop it into your subtheme's /css folder
- Add the following lines to your subtheme's .info file (replacing 'name.css' with your CSS file name) to add the option on the optional stylesheets page:
Comment #6
dooug CreditAttribution: dooug commentedWhat is recommended in the case that you want to add a stylesheet to your theme that is in a different folder from the css folder? For instance, I have a fonts folder that includes some webfonts. How would I include those stylesheets?
I had to move my fonts folder into the css folder and add the stylesheet in the .info file :
Comment #7
rwilson0429 CreditAttribution: rwilson0429 commented@dooug, If I understand correctly, you are not trying to toggle styles on/off, you just want to add style sheets located outside of the theme folder. If that is correct, have you tried adding a css @import directive to your global.css file or the last style sheet loaded as a linked style sheet from your sub-theme folder? Maybe something like:
@import url('fonts/font-name/stylesheet.css'); would work for you.
For it to work, the import directive must be the very first thing in the linked style sheet. It must be placed even before any comments that are in the file.
Comment #8
marcoka CreditAttribution: marcoka commentedok i had that question myself and asked fubhy. the way to add sytles is like bronodbo says.
what douugh says is not possible yet.
just create your subfolder structure inside /css like css/fonts css/foobar. then you have a structure too.
i think this is a minor issue as you can do your structuring in the /css and there are much more important tasks.
Comment #9
rainbowtux CreditAttribution: rainbowtux commentedAfter this, you still have to enable the CSS file!
Go to appearance > Settings> Toggle Styles > and there you can enable the new css
Comment #10
frikino CreditAttribution: frikino commentedi have add manualy CSS file in CSS folder of Omega thème, its ok work.
but why its complex when i need oepen .inof file and add:
css[menu_verti.css][name] = 'menu vertical'
css[menu_verti.css][description] = 'mise en forme du menu vertical'
css[menu_verti.css][options][weight] = '13'
Why no setting option in drupal "omega" setting to ADD CSS file automaticly, its better i think for all news futur user.
And when u have copy/past new css code for generate File, automatique activate "appearance > Settings> Toggle Styles >" this new CSS file.
Sry for my low english, and thx all for contributions and if it's possible, add this setting to next upgrade of OMEGA (love this project)
Comment #11
Katy J CreditAttribution: Katy J commentedThanks for this thread, exactly what I'm after. I have some files to add for my webfont from myfonts.com. It's a folder (let's call it 'webfonts'), inside is MyFontsWebfontsKit.css file and another folder with the font files in.
Looking at what e-anima says, I have tried putting the whole webfonts folder inside mytheme/css. I've then added the following lines to my .info file:
css[webfonts/MyFontsWebfontsKit.css][name] = 'Webfonts CSS'
css[webfonts/MyFontsWebfontsKit.css][description] = 'Webfonts CSS'
css[webfonts/MyFontsWebfontsKit.css][options][weight] = '11'
I've tried it like this: [webfonts/MyFontsWebfontsKit.css] and like this: [MyFontsWebfontsKit.css]. The stylesheet appears in the UI at appearance/theme/settings/toggle styles but nothing is happening and when I view the page source I'm not seeing the css file being called.
Any help about the best way to do this will be really really appreciated. Thanks.
Comment #12
Katy J CreditAttribution: Katy J commentedUPDATE/HOW TO ADD MYFONT FILES TO OMEGA:
See above, and the answer was to place the MyFontsWebfontsKit.css file and the webfonts folder containing the fonts loose in the css folder (mysubtheme/css) and then find where it says this in the .info file:
css[global.css][name] = 'Your custom global styles'
css[global.css][description] = 'This file holds all the globally active custom CSS of your theme.'
css[global.css][options][weight] = '10'
and add this underneath:
css[MyFontsWebfontsKit.css][name] = 'My webfonts'
css[MyFontsWebfontsKit.css][description] = 'My webfonts'
css[MyFontsWebfontsKit.css][options][weight] = '11'
Comment #13
jday CreditAttribution: jday commentedI've added these three lines to my theme's .info file:
css[products.css][name] = Your custom products styles
css[products.css][description] = This file holds all the product page CSS of your theme.
css[products.css][options][weight] = 12
on the config page it shows it as:
(all) - products.css] css
If I check it and save, it says:
An illegal choice has been detected. Please contact the site administrator.
I'm guessing it is that closing bracket causing the problem, but I don't know where that is coming from.
Comment #14
LeDucDuBleuet CreditAttribution: LeDucDuBleuet commented@ jday
You simply forgot to inclose your text with ''
I bet this will work :
css[products.css][name] = 'Your custom products styles'
css[products.css][description] = 'This file holds all the product page CSS of your theme.'
css[products.css][options][weight] = '12'
Comment #15
gchalker@princeton.edu CreditAttribution: gchalker@princeton.edu commentedIf you are using Adaptive Themes you simply enable them in admin/appearance/extensions tab. Check the enable Custom CSS checkbox.