Along with adding new features we are always looking for ways we can improve the site. With the last update, we changed the popup box to be centered in the browser and have an overlay behind it, dimming the rest of the site and making the popup box stand out more. This change made room in the bottom right corner for the notifications.

We have received some mixed feedback with the popup changes, and based on some of the feedback we have moved the popup box to the bottom center of the browser, closer to how it used to be.

We will be testing some layouts this week to see what is the best solution we can come up with, but we would love to hear any feedback you may have on this - your thoughts on the position of the popup box, the notifications and the overlay are all welcome.

Also one quick note, the live previews that were enabled for some content, such as editing forum posts, have temporarily been disabled with this update; they will be re-enabled within the next few days.

The notifications update is now live, adding a notifications system to help guide you to new content on your guild site.

Example Notification:



Our goal with the notifications is to notify you of new content being added while you are logged in, making it easier to communicate and discuss it with other logged in members.

When new content is added, such as a new forum post, a notification will fade in the bottom right corner of your browser, alerting you of the new content and who posted it, with a "view" link that will take you directly to it.

Notifications can be configured in your Personal Settings, and you can disable them for any content you do not wish to be notified of.

The videos update is now live and adds a new section to your guild site, allowing you to add, categorize, view and comment on videos.

To enable the new videos section for your site, you can go to the Navigation tab of the Site Admin and enable the "Videos" link, which would add a link to your main menu pointing to the videos page. The section is available at http://yoursite.mmoguildsites.net/videos.

The videos depend on youtube, and make use of its api to fetch information. Adding a video is done by simply pasting a link to an existing youtube video and choosing a category for it.

Along with the main videos section, a videos tab was also added to the members profile page, listing any videos you have added, and two new video blocks were created, "Latest Videos" and "Popular Videos", you can choose to add to the side blocks or home page of your site.

Videos List


Shown Video


This update also includes a few FFXI specific blocks showing information such as Game Time, the hours for crafting guilds and the weak magic relations to the days.

FFXI Blocks

With the theme editor update now live, we thought we would write a little tips and tricks post about some of the things you can do with the new custom css feature.

Using the Custom CSS feature does require some knowledge of CSS, if you are not familiar with it and are interested in learning, we recommend checking out the W3 Schools website - http://www.w3schools.com/css/default.asp

Repositioning Elements
One of the many features of CSS is the ability to reposition elements on the page. Here is a few examples:

Place Main Menu Above Banner
Say you want to position the main menu above the banner (by default it is below). You can do this by adding this custom css to your theme:

/* position main menu above banner */
#main_menu { position: absolute; top: 0px; width: 1000px; }
#banner { margin-top: 28px; }

/* hacked added for IE7, as it renders incorrectly */
#banner { #margin-bottom: 10px; }

What this does is reposition the main menu absolutely to the top of the page. By default, the main menu is set to use all of the available width, so since it has been moved out of the normal flow of the page you will want to set the width of it to the same width you have set for your theme so that it looks correct (in this example, 1000px). You can find out or change the width of your theme by clicking on Global Settings.

The banner also needs to be told to make space available to fit the main menu above it, so we add a 28px space above the banner (the height of the main menu). And, since IE7 is not web standards complaint and fails to render this properly, we add a hack to make it look correct on IE7; the #margin-bottom is not valid css so will be ignored by standard complaint browsers, but IE7 will still use it.

Place the user status bar at the bottom of the browser window
For another example, say you want to position the user status bar to be at the bottom of the users browser window, so it is always visible there even while they scroll the page.

To do this you would add this line of css:

/* fix position user status to bottom of browser window */
#user_status { position: fixed; bottom: 0px; left: 15%; width: 70%; border: 1px solid black !important; }

This will position the user status bar right at the bottom of the browser window, in a fixed position, so it stays there even while they scroll the page. We set the user status to be 70% of the width of the page, and starts from 15% of the left of the page, this will make it appear centered and look a little nicer. Finally since by default the user status has no side or top borders we add them; the "!important" statement tells css to give this rule higher priority then others, to ensure our border will be set.

If you wanted, you could also position this at the top of the browser window rather then the bottom, by just changing the bottom: 0px to top: 0px:

/* fix position user status to top of browser window */
#user_status { position: fixed; top: 0px; left: 15%; width: 70%; border: 1px solid black !important; }

*note: this trick requires the browser to support the css rule position: fixed, it is well supported in all modern browsers such as Mozilla Firefox, Epiphany, Safari, and Opera. It does work in IE 7 also, but it will not work with IE 6.

Over-writing existing styles
With the Custom CSS feature, you can change or over-write any style that we apply to your site.

To find out what styles we apply to your site, you can right click on the page while viewing your guild site and go to "View Source", then right at the top of the page you will see two stylesheet links.

Our default styles:
http://assets0.mmoguildsites.net/stylesheets/design_v3.css

Your custom styles, which are generated from the theme editor: (the id will vary depending on your site)
http://assets0.mmoguildsites.net/stylesheets/custom/41310_style.css

You can view these and if you see anything you dislike or want to change, you can just modify those rules and paste them into the custom css. Because you are over-writing styles, you will likely want to include the "!important" rule with them, to ensure your rule takes precedent to the existing rules. Here is a few examples:

Changing font scaling
We make text smaller in some parts of the site when we feel it is less important, and larger in other parts of the site when we feel it is more important, we do this primarily with the css classes .small_font and .large_font, which set the font to be either 90% the original size or 120% of the original size. You can over-ride these styles, if for example you wanted the small_font to be even smaller, say 80%, and you wanted the large font to be even larger, say 130%

/* change font scaling for small and large fonts */
.small_font { font-size: 0.8em !important; }
.large_font { font-size: 1.3em !important; }

Changing side blocks spacing
By default we add a margin to the bottom of the side blocks, to space them out slightly from each other to look more correct. If you were planning to add your own graphics for the side block and wanted to create a linked effect, where all the side blocks were together, you may wish to remove this spacing. You can disable it by adding the css:

/* make sideblocks positioned together without vertical spacing */
div.side_box { margin-bottom: 0px !important; }

Adding your own extra styles
Along with changing any styles we set and repositioning elements, you can also add your own additional styles to the site, adding some extra visual flair. Here are a few examples:

Making Menu Links Uppercase
You could make your menu links stand out more by making them all uppercase with the css rule:

/* make main menu links small-caps */
#main_menu { font-variant: small-caps; }

Make Calendar weekends have their own color
We have extra css classes on quite a few elements in the site you can use to add extra styles, and one example of this is with the calendar, the weekends have the class .weekend, so you can use this to color those differently if you would like:

/* make calendar weekends a special color */
table.calendar td.weekend { background: #1c1c1c !important; }


Hopefully that shows some of the things which you can do with the custom CSS feature.

We have created an example theme with the custom css from this blog post applied to it you can view and play around with here - http://www.mmoguildsites.com/themes/41305. (all of the styles except the side blocks spacing one are applied to it)

If you come up with a creative use for the custom CSS feature or the theme editor we'd love to see it, email us to let us know at staff@mmoguildsites.com

The Theming update is now live! This update includes changes to the www.mmoguildsites.com website, an entirely re-written Theme Editor with lots of new features, and new layout changes to nearly every page of your guild site.

CHANGES TO THEME EDITOR
The theme editor has been completely re-written and offers many new features and a much improved UI.

*note: The Theme Editor uses a lot of javascript, and the more modern web browser you can use the better experience you will have with it. We recommend Mozilla Firefox.

Fast AJAX UI
The theme editors UI has been made very modern, allowing you to work on a preview view similar to your site and have nearly all actions happen instantly with no page refresh. Selecting colors, borders, fonts and even adding and positioning images with the theme editor happen without having to refresh the page, allowing you to quickly create and edit themes.

Workflow Improvements
You can now apply your theme you are working on from the theme editor directly to your site, rather then having to first save it as before.

New Themable Elements
Several new elements can be themed with the new theme editor, which are:

Pollbars, Table Headers, Table Highlights (two available), Notification Box, Popup Box and Header, Menu Links and Other Text.

To keep the theme editor compatible with older themes and existing site themes, we selected existing colors from your themes to populate the new elements, which seems to have worked out well. If you were using one of Severed Pinkies themes, she is working to have them updating by the end of today to take advantage of the new theme elements. You can reload her themes into the theme editor and then recustomize them to enable some of the new colors for your site.

Most of the elements are pretty straight-forward, but the Other Text and Table Highlights may be a little less obvious. We added the Other Text element as a way to have two text colors on the site, it is meant as a shaded color to compliment your regular text color, and is mostly used for labels. The Table Highlights are also meant to compliment your existing table colors, and are used to highlight things such as special dates on the calendar.

Custom CSS
You can now include your own CSS with your theme.

* if you give the new theme editor a try we would love to hear your feedback and experience with it, to help us to improve it and make it even better in the future.

CHANGES TO www.mmoguildsites.com

Themes List
The themes list received some polish and has several new features. Themes now are taggable, and a tag cloud is shown in the right sidebar. Searching and sorting has been made simpler, and the UI has been cleaned up.

Working with Themes
You may now edit themes you own. And, for themes which you load into the theme editor, you have the option to save them as a new theme, or save over your old one, allowing you to more easily update your themes.

Themes Accessibility
Setting who is allowed to access your theme has been simplified and made easier; there is now checkboxes which you can check to allow anyone (public) or specific guilds to have access to your themes. If none of the checkboxes are checked, the theme will then be private and only accessible by you.

Members/Guilds
The Members and Guilds sections of MMO Guildsites received a bit of polish to match the new UI for the themes list page

Login Menu
The login menu at the top of MMO Guildsites has received some polish and now includes more information about you when you are logged in, including your avatar, some stats about you, and some useful links.

CHANGES TO GUILD SITES
The UI for nearly all of the pages and blocks on the guild sites have been updated to take advantage of the new elements available in the theme editor.

Member Profiles
The member profiles section has been organized into a tabbed layout now and should have a much more standardized feel for each sub-page of the profile.

Polls
The polls page has received some extra polish. Assigning polls to the sideblock has been made easier and clearer now; when the poll side block is added to your site but a poll is not set to it, it will still be visible; and assigning a poll to the side block will now update the side block without having to refresh the page, making it less confusing to use.

Private Messages
The Private Messaging section was reorganized to make better use of horizontal space, and, more importantly, you will now see an excellent orc icon when you receive system messages from MMO Guildsites! =)

Members List
The members list page now has members grouped by Rank, and are organized by Rank and then Alphabetically, allowing you to more easily find members within your guild.

Avatars
Avatars are now saved in two sizes, 96x96 and 50x50, which allows us to show more compact layouts when a lot of information is necessary, such as on the members list page.

Searching and Pagination
The Searching and Pagination features on the site have been standardized across all the pages now, and offer more information such as how many total records and which sub-set of records you are viewing, as well as any search terms you may be filtering by.

WHATS NEXT?
This was a very long and time consuming update, as it involved basically re-writing the UI for every part of the site. Now that it is complete we plan to get back to shorter and quicker updates.

The next update, which we plan to have finished in 7 to 14 days, we will be adding a Videos section to the site; where you can add videos, categorize them and comment on them. This update will also include some final fantasy XI blocks which were suggested by one of our members.

The following update, we will be adding the Notifications we had mentioned in the first theme preview. We wanted to include them with this update, but as it was taking so long, we decided it would be best to break them out into their own update to prevent and further delays.