First of all, I'd like to say I really like this module. It is very easy to use. The only request I have is to remove all !important in the CSS. I don't want to remove it myself, in the module I download, because it will be erased when I update the module for future use. This way I can edit the style of the output in my CSS and never have to edit itweak's CSS. I only ask this because (mainly) the grey borders won't match the design of the site every time. In addition, if ayone knows a simple CSS trick to remove the gray borders or even to override them, please let me know! Thanks!

Comments

iva2k’s picture

Title: Styling itweak » Remove !important from itweak_upload.css
Status: Active » Postponed (maintainer needs more info)

!important was added to "break through" the theme CSS's that are loaded after ITU CSS. Need some other (clever) way to achieve that. Just counted invocations - !important is used about 60 times. That would be a lot of work to remove all of them and re-test with major themes. Maybe you can identify specific cases (line numbers) that you need removed?

iva2k’s picture

Also, did you try using "!important" in your custom CSS in the theme? That will work to override the override.

justins2n’s picture

Oh, ok. That makes sense. First of all, I appreciate the response! I tried using "!important" in my custom CSS and for some reason it wasn't overriding iTweak's CSS. The main cases would be the "table.itu-attachment-list tbody", really anything with "tbody". Again, thanks for your help on this.

iva2k’s picture

Status: Postponed (maintainer needs more info) » Active
iva2k’s picture

Status: Active » Fixed

I went through the tbody styles, and there are 3 uses of !important of concern. I removed those and tested with couple of major-use themes, and this is a no-go. Themes have some blanket styling that applies to all elements. iTweak Upload, being a module, has its css loaded before the theme's css, so theme overrides these styles. So I can't remove !important from the module. The workaround is to use !important in theme's local.css (or similar user-customized file). I added comment to itweak_upload.css (in 6.x.-2.x-dev), and consider that as the fix.

markhalliwell’s picture

Status: Fixed » Needs work

Actually this is a very critical issue. You should rarely use !important in CSS unless it's absolutely necessary. It is the theme's job to provide styling, not ONLY the module. The module should provide defaults of course, but the theme should be able to override them by simply redefining any CSS the module uses (and not needing to also define !important to override your !important). This is an extreme overuse of !important! You don't need it. You have already defined custom classes and IDs, which take precedence over the the core CSS (http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/).

I can understand the need for positioning importance. Which would be acceptable as you are essentially modifying the structure which usually doesn't impact a theme on a grand scale. However, when you start messing with colors/backgrounds that's a no no. It's the themes job to provide coloring.

For example:
You override the backgrounds of the table rows. Many themes prefer to keep the striping as it helps differentiate between each row. That being said, you can simply easily add an option to remove zebra striping for your module. A simple check box that the site can configure. And then all you'd have to do is simply pass an extra class of nozebra to each row if it's disabled. Many themes provide (even Garland, which most themes are initially based from) this class and theme the class appropriately. Garland's is:

tr.nozebra {
  background: none !important;
  border: none !important;
}

All this being said, I also have some improvements that I have added to my theme that you might consider:

/* This was to simply undo your styling, because this should be handled by the theme */
#upload-attachments {
  border-collapse: collapse !important;
  border-spacing: 0;
  margin: 1em 0;
}
/* Ensure that the icon/preview is a set width/height for row */
#upload-attachments .mime {
  width: 50px;
  min-width: 50px;
}
/* Ensures that each file has the same height regardless of how long the file URL is */
#upload-attachments .file {
    display: block;
    height: 40px !important;
    overflow: hidden;
    position: relative;
    width: 90%;
}
/* Ensures that the details is horizontally scrollable (with-out a scrollbar visible) if wider than the width of the page */
#upload-attachments .file .details {
  display: block;
  position: absolute;
  left: 14px;
  right: 0;
  height: 40px;
  overflow-x: scroll;
  white-space: nowrap;
}
/* Ensure that the grab handle's width is appropriately spaced and is large enough to grab */
#upload-attachments td:first-child {
  margin: 0;
  padding: 0;
}
#upload-attachments td:first-child a {
  margin: 0;
  padding: 15px 10px;
}
/* Ensure that the asterisk doesn't give the row height */
#upload-attachments .tabledrag-changed {
  position: absolute;
  left: 5px;
}
iva2k’s picture

The goal of the module is to work out of the box. Advising users to edit their theme during installation is too steep and against that goal. Once they into themeing, they can use !important in their customizations - they are totally allowed to do that as they wish or need.

On the general discussion: As I said, I put !important only when I had to struggle with blanket styling of a couple of major themes (to be specific - Garland, Acquia Marina). Custom classes did not help because I had to maintain certain standard classes, and CSS works based on load order which I don't have control between module and theme.

As for the zebra, solution proposed in #6 (to pass nozebra into the table classes) is a no-go since it will remove ability to re-paint zebra on that table in custom css.

To reiterate, I will review a patch and if it passes the following criteria, I will commit it:

  • work out of the box with few major themes (Garland, Acquia Marina)
  • Completely maintain current look with these themes
  • Allow normal restylings (including standard ones like zebra)
iva2k’s picture

Status: Needs work » Postponed (maintainer needs more info)
iva2k’s picture

Priority: Critical » Normal
Status: Postponed (maintainer needs more info) » Fixed

No activity for over 4 weeks - closing. Please reopen with additional information as suggested in #7 if you have a patch.

holydrupal’s picture

I have checked itweak css with CSS3 validator and found this issues:

4	 a.itu-insert-file	 Property -moz-border-radius doesn't exist : 4px 4px
4	 a.itu-insert-file	 Property -webkit-box-shadow doesn't exist : -2px 2px 2px 0 #c8c8c8 -2px 2px 2px 0 #c8c8c8
4	 a.itu-insert-file	 Property -moz-box-shadow doesn't exist : -2px 2px 2px 0 #c8c8c8 -2px 2px 2px 0 #c8c8c8
4	 a.itu-insert-file	 Parse Error [empty string]
4	 table.itu-attachment-list	 Parse Error ;*border:1px solid #DDD !important;
4	 table.itu-attachment-list	 Parse Error ;}
4	 table.itu-attachment-list.withstats thead	 Property text-wrap doesn't exist : none none
4	 table.itu-attachment-list.withstats thead .preview, table.itu-attachment-list.withstats thead .file	 Parse Error opacity=0)
4	 table.itu-attachment-list.withstats thead .preview, table.itu-attachment-list.withstats thead .file	 Property -moz-opacity doesn't exist : 0 0
4	 table.itu-attachment-list.withstats thead .preview, table.itu-attachment-list.withstats thead .file	 Property -khtml-opacity doesn't exist : 0 0
4	 table.itu-attachment-list .file	 Parse Error ;*width:auto;
4	 table.itu-attachment-list .file	 Parse Error ;}
4	 table.itu-attachment-list .download_last	 Property text-wrap doesn't exist : none none
4	 table.itu-attachment-list .size	 Property text-wrap doesn't exist : none none

Status: Fixed » Closed (fixed)
Issue tags: -CSS, -style, -border

Automatically closed -- issue fixed for 2 weeks with no activity.