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;}

[Kyryl_Ning_Support]

Hi there!

Since the text editor has been changed this tip might not be working, as the new editor uses other classes for the buttons.

Best regards,

Ning Team.

[Lady Shadow]

Thanks yes I am using the newer 3.0 

[Kyryl_Ning_Support]

Hi there!

The text editor has been changed on both platforms 3.0 and 2.0, so it the same everywhere on Ning networks. I was talking about only the text editor itself, the tool you are using to write comments, create posts, actually input any text information on the network.

Why doesn't the tip work now? In order to determine the position and the look of the elements on the web pages, the CSS classes are used. They determine how the would look, and if it's necessary to change something in the look of an element we redetermine the properties of the class. Since the old and new text editors have different class names the properties in the tip are determined for the classes which are not presented on the page.

Best regards,

Ning Team.

[Kos]

As FT said, this came out when things were in beta and quite honestly, it varied by theme.  What page are you looking at?  I'll take a look into it.

 

[Lady Shadow]

https://thenocturnalcauldron.ning.com this is my site  thanks  I took code out tho

PS is there a css code  for just if anything just the follow and reply button, and is there css code to enhance links thanks maybe also increse link size and add text shadow?? Thanks

[Kos]

Sorry.  Can't see it when it's private. Maybe someone else will chime in here

[Lady Shadow]

Opps   its ok I  fig  another way found  a code   which is cool just does nothing for the follow button do you know a 3.0 for the follow button I can use to enlarge and add background to it  thanks

[Kyryl_Ning_Support]

Hi there!

If you are talking about the follow button under the posts, here are some codes that might be helpful for you, after adjustments they should be inserted in the custom CSS section in the design studio.

.js-followUnfollow .button-tiny a {
font-size:15px;
background-image: url(your_url);
}
.js-followUnfollow .button-tiny a.is-selected {
background-image: url(your_url_when _selected);
}

If you change the 15px you can make the button bigger or smaller. I think you have wanted to add the image to the background of that button, but if not please let me know. So your_url is responsible for the background when the button follow is not selected and the your_url_when_selected for the opposite state fo that button, just replace those placeholders with the links to the background images you want and make sure that the link starts from https.

Best regards,

Ning Team.