Newsflash

NEW!  Submit the news about YaBB to your favorite social networks and bookmark sites!

Help spread the word about your YaBB community! 

 

YaBB World Time

Syndicate

powered_by.png, 1 kB

Home
CSS Editor For YaBB Released PDF Print E-mail
Written by Outumuro   
Friday, 27 June 2008

Unilat, owner & administrator of the CALVARS Media Forum (a member of the YaBB community & contributor to BoardMod), has released on BoardMod a beta version of his upcoming WSIWYG/CSS editor for YaBB... called (for now) YaBBLite.  Here is an excerpt from Unilat's post on BoardMod:

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.
Last Updated ( Friday, 27 June 2008 )
 
< Prev   Next >

Polls

Which version of YaBB are you using in 2008?
 

Who's Online

© 2008 YaBB Toolbar
Joomla! is Free Software released under the GNU/GPL License.