CSS element problem - need some help please

James Lyall

I have used CSS customisation successfully with my site since joining SM.
Admittedly, most of this has been trial and error! (I use WebDev toolbar to identify the elements to be customised).

From various postings, there are recommendations that elements are addressed as:
.sm-user-ui .etc.
There are many examples on the excellent contribution from Aaron:
http://www.dgrin.com/showthread.php?t=237930

If I use this prefix, my CSS does not work. Omitting the prefix allows the CSS to work.

Can anyone explain this behaviour? (I've not seen any postings mentioning this problem).
Where might I be going wrong?
I shall be most grateful for any help from the experts - thank you.

basflt

do you have a virus-scanner ?
i see very weird stuff on your site

this is what i see , in several lines

CQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccl

if its no virus , then you copied something that dont belong in CSS

James Lyall

basflt wrote: »

do you have a virus-scanner ?
i see very weird stuff on your site

this is what i see , in several lines

CQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccl

if its no virus , then you copied something that dont belong in CSS

I do have a virus scanner. Fully protected by Trend Micro for years - no evidence whatsoever of virus on my setup.

I think that what you are seeing are chunks of CSS which I copied from:

http://www.sherlockphotography.org/Customisations/Rounded-corners

The Sherlock CSS does as expected. I was intrigued at the time by the long strings of code in his CSS.
You can see them on Sherlock's posting (link above).

basflt

ah , i see

so , you use webdev
have you tried using the entire element ?
sometimes that seem to work better

example ; #yui_3_8_0_1_1379071052014_179 .sm-user-ui .etc.

James Lyall

basflt wrote: »

ah , i see

so , you use webdev
have you tried using the entire element ?
sometimes that seem to work better

example ; #yui_3_8_0_1_1379071052014_179 .sm-user-ui .etc.

Your example does indeed work, BUT, why go to these lengths when the element can be addressed successfully by omitting the ".sm-user-ui" ?
This does not, however, answer my original question. Why is it that CSS such as:

/* Lightbox: Add the word "Close" next to the X */
.sm-user-ui .sm-lightbox-tools .sm-lightbox-close:after {
content: ' Close';
font-size: 18px;
}

is advocated, yet will only work for me (and perhaps many others) if the initial .sm-user-ui is stripped out?

James Lyall

Still need help!
Any CSS experts able to help? Many thanks.

thenickdude

Hm, normally .sm-user-ui is applied to the HTML tag, but it doesn't seem to be on your site for some reason. Not really sure how that could happen.

James Lyall

Lamah wrote: »

Hm, normally .sm-user-ui is applied to the HTML tag, but it doesn't seem to be on your site for some reason. Not really sure how that could happen.

Nicholas, thank you for your response.
My technical knowledge does not stretch to an understanding of HTML tags and the true nature of .sm-user-ui
I find this behaviour somewhat worrying; maybe I should not!
However, having used some of your impressive CSS (without the .sm-user-ui) the desired effect of the CSS is achieved.
Should I be concerned about this? Might it be due to SM with the move to the new site?

mklabove

James,

FWIW, I just tried adding the mod you used in your example (Close after X in Lightbox). As quoted, the mod did not work. But once I deleted .sm-user-ui from the CSS code, it seems to work fine. I haven't a clue as to why, just sharing experience.

Keith

basflt

probably because the "X" does not belong to the UI ( = User Interface ) but to the system
if you inspect it with webdev-tool , you dont see .sm-user-ui either

James Lyall

mklabove wrote: »

But once I deleted .sm-user-ui from the CSS code, it seems to work fine. I haven't a clue as to why, just sharing experience.

Keith, Thank you for that. It is reassuring that I am not alone in this.

James Lyall

basflt wrote: »

probably because the "X" does not belong to the UI ( = User Interface ) but to the system
if you inspect it with webdev-tool , you dont see .sm-user-ui either

That may well be so, but, I have experienced the same phenomenon across the board with ALL my CSS code. Any code that has ".sm-user-ui" as a prefix does not work. Interesting!

The plot thickens!

southeasternphotography

Weird....it works fine for me for multiple things on Mac and Chrome. And THANKS to the OP 'cause I just added the "Close" next to the "X" in the Lightbox! Cool!