What's it all about?

72dpi is my own little geek wonderland, to show my sites, to give things back to the community like Web Skins, photoshop & flash goodies, as well as a place to have the occasional rant.

Alert *Please note: The new forum integration means all existing members will have to re-signup via the forum. Sorry for the inconvenience..., but at least this way I can notify you of skin & plugin updates a lot easier.

Articles

A New Free Template
Published: August 16, 2007
Print   

A New LookI 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)

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!

Alert 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 in the *downloads section (*requires membership), and is only for the Subdreamer CMS.



View Comments (0)