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.

CommentFileSizeAuthor
#16 formalize not loading.PNG93.03 KBjazzper
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

marcoka’s picture

Status: Active » Closed (fixed)

do 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.

samwillc’s picture

Good thinking, thanks :)

Sam.

samwillc’s picture

*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.

marcoka’s picture

here custom-formalize overriding omega core formalize.css

http://screensnapr.com/v/4A4Fso.png

samwillc’s picture

Thanks 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.

deaktivate the core omage formalize.css and enable yours

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.

marcoka’s picture

yes you are right. "deactivate" would deaktivate the whole formalize.
you are right, i meant override.

samwillc’s picture

Ok, thanks for clearing that up.

Sam.

GuyPaddock’s picture

What 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:

libraries[omega_formalize][css][0][file] = formalize.css
libraries[omega_formalize][css][0][options][weight] = -20

Followed by a "Revert theme settings" and a cache clear, of course.

samwillc’s picture

I did the same but in my .info file I used this:

; OPTIONAL STYLESHEETS

css[formalize-custom.css][name] = Custom formalize styles
css[formalize-custom.css][description] = This file overrides default formalize styles.
css[formalize-custom.css][options][weight] = 9
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

Sam.

mschoone’s picture

#9 was the solution for me, thanks sam!

samwillc’s picture

Glad to help.

Sam.

gints.erglis’s picture

I prefer this solution, add this function in template.php file.

function mytheme_css_alter(&$css) {
  if (isset($css[drupal_get_path('theme', 'omega') .'/css/formalize.css'])) {
    $css[drupal_get_path('theme', 'omega') .'/css/formalize.css']['data'] = drupal_get_path('theme', 'mytheme') . '/css/formalize.css';
  }
}
fenix_75’s picture

I 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.

fenix_75’s picture

Status: Closed (fixed) » Active
hkirsman’s picture

I 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.

/**
 * Implements hook_css_alter().
 */
function YOURTHEMENAMEHERE_css_alter(&$css) {
  // Get current themes path.
  $theme_path = drupal_get_path('theme', variable_get('theme_default', NULL));

  // Make alpha-reset.css be the first css to be loaded in HTML.
  $css['sites/all/themes/omega/alpha/css/alpha-reset.css']['group'] = -9999;

  // CSS to remove.
  $exclude = array(
    //'misc/vertical-tabs.css' => FALSE,
    //'modules/aggregator/aggregator.css' => FALSE,
    //'modules/block/block.css' => FALSE,
    //'modules/book/book.css' => FALSE,
    //'modules/comment/comment.css' => FALSE,
    //'modules/dblog/dblog.css' => FALSE,
    //'modules/file/file.css' => FALSE,
    //'modules/filter/filter.css' => FALSE,
    //'modules/forum/forum.css' => FALSE,
    //'modules/help/help.css' => FALSE,
    //'modules/menu/menu.css' => FALSE,
    //'modules/node/node.css' => FALSE,
    //'modules/openid/openid.css' => FALSE,
    //'modules/poll/poll.css' => FALSE,
    //'modules/profile/profile.css' => FALSE,
    //'modules/search/search.css' => FALSE,
    //'modules/statistics/statistics.css' => FALSE,
    //'modules/syslog/syslog.css' => FALSE,
    //'modules/system/admin.css' => FALSE,
    //'modules/system/maintenance.css' => FALSE,
    //'modules/system/system.css' => FALSE,
    //'modules/system/system.admin.css' => FALSE,
    //'modules/system/system.base.css' => FALSE,
    //'modules/system/system.maintenance.css' => FALSE,
    //'modules/system/system.menus.css' => FALSE,
    //'modules/system/system.messages.css' => FALSE,
    //'modules/system/system.theme.css' => FALSE,
    //'modules/taxonomy/taxonomy.css' => FALSE,
    //'modules/tracker/tracker.css' => FALSE,
    //'modules/update/update.css' => FALSE,
    //'modules/user/user.css' => FALSE,*/
    //'sites/all/themes/omega/alpha/css/alpha-reset.css' => FALSE,
    'sites/all/modules/field_group/horizontal-tabs/horizontal-tabs.css' => FALSE,
    //'sites/all/themes/omega/omega/css/formalize.css' => FALSE,
  );

  // Get omega-visuals.css from subthemes css folder.
  if (array_key_exists('sites/all/themes/omega/omega/css/omega-visuals.css', $css)) {
    $css['sites/all/themes/omega/omega/css/omega-visuals.css']['data'] = $theme_path . '/css/omega-visuals.css';
  }

  // Get formalize.css from subthemes css folder.
  if (array_key_exists('sites/all/themes/omega/omega/css/formalize.css', $css)) {
    $css['sites/all/themes/omega/omega/css/formalize.css']['data'] = $theme_path . '/css/formalize.css';
  }

  $css = array_diff_key($css, $exclude);
}
jazzper’s picture

FileSize
93.03 KB

Hi 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

samwillc’s picture

This is a snippet of mine:

<style type="text/css" media="all">@import url("http://www.swcarrey.co.uk/sites/all/themes/omega/alpha/css/alpha-reset.css?mfmzt8");
@import url("http://www.swcarrey.co.uk/sites/all/themes/omega/alpha/css/alpha-mobile.css?mfmzt8");
@import url("http://www.swcarrey.co.uk/sites/all/themes/omega/alpha/css/alpha-alpha.css?mfmzt8");
@import url("http://www.swcarrey.co.uk/sites/all/themes/omega/omega/omega/omega/omega/omega/omega/omega/omega/css/formalize.css?mfmzt8");
@import url("http://www.swcarrey.co.uk/sites/default/files/fontyourface/font.css?mfmzt8");</style>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Bree+Serif:regular|Open+Sans:700,regular&amp;subset=latin" media="all" />
<style type="text/css" media="all">@import url("http://www.swcarrey.co.uk/sites/default/themes/custom_theme/css/formalize-custom.css?mfmzt8");
@import url("http://www.swcarrey.co.uk/sites/default/themes/custom_theme/css/global.css?mfmzt8");</style>

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.

jazzper’s picture

Hi 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

samwillc’s picture

Hi 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.