Page Index Toggle Pages: [1] 2 3  Send TopicPrint
Very Hot Topic (More than 25 Replies) [APP] YaBBLite (WYSIWYG/CSS Editor) (Read 290 times)
Unilat
Full Member
***
Offline



Posts: 164
Location: Making Stuff
Joined: Jun 26th, 2008
Gender: Male
[APP] YaBBLite (WYSIWYG/CSS Editor)
Jun 26th, 2008 at 4:05pm
Print Post  
Hi everyone,

This is actually my first post on BoardMod but I visit here regularly to check up on updates and stuff. I have been working on an external application for YaBB use called YaBBLite (soon to be known otherwise. If you would like to submit a name just post it here or in the similar thread in the graphics section at yabbforum.com). This program is a WYSIWYG Editor that goes beyond the current features of the YaBB CSS Editor. I found that it is actually quicker (for me even, who knows CSS very well) to use this application and its click-to-make simplicity.

Application Information

YaBBLite is designed to open ANY CSS file along with ANY website on the internet. The Web Browser in the application allows for fast WYSIWYG viewing of your own/any website you want to mess around with. The program loads the css selectors (tags, classes, ids) into a selector box. From there, choose a selector and the styles it has will display below. Choose a style and the style's value will appear in the next box. Edit the style, hit update, and your changes are shown in the Web Browser. Its as simple as that  Cheesy

Features:

  • New, Save, Save As, Open, and Load From Site functions.
  • Load From Site displays a multi select box with all the external stylesheets of the current web page in the Web Browser. The stylesheets you select will be loaded into the program and cascaded for multiple selections.
  • Image Path Correction and Code Formatting.
  • When loading a .css file, images are often linked to via relative url (not the entire url). The genius of YaBBLite's WYSIWYG is allowing the code you are working with to be inserted into any webpage through an internal stylesheet. Even if it was external, paths would still be off. Image Path Correction (under Edit) allows the beginning of the relative url to be inputted so images load correctly (most often it is the location of the .css file). The default image path is that of the css file location on yabbforum.com which need not be changed if you are editing any YaBB site, as these images will be same as your own. If yours are different, then the image path should be changed for proper loading.
  • Code Formatting allows for the options of Color Formatting the Code View, Typing Help, and individual coloring. Each color in the Code Formatting box can be changed (tag color, id color, class color, etc.). However, Color Formatting is not recommended due to slower code loading time when Updating.
  • Typing help is occasionally helpful (ironic name then if it is not  Wink). When typing via Code View a box pops up selected on the CSS property that is closest to the word you are typing. You can hit enter to select the one that is currently selected and it is automatically put in over your current word (good for faster typing, sometimes). There is still a bug with this that scrolling causes the RichTextBox to scroll and leave the Typing Helper behind if it is visible. Arrow keys allow for navigation up and down the Typing helper to select a different item, while it is visible.
  • The About function under help has information regarding copyright and contacting me for help/suggestions.
  • For both selectors and styles, they can be removed and or added by clicking "Add" or "Remove". When adding a selector a textbox will appear in the selector list to type in the new name. For styles, a drop down will appear for property selection.
  • There is a find feature for selectors which brings up a textbox at the bottom of the selector list. The list updates so the selector with the closest match to your typing is on top (dont forget to use . and # for classes and id's). Hit enter when finished or click on an item in the Selector Box.
  • The style value box shows the value of the currently selected style. If the style involves color a button will appear for a color dialog box for Hex color choosing and the Image/Color preview below will show the color. If the style involves an image the image will be displayed in the Image/Color preview as well (granted your Image Path is set correctly, dont forget, you can still use whole urls beginning with http://)
  • The WYSIWYG view has a url box for navigation. When going to a website include www. or http:// otherwise it will recognize it as a local file and will say the URI format is not supported. The arrow button next to it will navigate to the url. The browse button on the far right allows selection of local files. Go must then be hit as well.
  • The Code View is relatively simple. It shows line and position (both editable by clicking on the arrows, typing an integer, then hitting enter). After making changes to the code (check to make sure its well-formed. Some errors are not accounted for. And if you are going to use the Code View you should already know what you are doing anyways!  Roll Eyes) hit update to make the changes and update the WYSIWYG view.


Known Issues
- When Color formatting is turned on and you close the Code Formatting box, it does not update the code right away. Just hit update in the Code View or in the Click-to-make area to have it update.
- The issue with scrolling leaving the typing helper behind.
- Error checking is not completely done for Code View modifications. Still need help with this.
- Error checking overall is not completely finished as I have not encountered everything that can go wrong. So if you receive an error please provide me with full details so I can update the next version.
- Relative URL paths dont always work when links are clicked. The WebBrowser in C# naviagtes to about:blank after each page load, so relative urls will be added on to this. To get around this, just type in the full url. (Fix coming next time)

You can contact me on my AIM account (this would be preferred over PM). My account is CalpooG (interesting name, I know).

Download

The download includes the .exe, and a folder called Defaults containing a default.css and a WYSIWYG template called YaBBTemplate.htm. This folder (if it is in there, im not sure if it zipped properly. If the folder is not there please put those two files in a folder called Defaults) needs to be placed in the same folder/location that the application will be running from.

Well, thats just about it. Its designed for very simple use, so go figure it out! Please, feedback is needed, testers are wanted, give me your feelings, likes, dislikes, etc. This is Beta 0.2 and will be going alot farther. (Including GUI enhancements and customizations, although I like the sleek look it has now  Tongue)

And Last but not least...PICTURES!

http://www.calvars.com/gac/images/UpdatedGUI.gif
http://www.calvars.com/gac/images/screen4.gif
http://www.calvars.com/gac/images/screen5.gif
http://www.calvars.com/gac/images/screen6.gif
  

YaBBLite.zip ( 40 KB | Downloads )
Back to top
WWWAIM  
IP Logged
 
Outumuro
God Member
*****
Offline


Publisher - YaBB Toolbar

Posts: 569
Location: Los Angeles
Joined: Apr 14th, 2004
Gender: Male
Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #1 - Jun 27th, 2008 at 10:40am
Print Post  
Great stuff Unilat!  Looking for to more on this project. Smiley

News item - CSS Editor For YaBB Released.
  


Back to top
WWW  
IP Logged
 
Unilat
Full Member
***
Offline



Posts: 164
Location: Making Stuff
Joined: Jun 26th, 2008
Gender: Male
Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #2 - Jun 27th, 2008 at 1:14pm
Print Post  
Thanks a lot Outumuro.

Get back to me if you find any bugs/want any changes.

Do you have an AIM account?
  
Back to top
WWWAIM  
IP Logged
 
bartez
Ex Member


Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #3 - Jun 27th, 2008 at 11:07pm
Print Post  
Nice work Unilat, will give it a try this weekend Smiley
  
Back to top
 
IP Logged
 
ThM
God Member
*****
Offline



Posts: 585
Location: Germany, Nds.
Joined: May 21st, 2006
Gender: Male
Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #4 - Jun 28th, 2008 at 5:19pm
Print Post  
Nice Feature and easy to use. Great Work  Thumbs Upsup:
  

Greeting ThM
Back to top
 
IP Logged
 
Unilat
Full Member
***
Offline



Posts: 164
Location: Making Stuff
Joined: Jun 26th, 2008
Gender: Male
Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #5 - Jul 20th, 2008 at 5:49pm
Print Post  
Hey guys,

I would really like to continue work on this application so if anyone wants to help by making suggestions or ideas please get back to me.
  
Back to top
WWWAIM  
IP Logged
 
Captain John
Senior Member
****
Offline


Pass to Port !

Posts: 264
Location: Reno Beach
Joined: Jan 18th, 2007
Gender: Male
Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #6 - Aug 13th, 2008 at 2:04am
Print Post  
WOW.. this is Nice !  No longer have to screw up my site, to experiment !

See attachment for Suggestions and Error report
  

Suggestion_Error.txt ( 5 KB | Downloads )

Love to live and love on the water
Back to top
 
IP Logged
 
Unilat
Full Member
***
Offline



Posts: 164
Location: Making Stuff
Joined: Jun 26th, 2008
Gender: Male
Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #7 - Aug 15th, 2008 at 7:30pm
Print Post  
Ahh, very nice Captain John. Im not sure whats causing those errors but Ill look into it.

Should be a fix up relatively soon, as well as the experimental FTP uploader... I may choose not to include that because its not really secure yet.
  
Back to top
WWWAIM  
IP Logged
 
Captain John
Senior Member
****
Offline


Pass to Port !

Posts: 264
Location: Reno Beach
Joined: Jan 18th, 2007
Gender: Male
Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #8 - Aug 16th, 2008 at 4:13am
Print Post  
lol probably my double clicking ... not a CSS person ... and not understanding "Selectors" clicking on Add seemed reasonable ... then "New Selector" appeared ... was immediately confused !   Roll Eyes
Wasn't patient .. click on Styles ... nothing happened (well not before) I double clicked to get it to do something ... (oops)
 I tested it as a complete novice (and I was) ... after looking at Main text menu and seeing "Load from Site" I fiqured I could load my forum in .. url in browser window.. That worked, then tried "Selectors" and "Styles" again .. No different than before ... I went back to Main text menu .. "Load from Site .. and wal la !  
 Trial and errors ... but got it to work !
Another Suggestion ... if possible, a drop down window for the browser window, retaining url history ... make it easier than to retype url's ... or paths for offline templates (even though the "Open" works in the File Menu)
  

Love to live and love on the water
Back to top
 
IP Logged
 
Unilat
Full Member
***
Offline



Posts: 164
Location: Making Stuff
Joined: Jun 26th, 2008
Gender: Male
Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #9 - Aug 16th, 2008 at 2:46pm
Print Post  
Well I wasnt able to recreate the double click error on Add under Styles. The button isnt active unless there is a Selector highlighted in the Selector box. So double clicking it without selecting a Selector does nothing. But when a Selector is highlighted and I double click Add under styles, the dropdown of css styles comes up and my second click immediately selects whichever option my mouse was hovering over, adding it to the list. Which can then be removed. Whatever the case, I added a error catching statement to catch IndexOutOfRange so the program shouldnt crash if it receives the error, it just wont do anything about it.

The second error of adding two Selectors and then removing one was an issue I was able to recreate. The problem was, clicking Add automatically added "NewSelector" to the list, which was then editable via the textbox that comes up. However, if you hit enter, or the textbox loses focues (by clicking on something else) and the textbox is empty, it doesnt add a new instance of a css selector to the internal array of them. So in that case, there is an item on the list which doesnt reference anything in the code. So when you try to select it is says "Itz not thur, haxx!!!11!" and then throws an error  Wink

So all an all that is fixed, by making it only add an item to the list and to the internal array if the textbox is not empty, rather than adding one to the list and then updating it once the textbox was subnmitted.

The FTP uploader is working well but I wont release the whole thing until probably tomorrow as it still has a few changes to be made and I need to write up a help file.

Just to explain some of it, a Selector is just what it says. It selects things. What it happens to select are class types within the html or tag types. So table {} would select all table tag elements. If proceeded by a period e.g: .table {} then it will select all html tags with the class name "table". If it is proceeded by a # e.g: #table {} it will select all html tags with the id of "table". So basically it accesses different HTML elements in a variety of ways so you can apply styles to them seperately.

<table width='100'>
<table class="table" width='100'>
<table id="table" width='100'>

Are all ways to access parts of your html code. Just with the correct syntax, table, .table, or #table.

The styles are different properties of the tags that you can change for each selector that you add.

Hope that clears it up a bit!
  
Back to top
WWWAIM  
IP Logged
 
Captain John
Senior Member
****
Offline


Pass to Port !

Posts: 264
Location: Reno Beach
Joined: Jan 18th, 2007
Gender: Male
Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #10 - Aug 16th, 2008 at 4:48pm
Print Post  
Yeah .. clear as mud ...  Grin Grin  But yes .. I was able to select, modify, add ... all the goodies ... I just choked on how and where to fill the window boxes ... with what actually belonged there.  Once that was accomplished ... it was FUN !
  

Love to live and love on the water
Back to top
 
IP Logged
 
JonB
New Member
*
Offline


Gee I don't know

Posts: 42
Joined: Aug 25th, 2008
Gender: Male
Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #11 - Sep 9th, 2008 at 6:18am
Print Post  
I'm gonna see what happens with my WordPress stuff - oh yeah and Yabb  Grin
  
Back to top
 
IP Logged
 
JonB
New Member
*
Offline


Gee I don't know

Posts: 42
Joined: Aug 25th, 2008
Gender: Male
Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #12 - Sep 9th, 2008 at 6:21am
Print Post  
I have read this and have a suggestion or two on teh name:

CSS defoogler

I'll let you know what happens

8)
  
Back to top
 
IP Logged
 
JonB
New Member
*
Offline


Gee I don't know

Posts: 42
Joined: Aug 25th, 2008
Gender: Male
Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #13 - Sep 9th, 2008 at 11:35pm
Print Post  
IT IS A DEFOOGLER!  IT IS IT IS!

earler this week to a WordPress Theme author:

Quote:
First Thanks for a great theme!

Second: BIG thanks for a readable, organized CSS file. CSS is great but it can also be garbled garbage and still work, you don’t know till you look under the hood.
I found the tiniest CSS problem, and have a fix…


* JonB does Snoopy happy dance

I just tried it out on my Wordpres stuff - mahhhvelous!

LOL - hehehehe

I once wrote a utility much like this for Cobol!

BTW - never wrote Cobol 4 a living but taught it, was an asembler and systems programmer.  Oh yeah and fixed other's code, hahahaha!

/me checks calendar - YES that was a LONG time ago now that you mention it Lips Sealed

Thank God, they invented 'micros' about the same time, God only knows what I would have become otherwise... Does 'going COBOL' sound like 'going Postal'?

OK I'm over my enthusiasm, this week I'll see reliable it is with some other stuff. It ALREADY found a bug for me! (not mine - others, LOL) I'm a PERFECT coder - read 'I don't code', LOL

THANK YOU!

:sultan:
  
Back to top
 
IP Logged
 
JonB
New Member
*
Offline


Gee I don't know

Posts: 42
Joined: Aug 25th, 2008
Gender: Male
Re: [APP] YaBBLite (WYSIWYG/CSS Editor)
Reply #14 - Sep 11th, 2008 at 4:29pm
Print Post  
Hi Unilat!

I haven't thought through the logic you might have used to develop this utility, so I don't know if my suggestions are practical.

AND it may already do some of these things
AND I'm sure you know more than I do about CSS.

I do agree with CJ drop-down URL history would be very useful.

Interface Suggestion -
A button right next to the 'fetch/go' & 'broswe' for the Load File from site, maybe a green down arrows thingy>  Avoids opening  the drop-down, and based on my way of usting the toll, the most likely thing I am to do right after fetchng the apge (almont 100% of time)

OK - this is pretty outlandish, but I think it might be useful. How about the option to load two alternative stylesheets for the same page - I do that all the time - Look A vs Look B. Twiddle this, Fiddle that, Wonky, wonky some other thing - Voila!

LOL - I'm trying to think this through here -

OK -

I guess you had to parse the whole file to do this, so I think these would be doable.  Its already useful so please don't take these as dings.

One thing I know would be useful (to me at least) -

An option to sort by class,ID

Many times I have to weld things together, and its really useful to have the code organized so I can understand what was intended.

OK last item -  This may not be something you tool was ever anticpated to do. It has more to do with the target page than the CSS itself.

Again I deal with a lot of inherited stuff.  One of the problems debugging other's CSS.

I have found two types of problems -

Undefined Elements - maybe Unstyled would be a better tern.

These are the little things that 'miss out' when the page is rendered becasue there is no defined style that should be applied to them so they fall on the HTML defaults.

and the flip side of that is 'relic' CSS.

Authors tend to reuse code and stylesheets. And they usually don't tidy up after themselves.

The 'source' stylesheet was intended for something a little different, and there was a family of elements that doesn't exist in the current project. So when they test render, looks good  - out the door. BUT they don't test all browsers. (thats quite hard it used to be the big 3 now its about 5 or 6 you oughta test.)

Well - when you test in Safari - eeeech! WHAT IS THAT?

Its due to what I call 'relic' code. Its not meant to be there, and due to a bad CSS parse - it shows up (I have such a page on a WordPress site) IE7 & FF3 look like the values I defined, Safari, Chrome and Opera have used elements that  were' left over' from another one of the same authors other stylesheets.

I'd like to find 'unreferenced' elements in the stylesheet.

The last two are dependent on a semantic analysis and may be way beyond what you intended, and I might be the only one that found them useful.

Thanks again
Wink




  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 3 
Send TopicPrint