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  

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  ). 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!  ) 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  )

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

Thanks a lot Outumuro.

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

Do you have an AIM account?

Nice Feature and easy to use. Great Work  sup:

WOW.. this is Nice !  No longer have to screw up my site, to experiment !

See attachment for Suggestions and Error report

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 !  
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)

Yeah .. clear as mud ...    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 !

I have read this and have a suggestion or two on teh name:

CSS defoogler

I'll let you know what happens

8)

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