[3.0 MOD] Advance CSS Editor

[Elson Tan]

Hello Creators,

Today, your troublesome css editing on your network will be forever be eliminated with my new mod- Advance CSS Editor

Why did I build this?

Well I was scratching my head out of frustration because Ning current's custom css editor is plain and small, I need something powerful and big to edit it. So I decided to make this to solve all the problems Ning designers are facing.

 

Powered by Ace Editor

I have chosen Ace Editor as the code editor for this mod, Ace Editor is one of the best code editors out there, Github also uses this.

Cost

Totally free as long as you do not remove my credits.

Features

CSS Syntax Highlighting - For easy and comfortable reference

Preview and Publish right on the module itself

Code blocks - Able to minimize or expands code blocks like you see in most code editors

Autocomplete - just to make sure you don't miss out any semicolons ;)

 

Usage

Just add the scripts below to your Custom Code -> Below box:

<link href="http://elsodev.com/projects/csseditor/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://elsodev.com/projects/csseditor/script.min.js"></script>
<script src="http://elsodev.com/projects/csseditor/ace-builds/src-min/ace.js" type="text/javascript" charset="utf-8"></script>

(P/S You can also add the stylesheet to the Head section of the custom code, but scripts must be in below code)

Launching the Editor

Just go to your Design Studio->Custom CSS->Launch Editor

Coming Soon Upgrades

* I will make the upgrades if creators support this modification and provide suggestions for improvements

1. Resizable module (adjust the width to your preference)

2. Change the opacity of the textbox

3. More advance CSS autocomplete by guessing the CSS properties(like most IDE)

4. Live preview (preview as you code)

5. Changeable themes and colors

If you like my work, do follow me on twitter for more cool stuff.

[Kos]

Wow, pretty neat.  Just tried it.  Made an adjustment, hit preview, liked it and hit Publish.  Done.  Very nice Elson; thank you!

[Mary Jane Peterson]

Hello Elson Tan

Thank you looks great  , I am unable to write code , but I can copy and paste. 

[Elson Tan]

Hi,

Did the editor launch normally? What browser are you viewing on?

[⚡JFarrow⌁]

thanks Elson... i'll give it a spin!  Nice work!

[⚡JFarrow⌁]

have you managed to figure out a way to make text editors in dashboard open to full screen, by chance?

[Elson Tan]

Hi JFarrow,

Unfortunately no since Ning does not allow script injection on dashboard, but I know a way around it, will work on it soon.

[soaringeagle]

you do impressive work..tru genius

[Elson Tan]

Glad you like it soaringeagle.

[soaringeagle]

1 issue

it wont be an issue for many but for me it is

i use  a css minifyer  so  most of my older codes all on 1 line

the editor should be smart enough to break lines at } and seperate the code blocks regardless of how the codes written in the original

[Elson Tan]

Oh, I will try if I can make minified css work on this.