Wednesday, April 8, 2009

GL Pro Tips - HTML Widget

Every Wednesday, Guild Launch Pro Tips will explore common issues as well as creative ideas on how to use the Guild Launch system. This week, Mike will discuss how glorious the HTML widget is and describe a few "out of the box" ideas on its use.

If you were to ask me the most exciting addition we have made at Guild Launch, my answer would be the HTML Widget. Almost every widget related request I receive can be accomplished with the HTML Widget and its uses are almost limitless.

Displaying WoWJutsu rank information, Guild Officers, Chat Rooms and even moving your Primary Navigation to the right hand side; it is all possible with the HTML Widget.

The first thing you will want to do is add your HTML Widget to your Guild Launch site. You can add widgets by going to the Admin section and clicking the Add Widget link in the Widgets section on the first page:



Sub Pro Tip - Once you have added a widget you can click the Pencil icon to change the widgets name, viewing permissions and which pages it will display on.

Lets name this widget 'Testing the Awesomeness', and leave all of the other options alone for now. Click your guild name in the top, right-hand corner of the page to be taken back to your Guild Homepage. You should see the HTML Widget named Testing the Awesomeness and an [Edit] link to the right of the title. Click that link and you will see something similar to:


The background color will be different depending on the Template and CSS settings for your site. Think of this as a very simple, Microsoft Word. You can type text, highlight it and click the B button to make the text bold, for example. This is the easiest way to use the HTML widget and is known as WYSIWYG (What You See Is What You Get) view.

If you type something and highlight it, you will be able to turn it into a link by clicking the 3 chain link icon. Using this view, you could easily type a list of Guild Officers and link each name to their Member Profile or add a flash video by clicking the movie strip icon and providing it with a URL.

What if you know HTML or want to paste HTML into the widget to display something such as your WoWJutsu rank icon? Easy! Switch to HTML view by clicking the HTML button. In the pop-up you can insert HTML to display that item on your site. You would also paste your code for an HTML based Chat room in the Code View box.

Remember that the HTML Widgets flexibility is where it is powerful. The Linkbox Widget is great to display your links, but what if you want to use images instead of text? What if you want the text to be colored fireball fuchsia or displayed in a certain order? The HTML Widget solves these problems and is very easy to use.

Comment to this post and show us how you have used the HTML Widget. See you all next week!

~Mike

3 comments:

athene said...

We just brought our guild site over to Guild Launch about a week ago. The main reasons we chose Guild Launch was its Rapid Raid DKP, and its use of widgets in site composition. The HTML widget is hands down the most powerful, flexible, and easy to use site customization component I have used. I am still trying to figure out everything I can do with it, it seems limitless! Thank you so much for giving us such a great tool that saves SO much coding time and opens so many design and content doors!

laura said...

Thank for sharing this tips for html designer. this html are powerful and also flixible. thanks again!

Tankadin said...

I love the HTML widget. Great work! I am itching to use it to display my guild's rating from GuildOx.com.

Unfortunately, the widget won't let me horizontally center GuildOx's banner using any HTML/CSS combinations I know. The widget also insists on putting extra paragraphs and linebreaks in, even in raw HTML mode.

Here is a sample of the code I am trying to put into the widget (not my guild):

<script src='http://www.guildox.com/go/go.asp?c=b&h=1&f=ff8c00&t=10&n=Premonition&r=Sen%27jin%2DUS'></script>

What say you? Is it the script tag that's confounding things? Did I just not try hard enough to get it horizontally centered in the widget? Any hints appreciated. Thank you for the widget!