A New Free Subdreamer Template

Ryan — Fri, 17 Aug 2007 12:23:55 +0000

I decided (after subtle nudging from TullyMan) to pull my finger out and release a new skin for the Subdreamer Content Management System. The skin you see here makes the use of many new features.

Features

Skin uses MooTools as an effects base
Fantastic new SEO menu (thanks to XhUnTeR for this!)
Mootools effect on the drop down menu
MooTools ToolTips
Skin switcher, choice of 4 colors (Again, thanks to X!)
Font-Sizer/Switcher
Semantic output for modules
Div & CSS based
Forum integration

Plus loads more…

What else can i do?

Grunge Boxes!

You can add grunge boxes into your content. By adding a few div’s and assigning a class, you can add content simply * easily. Currently I have only included blue boxes, so feel free to create your own.

It’s a good place to start to make things “stand out” a little better.

Use like:

< div class=”roughbluebox”>
< div>
< div>
< div>
< h2 class=”roughbluebox”>heading goes here!< / h2>
< div class=”roughbluebox_content”>

< p>Content goes here!< /p>

< / div>
< / div>
< / div>
< / div>
< / div>

Cpanel

I have added a “CPanel” for you to add goodies to. This uses MooTools for the action, and degrades gracefully if JS is turned off. I recommend only adding extras in this box, not things like user Logins etc…

Tool Tips

If you want to add a Tool Tip to an item, such as an image or a link, you can do so by adding a class and a title within the code.
ie: < img src=”blah.gif” alt=”blah” title=”Tip Title :: Hello!” class=”Tips2″ width=”10″ height=”10″ />
More examples:

Tips1 == Appears instantly
Tips2 == Fades in & Out
Tips3 == Fixed Position
Tips4 == Custom Box (design your own Via CSS)

Want to know more? see the MooTools Demo!

The beauty is, the styles are controlled by CSS.

Classes for color

two important additions are:
Alert (red text) – Use like: class=”alert”
Confirm (green text) – Use like: class=”confirm”
Again, this is for visual appeal & recognition.

Heading Classes

I have added styles for headings, to helps split up content.

H1 tag

H2 tag

H3 tag

H4 tag

H5 tag

Unordered Lists

Want more control over the style of your unordered lists? yeah, mee too, so I have added a few classes to make your life better.

This is an unordered lists using arrows
Use like: < ul class=”arrow”>

This is an unordered lists using dots
Use like: < ul class=”dot”>

This is an unordered lists using ticks
Use like: < ul class=”tick”>

This is an unordered lists using the acrobat icon
Use like: < ul class=”acrobat”>

This is an unordered lists using the external acrobat icon
Use like: < ul class=”acrobatout”>

This is an unordered lists using the “jump to anchor” icon
Use like: < ul class=”anchor”>

This is an unordered lists using the “linkout” icon
Use like: < ul class=”linkout”>

Classes for links

To give you more control over looks, and help with visual design, I have adedd several classes that allow you to design the overall look & feel of links. These include links:
Linkout – use: class=”linkout”
Anchor – use: class=”anchor”
Acrobatout out – use: class=”acrobatout”
Acrobat – use: class=”acrobat”

Dividing content

Want to break up your content, rather than just use a “hr” (horizontal rule)then use: < div class=”hdot”>

The class hdot will add a 1 px hight dotted line across the page.

Where to from here?

Get creative, add extras, you can add so much to this skin it’s not funny. Since it has MooTools as a base, you can extend features, add image slides & more. Visit MooTools for more tricks.

Consider this a work in progress, it will be released on Subdreamer.org hopefully this saturday. All feedback is welcome (I expect to get a million bug reports.

Any questions, just ask!

Important Information!

*Note: if you use “Div’s” in your content, or any plugins do, any extra closing divs/bad markup will break the layout, so be sure your content & plugins are well coded!

Download

This skin is available at Subdreamer.org (*requires membership), and is only for the Subdreamer CMS.

72dpi.net.au » Subdreamer