Changing CSS to inline style Options

[Conor]

Hi all,

Have very limited html/css experience so will do my best to explain.

Currently working with a wysiwyg editor where I don’t have access to edit the CSS. However, I found some great code online for a clickable html button but it’s mainly done through CSS. I’m wondering is there a way of changing this code so that it’s done in the below format:

<div style=”***CSS***”><div>

Wysiwyg editor will allow me to enter in html snippets but nothing more.

Link to the “button” is: Button

Any help much appreciated!!

Conor

[pandy]

Nope. Parts of it can't be done inline. Why don't you change editor instead? It sounds extremely limited. Or just use a text editor for editing external files.

[Conor]

Thanks for reply - unfortunately stuck with the editor for this particular project. Is the limitation related to the "press" part of the CSS? That's the real functionality I'm after. Or if there's any image-based workaround I could do I'd be happy with that as well!

[pandy]

You can't use psudo elements and pseudo classes (like :hover) inline. There's also some advanced CSS3 stuff that I don't think can be made inline.

I don't see what stops you from opening Notepad (or whatever) and use it. It feels like you are taking a very long way around a small problem.

[Christian J]

Is the limitation related to the "press" part of the CSS? That's the real functionality I'm after.

Yes the pressing effect is done with the :active pseudo-class, which can't be used in inline styles. Ditto for :hover.

Or if there's any image-based workaround I could do I'd be happy with that as well!

You'd still need a way to detect the hovering and clicking. Perhaps a traditional javascript image rollover could be used (with the onmouseover, onmouseout and onclick attributes instead of inline styles)?

[Christian J]

Just a couple of nitpicks:

<div style=”***CSS***”><div>

The above slanted quote characters can't be used for HTML, use ordinary " quotes instead.

Link to the “button” is: Button

I can't even copy the sample code on that site to my text editor. What's the point of using such a service?

Anyway, the CSS example uses ampersand selectors like

CODE

&:hover

which apparently is part of the Sass stylesheet language and not real CSS (and won't work by directly in a browser AFAIK):
http://sass-lang.com/guide
http://sass-lang.com/documentation/file.SA...parent-selector

[pandy]

I can copy.

[Frederiek]

Yep, just click the Share button and you can download a zip file of the sample on the page.

[pandy]

I copied straight off screen.

[Christian J]

Now it worked for me too. Maybe it was a glitch yesterday.