3.0 Tip: Make your HTML Mode and other buttons stand out

[Fire-Tech]

Here's some little snippets to make active buttons and HTML Editor mode stand out more...was bugging me, so figured I'm not the only one. Add to your CSS.

Enjoy,

FT

/*_________Fire-Tech HTML & Buttons____________*/
a.mceButton.mceButtonEnabled.mce_code.mceButtonActive{border: 0px!important; background-image: none!important; margin: 0 0 -.6em -.2em!important;}
.mceButton.mceButtonEnabled.mce_code.mceButtonActive:before {content:"HTML Mode"; border: .15em groove #000; border-radius:.4em; padding:.18em; background:#ff0000; font-weight:bold!important; color: #ffff00; text-shadow: -.15em .15em .2em #000; margin-left: -.2em!important; margin-bottom: -.6em!important;}
a.mceButtonActive{border: .1em solid #000!important; background: #c0c0c0!important;}

[Kos]

Great how a few little tweaks make all the difference.  Here's another one to combine with yours (while they're at it).  Change the grey background to whatever you wish.

.defaultSkin table {background: blue;}

[Fire-Tech]

Aaaah. I like :)

We should start a group for NC's with OCD :)

Here's one for the success message:

div.notice-successMessage{border:2px groove #fff;border-radius:10px;-moz-box-shadow:0 -1px 6px -1px rgba(0,0,0,1);-webkit-box-shadow:0 -1px 6px -1px rgba(0,0,0,1);box-shadow:0 1px 8px 1px rgba(0,0,0,1);margin-bottom:40px;background-color:#b6dae5}

[Kos]

"OCD"  lmao!  Better invite SoaringEagle.  I remember he totally overhauled his but i haven't looked in quite some time.  Here a little tweak the wording, color and font size in the "read more" area of posts using Language Editor.

Code used in Language Editor:

<p><span style="color: #0081C2; font-size: 11px;">Read More, Comment and Share......</span></p>

  

Widen the area given for additional "read more" wording by adjusting with CSS

.blogListPage-readMore {width: 190px;}

[Fire-Tech]

Yeah, I have been busy with a new network. Haven't checked his out in a while either. Def use the Read More. Thx.

Here's one for colored scroll bars in Chrome. FF doesn't support yet though...

/**** SCROLLBARS ****/
::-webkit-scrollbar {width:8px; }
::-webkit-scrollbar-track {background:transparent; border-radius:6px; box-shadow:0px 0px 10px 1px silver inset; margin:10px!important; padding:50px!important;}
::-webkit-scrollbar-thumb {border-radius:8px; box-shadow:0px 0px 3px 1px blue inset; border: solid 1px #000;}
::-webkit-scrollbar-thumb:hover {border-radius:8px; box-shadow:0px 0px 2px 1px blue inset;}

[Kos]

Nice one!  I've had brain freeze on Language Editor.  I know there's SO much more we can do with it.  I think I'm juggling too many balls in the air.  Need to focus.  ADD my problem.  Focus Laura focus!  lol

[Fire-Tech]

lol :)

[Rise]

Hi Fire Tech

I would love to add this to our pages. Where do you place your own network name in the code?

/*_________Fire-Tech HTML & Buttons____________*/ 

thank you

[Rise]

Does your code only work for 3.0? If so, that is my problem because I am still operating off of 2.0.

[Fire-Tech]

Actually, it looks like it does work on 2.0. They must have kept the CSS classes the same.

paste in Design Studio / Advanced CSS

[Kos]

Rise what's your URL?  We can take a look and see if something is conflicting.