Hi everyone,
I wanted to change the default look of formalize. I like the idea of it making forms look similar when using different devices but there was a couple of things, namely the height:1.8em part of the css.
I wanted a bit of extra spacing and adding padding conflicts with height:1.8em making the text unreadable. Could I set this to height:auto, and then add padding:5px? I don't have a bunch of devices to test this on.
I also wanted to change border-radius:0 to border-radius:5px, just to take the hard edges off. I can't just copy the part of the code from formalize and stick it in global.css either as
I am unsure on how this would affect the form on different devices. Any thoughts would be very much appreciated. Thanks.
Sam.
Comment | File | Size | Author |
---|---|---|---|
#16 | formalize not loading.PNG | 93.03 KB | jazzper |
Comments
Comment #1
marcoka CreditAttribution: marcoka commenteddo the following.
copy the formalize css into your custom theme and name it formalize-custom.css and add it in the info file too. deaktivate the core omage formalize.css and enable yours. then make changes in your file
dont hack the core formalize.css.
Comment #2
samwillc CreditAttribution: samwillc commentedGood thinking, thanks :)
Sam.
Comment #3
samwillc CreditAttribution: samwillc commented*edit* sorry, forgot to say, formalize is more than just a stylesheet though, it is a library (css and js) which includes the stylesheet. You can't disable only formalize.css through the settings page without disabling the whole library.
Or did you mean another method when you say 'deactivate'?
i.e. Layout configuration > Tab (toggle styles) > formalize.css is not in this list
Layout configuration > Tab (toggle libraries) > Enable optional libraries > formalize check box (yes/no) - this enables the whole thing, or enables the whole thing, doesn't just affect the stylesheet.
I have so far had to just override a few things by having a stylesheet that loads later than formalizecss. Bit of a backward way of doing things though. If I don't need the original stylesheet, it shouldn't be there.
Thanks,
Sam.
Comment #4
marcoka CreditAttribution: marcoka commentedhere custom-formalize overriding omega core formalize.css
http://screensnapr.com/v/4A4Fso.png
Comment #5
samwillc CreditAttribution: samwillc commentedThanks but I know how to override css styles and where to put the custom one in order to 'override' css loaded in a previous stylesheet. What isn't clear is why you say 'deactivate'. What exactly do you mean by that? If you deactivate formalize library (i.e. uncheck the checkbox on settings page) then the stylesheet is also deactivated.
What I'm saying is that you can't deactivate formalize.css without deactivating the whole formalize library which includes formalize.css.
If you just mean overriding the stylesheet then that makes more sense.
Thanks,
Sam.
Comment #6
marcoka CreditAttribution: marcoka commentedyes you are right. "deactivate" would deaktivate the whole formalize.
you are right, i meant override.
Comment #7
samwillc CreditAttribution: samwillc commentedOk, thanks for clearing that up.
Sam.
Comment #8
GuyPaddock CreditAttribution: GuyPaddock commentedWhat worked for me was to copy "formalize.css" from the base theme into the "css/" folder of the custom theme, and then adding the following to the info file:
Followed by a "Revert theme settings" and a cache clear, of course.
Comment #9
samwillc CreditAttribution: samwillc commentedI did the same but in my .info file I used this:
Sam.
Comment #10
mschoone CreditAttribution: mschoone commented#9 was the solution for me, thanks sam!
Comment #11
samwillc CreditAttribution: samwillc commentedGlad to help.
Sam.
Comment #12
gints.erglis CreditAttribution: gints.erglis commentedI prefer this solution, add this function in template.php file.
Comment #13
fenix_75 CreditAttribution: fenix_75 commentedI tried solution #9. Cleared caches. Tried different weights but my custom css is still always loaded before the standare formalize. Not sure where to go from here.
Comment #14
fenix_75 CreditAttribution: fenix_75 commentedComment #15
hkirsman CreditAttribution: hkirsman commentedI also prefer #12 because I need even more customization and putting them all in one place is convenient. Here's an example that reorders alpha-reset.css as the first css to be loaded on page, removes horizontal-tabs.css and loads omega-visuals.css + formalize from subtheme's css folder.
Comment #16
jazzper CreditAttribution: jazzper commentedHi Sam (or anyone else),
Thanx for posting this (#9). But somehow the custom stylesheet doesn´t get loaded when I look at "view page source" in my browser (the global.css does). See also png attached.
- I copied the formalize.css file to the css folder of my subtheme and renamed it to formalize-custom.css (also tried to rename it to formalize and also make this change in the .info file).
- I copied the first 3 lines of the code in your post and put them in the .info file of my subtheme (above the code for global.css) (also tried to add '' after te = sign, so '9' instead of 9 etc.).
- I "revert theme settings" in my subtheme (http://www.sawangwap.com/#overlay=admin/appearance/settings/sawangwap).
- cleared all caches.
Somehow the formalize.css from omega gets loaded and the custom one doesn´t.
Am I missing something? Is there another step I should perform?
I googled and looked here at the drupal site but I'm clueless as to why this isn´t working for me.
Any help would be much appreciated!
Jasper
Comment #17
samwillc CreditAttribution: samwillc commentedThis is a snippet of mine:
You can see my formalize-custom.css (weight=9) loads just before global.css (weight=10). It seems odd that yours doesn't.
Do your other subtheme stylesheets load ok? i.e. custom-theme-alpha-default-narrow.css, custom-theme-alpha-default-normal.css etc...
They should be in the same folder as your formalize-custom.css. You seem to have done everything right so not sure why it's not loading.
Sam.
Comment #18
jazzper CreditAttribution: jazzper commentedHi Sam,
Thanx for taking the time to answer. I just figured out what the problem was.
Under: Home » Administration » Appearance » Delta: Toggle styles
I had to select the custom stylesheet .... Now the stylesheet is loading exactly as it should:)
Jasper
Comment #19
samwillc CreditAttribution: samwillc commentedHi Jasper,
Sorry for the late reply! I don't seem to get much time for the Drupal forum these days, glad you got it working :)
Sam.