"!important" - Gallery CSS Problem

[Tirinoarim]

Please help! I'd be tearing my hair out if I had any left!

I'm trying to write a paypal gallery with built in shopping cart and all is working fine except the pop-up cart is NOT appearing correctly. It would seem this is entirely due to Lightroom tagging all my css with "!important". (Manually removing these and reloading the site and all works fine!).

What (if anything!) can I add to my appearance model entries to stop the "!important" tags being generated?

at the moment I have this...

  <mx:Model id="appearance">
   <dimmer>
    <cssID>.Dimmer</cssID>
    <top>'px</top>
    <left>'px</left>
    <width>1px</width>
    <height>1px</height>
    <font-family>verdana</font-family>
    <visibility>hidden</visibility>
    <position>absolute</position>
    <background-image>url(Gray.png)</background-image>
   </dimmer>
 </mx:Model>

Which generates this in the CSS file...

.Dimmer {
 background-image: url(Gray.png) !important;
 left: 'px !important;
 width: 1px !important;
 top: 'px !important;
 position: absolute !important;
 height: 1px !important;
 font-family: verdana !important;
 visibility: hidden !important;
}

but to work, it needs to be this...

.Dimmer {
 background-image: url(Gray.png);
 left: 'px;
 width: 1px;
 top: 'px;
 position: absolute;
 height: 1px;
 font-family: verdana;
 visibility: hidden;
}

I've tried things like

<top important="false">'px</top>

but just cant get rid of them!!

 

[Halfje-Bruin]

The main question is what browser are you using to view the site? Do you have an URL so we can check with other browsers?

 

[Tirinoarim]

The problem occurs within Lightroom (web gallery preview) and Chrome. I will test with Firefox and IE this evening and report my findings.

 

[Tirinoarim]

Confirmed not working within Lightroom or (when exported) in IE8, Firefox or Chrome. Surely theres some way of specifying the important flag?

 

[Sean McCormack]

No there isn't. Because Lightroom doesn't generate the CSS in order, it needs to add the !important tag (which is valid CSS BTW).
I hate to break this to you, but XSLT/XML galleries no longer work with Lightroom 3, so you are digging yourself into a hole by writing them. Lua galleries are much easier to code and more powerful. Not to mention there is an SDK that explains it, whereas there's nothing official for XSLT galleries. I did code a few of them way back, but it was always painful.


There is a way around it, if you use Lua galleries, but it's rather complex and requires building out a 2nd version of the CSS, but by using a pre-formatted CSS file with the variables set in it.
You then choose <% if mode=='publish' then %>your hand made file link <% end %> <% if mode=='preview' then %>the standard CSS link <% end %>
You obviously need to declare the new css file via AddPage in the manifest.lrweb file

 

[Sean McCormack]

As BTW, any code editor will let you do a search and replace for '!hidden' with '', which will effectively remove it from the generated CSS file.

 

[Tirinoarim]

Because Lightroom doesn't generate the CSS in order

Thats a CASCADING style sheet, as in, order is quite important?

the !important tag (which is valid CSS BTW)

???
the OPTIONAL !important tag (which is valid CSS BTW)

XSLT/XML galleries no longer work with Lightroom 3

:icon_frown:
OK, Lua re-write it is then.

BTW, any code editor will let you do a search and replace

C'mon Sean, that was uncalled for. Seriously, how many people who can code XSLT/XML dont know how to use search/replace? Only slightly patronising.

 

[Victoria Bampton]

[quote author=Tirinoarim link=topic=8528.msg58'35#msg58'35 date=126'266584]
C'mon Sean, that was uncalled for. Seriously, how many people who can code XSLT/XML dont know how to use search/replace? Only slightly patronising.
[/quote]

I'm sure Sean wasn't intending to be patronising - if there's one thing you learn working the forums, it's that you can never make assumptions about a person's level of knowledge, and whilst you may know that, other users reading the thread for information might not.

 

[Sean McCormack]

It wasn't being patronising as Victoria says, it was a suggestion as an afterthought. Sometimes I can wrapped up in code and forget that it can be fixed outside what I'm working with.

If it's any consolation, I've just spent the entire day doing exactly what you need to do there..

2 things I found:

How to call css with dashes, like margin-top: background-color: <%= model.appearance.scroll[ 'background-color' ] %>;

Stuff involving color needs to be sorted out inside galleryInfo.lrweb. I think Matthew Campagna has an alternate way. If he mails it, I'll add it in here.

 

[Sean McCormack]

No, Matt is doing it the same way as me. It gets an offhand mention in the SDK, but look through the default_html.lrwebengine for examples of LrColorToWebColor in use.