Ticket #3138 (closed Bug: fixed)

Opened 12 years ago

Last modified 7 years ago

Inserting icons in CSS to improve pure css customizing ability

Reported by: tvon Owned by:
Priority: trivial Milestone: 2.1
Component: Templates/CSS Version:
Keywords: Cc:


Some templates insert images for content type icons, such as folder_contents.pt with its item/getIcon usage. It might be desireable to remove the img tags and instead set add a class to the item shown with the icon, such as class="folderIconSmall" or class="documentIconSmall", which could then be used to set the icon in CSS. This would make allow more complete control of the design with nothing but CSS.

The places I have in mind for this include folder_contents.pt and portlet_navigation (assuming it gets an overhaul someday soonish), though I assume there are other places this could be applied.

Change History

comment:1 Changed 12 years ago by limi

The problem is - it doesn't work in IE. You get horrible flickering icons on hover, try it. If you have a solution to this problem, I'm all ears ;)

comment:2 Changed 12 years ago by eaon

it works in ie, you just have to use a wrapper, and we were actually planning this for a few months. i even think we're already using that, so there's no need to be worried.

and just a note: the naming standards say generalize it so use classes called .visualIcon*

comment:3 Changed 12 years ago by limi

There *is* a need to be worried when we introduce meaningless markup to do simple icon substitution.

comment:4 Changed 12 years ago by eaon

we've introduced .visual* classes (which are _all_ irrelevant for the actual information) for two reasons: workarounds (like this one) and flexibility.

a span with a class is *much* better than an image with alt="" (which breaks wai-a if you're quite strict in interpreting things as they are in the specs.) because the span doesn't provide any information except the visual one, but it's not meant to in this case. an image is content and this isn't, it's just a visual helper.

oh and it's less markup too ;)

comment:5 Changed 12 years ago by arnia

As far as I can see it, there is no problem with 'meaningless' markup if we use semantic namings (as opposed to the .visual 'generated' set). There is a way to do icons by using .contenttypeMyType classes on certain links pointing to content types and these classes can also be used elsewhere on the page to do things such as per-content-type layouts. I think this is 'meaningful' as opposed to 'meaningless'

As always, the answer is to avoid snap judgements of an idea and spend time discussing things. This idea for using CSS to replace the icons is an old one, and I hope that a consensus is reached soon so we can actually write it in. Its mostly just a tedious replacement of the old img tags and its a matter of finding a few spare hours to do it. But I can say that I consider it most definitely on the roadmap.

comment:6 Changed 12 years ago by limi

Maybe for 2.1, if we can find the time.

comment:7 Changed 11 years ago by Anonymous User

The ground work is done, examples in folder_contents.pt, folder_listing.pt and portlet_nav*.pt. Now it's just a matter of finding the places where this still needs to be done (search, folder_factories, livesearch_reply and more). Should be rather easy now.

comment:8 Changed 11 years ago by limi

  • Status changed from new to closed
  • Resolution set to fixed

Most of these are complete now - file issues separately if there are other occurences.

comment:9 Changed 7 years ago by hannosch

  • Component changed from Visual and templates to Templates/CSS
Note: See TracTickets for help on using tickets.