3 special CSS TIP !! JUST copy&paste into custom code!!

[sho allan]

Hi, there :D

I got question about CSS, so I made the CSS-TIP "allanista" !!

This TIP include 3 Special Effects!!

1. Special Design Studio!!
   DesignStudio will be transparent-mode When move the cursor away.
   you can see more cleary !!
2. Special icons!!
   Message, friends, Edit, RSS-icon will change to color-icon!!
3. Special UI CSS3 button!!
   http://www.geekeries.fr/buttons/
   You can use CSS3 button so easily!!
   
   Just copy this code:
   

   <a class="rounded gkbutton" href="#button">My new button</a>

   and Paste any Text-box!!
   
   You can choose more buttons in here!!

How to use the TIP? it is so easy!!

1. COPY the code.
   <link rel="stylesheet" href="http://api.ning.com:80/files/tly6QxyO1F5V1Df6jJysof00OcxCn4fe9X7sjm5BWOwXlKN1woV76mVWErBXFsxqR1dD8aUMl6wXPXCZnPJyMquekGW0faxL/allanista_ver_0.2.css" type="text/css" media="all" />
2. Paste your Custom code!!
   
3. Enjoy!!

good luck
SHO

[Emmanuel Ace]

Thanks

[CocteauBoy]

Awww, this is cool! Thanks!

[sho allan]

:D

[Debby Bruck]

This all looks interesting. I simply have no idea what you are talking about, except that there is some type of code to change the appearance of some button icons on the NING network.

Where to insert code?

How to create the code for the special buttons?

What do the buttons look like?

Do we not design our own button design or use something you have designed?

I'm slow and do not know how to do any of these things. Sorry.

[sho allan]

Hi, Debby :D

Okey, I will answer them....

1. Where to insert code?
   You can add into "custom code" (NOT DesignStudio)
   Dashboard>Tools >Custom code
   or You can go to custom code page by Shortcuts.
   *sorry. my network is using Japanese.
   
   
   
   
2. How to create the code for the special buttons?
   You do not need create any code for Special buttons :D
   after add This CSS-TIP, paste this button-code into any text-box!!
   

   <a class="rounded gkbutton" href="#button">My new button</a>

   
   "#button" is link part. you can insert other URL.
   "My new button" is button title. also you can edit any title.
   so like this...
   
   

   <a class="rounded gkbutton" href="http://google.com">GO TO GOOGLE</a>

   
   
   
   
   
3. What do the buttons look like?
   
   like this:D
   you can choose other button type!!
   Please see this site -http://www.geekeries.fr/buttons/
   
   
   
   
   
4. Do we not design our own button design or use something you have designed?
   You can design by CSS :D
   I attached this CSS-TIP file!!
   or if you have idea to design, Please let me know.
   
   
   
   

I hope it will be answer fpr you.

good luck,
SHO

[classic]

thank you very much

[Fire-Tech]

Much better on my dark background. Thanks for the tip!

[wssw777]

すごくいいです！　有難うございます！

[Debby Bruck]

Thank you dear Sho ~ I am in amazement that it actually worked when I put the custom code for changing the little icons. Yippee!

Now I have another question. Where and how do I change the lettering inside those bars as shown pointer in red?

Can this be done without changing the main text on the front page?

An one other thing. I tried to add the change color bar into the Custom Code area and nothing happened. Did I enter this custom code CSS incorrectly? In the wrong place? Without correct details?

I do appreciate the time you spent to explain to me precisely what to do.

[The Internet Junkie]

#xn_bar code needs to be before the closing style tag </style> if you are placing it in your custom code box. If you place it in the advanced CSS area of your appearance manager, you do not need to place it between any style tags.

[Dr Husky (Emalejandro)]

Simply beatifull, you are my hero! really!

[Armani Rouse]

great tip Sho Allan! Only issue im seeing is the inbox image that gets added to the ning bar is behind the word "inbox" take a look at my network wellkunnected.com its in the ning bar that flashes at the top, look at "inbox" the image is behind the word!