Dark Themes

When a theme is dark? Well, it really depends. But in general, when you use dark backgrounds on considerably important sections of the theme, it will be a dark theme. At least, that’s how I take it. Usually the typo is a light color.
Black is usually considered to represent elegance. Though, be carefully about the complementary colors you use.
Dark themes are more commonly hard on the eyes, this might be a usual mistake with a dark theme.

Light Themes

Well, I guess a light theme is easier to identify. We could say it’s the opposite of a light theme (at least when it comes to color usage), it usually involves pastel backgrounds and typo could vary from dark to light colors.
A light theme provides a sense of amplitude to your site (of the same nature white provides).

Both?

Some times, it might be very hard, (and perhaps impossible) to identify a theme under this generic parameters. You can take advantage of both main color schemes to make a very neutral theme.

Simple as Red

First of all, sorry for my recent inactivity… but as some sort of payback, here’s a MyBB theme!

This clean and fresh theme was originally a custom design for MyBB for Dummies. Unfortunatly the site closed. So my client (Joshua Mayer) asked me to release it the theme to the public. So if you want to thank someone for this, please thank Josh

Enjoy it!

Simple as Red (1901)

When downlaoding this theme, you agree with the following terms:

• There is no credit on the footer, just enjoy it! and do not redistribute it if you want it to stay like this.
• You may not redistribute this theme in any way without prior author permission. Usage of images from this theme on other projects of any nature is not allowed.

Curvy Corners

This little script might be a great help to deliver those rounded corners to some browsers that don’t support CSS3 border radius yet. I’ve only tried it with Opera 9.6 (I was exited about its existence so I just ran to share with you ), and it seems to work pretty well.

You’re free to use them in any of your creations, just don’t re-distribute this set by itself. If you want to share this, please do so by linking to this site.
Button Set : Coffee Shop (1747)

“Web 2.0” style?

During my experience as theme designer, I’ve been asked many times to make “Web 2.0” style themes. And I’m like, “what?”. That tells nothing if you know the actual meaning of Web 2.0.

In simple words, Web 2.0 is the kind of interaction between users on a website. It’s different from the Web 1.0 because the end user is no longer just an spectator, now the users can form part of the site show. They can participate by commenting, uploading stuff, interact with other users and the site’s author, etc.

Glossy ≠ Web 2.0

Yeah, this is very important. Many people thinks that a very glossy design is Web 2.0, but it is not. At the start of Web 2.0, people thought glossy was cool and Web 2.0‘ish because it was the new technique. Now, it’s some overused. But it’s still looking good if you know how to use glossy elements.

If you’re making a glossy theme, you’ve got to be very careful on how many and where you use glossy images. If you use glossy images on every single thing, the final result won’t look as good as it could be.

An actual Web 2.0 theme

1. If you’re to make a Web 2.0 theme, there are some things you need to consider.
Have a close eye on usability of the site, make sure breadcrumbs are up and easy to find by the user. Also make menus easy to understand, if necessary, take away all that fancy things surrounding each menu element.

2. Use proper semantics for your templates. Use lists for menus, do not use tables, don’t add img tags to give shapes to the site (is much better to manage that through CSS backgrounds), etc.

3. Keep accessibility as a top priority. Make texts readable, and try to emphasize what triggers and action and what cancel it.

Installing

To use, just download the zip below and upload its contents to /jscripts/editor_themes/
Then, go to your AdminCP and go to Themes and Templates > Themes > *your theme* > Edit theme properties > Editor Style > Select “Bleu” from the dropdown menu. Save your changes, and you’re ready to rock!

If you want to change the white color from the box that contains the text, you must edit your theme CSS. Just change the background of textarea.

Variations

As you can see, this editor theme is black and blue, but a green and red variation will be coming on the next days.

emm… typo!

Nope, “Bleu” comes from the french word for Blue =P

Thanks?

If you liked this, you should comment that out! Or if you’ve got any question, just comment.

Preview:

When downlaoding this editor theme, you agree with the following terms:
• You may use it on any of your personal themes.
• You may NOT use this editor theme on any paid theme at all.
• You may not redistribute this edior theme in any way without prior author permission. Nor you can claim it as your work.

Step 4: sketch!

Yeah, we had some brainstorm before. But let’s give our theme a solid form, trying to get an approach of how the theme will look when running with our forum script. This step can be done on both paper or computer, as we’re making something more concrete. This shouldn’t take long, or be very detailed.

Step 5: Mockup

A mockup is a scale or full-size model of a design or device, used for teaching, demonstration, evaluating a design, promotion, and other purposes. A mockup is called a prototype if it provides at least part of the functionality of a system and enables testing of a design.[1]

Well, that was just to save you a google search. Now, back to our theme. The mockup can be done in any image manipulation application, and it attemps to represent how the actually theme will look like. Now you can use your sketchs to guide yourself while making this. But now you have to polish every detail you can, since this mockup will be the base of your theme from now on. Try to keep dimensions in mind when making your mockup, you’ll be most likely to slice this document for your theme.

Step 6: Slicing

Now we have to slice our mockup, this step requires some thinking (specially if you’re making a fluid theme). Since we want a quality theme, we’ll try to avoid using img tags on our markup to give shape to our theme, that wouldn’t be semantic. Instead of placing img tags, we’ll use CSS backgrounds. So you have to think what way you’ll slice your mockup, so you can apply the background to existing elements on the templates (so we don’t get with tons of divs which would slow the page load), of course, in most cases we’ll have to add new elements or edit the current ones to achieve our design.

hmm… what did you say?

To explain this steps in a better way, in the next days we’ll be posting an article which goes through all this steps with a real example, and the theme will be released once we cover all the steps!

The theme features an image rotator, the right character changes so users don’t get bored of the same guy over there, or in order to display other things (I don’t know, be creative). To replace those placeholder images, you just have to delete the current images at images/otaku-flame/header/ and place the ones you choose. I recomend to use transparent backgrounds on your images (renders), this goes for the logo too.

I think this theme can be used for other boards rather than just anime with some customization. By changing the container background image (it’s too anime-ish, and) and replace the the characters with some other stuff, you can come up with something different.

So, what are your thoughts?

OtakuFlame Theme (162)

When downlaoding this theme, you agree with the following terms:
• You may modify templates, stylesheets and images to fit your needs. As long as you do not remove or reduce visibility of the credits/copyright. If you base your work on this theme, you may add your copyright, but you CANNOT remove the original credit.
• You may not redistribute this theme in any way without prior author permission. Usage of images from this theme on other projects of any nature is not allowed.

What is ColoRanks?
ColoRanks are User Rank Images that are 123×26, user friendly rank image icons.
It currently comes in 20 colors, more will be added with next release.

Demo
http://www.demo.coloranks.info/

Support
Support Thread
Official Website (down at the moment)

Update Logs
-Version Number: 1.0
Date of Release: March 7th, 2009
Notes: First release of ColoRanks.
-Version Number: 1.1
Date of Release: March 8th, 2009
Notes: Fixed size of red images. Included background images. Added version number to folder.
-Version Number: 1.2
Date of Release: March 21st, 2009
Notes: Added 3 additional colors: grey, light blue, and yellow.
-Version Number: 2.0
Date of Release: April 11th, 2009
Notes: Fixed image names. Added 1 additional colors and 1 new set.
-Version Number: 2.5
Date of Release: May 9th, 2009
Notes: Removed misresized gradients. Replaced with 123×26 blue and green.
Added WM2, GreenShadow, and MyBB. Fixed Yellow Gloss. Added spanish.
-Version Number: 3.0
Date of Release: May 28th, 2009
Notes: Added myaqua and Pro.
-Version Number: 3.1
Date of Release: June 6th, 2009
Notes: Added Super Mod. Added MyAdvertising.
-Version Number: 3.5
Date of Release: June 30th, 2009
Notes: Fixed major gloss rank problem. Added BloGreen.

Included
-ColoRank Images (Orange, Blue, Green, Red, Yellow, Light Blue, Black, Gradient Blue, Gradient Green, Gradient Grey, MyBB, GreenShadow, WM2, myaqua, MyAdvertising)*
-ColoRanks Pro Images
-Readme

Download
Download Link (external)
Download Link (internal)

License
This image package is licensed under the Creative Commons License.
You may use (NOT distribute) these image icons on any website without any link backs of any sort.
You may also edit any of the following images as long as it is not distributed.
In the event that you do redistribute it (along with any edits), provide a link to Discuss Admin titled either “K. Jenkins”, “Kyle Jenkins”, “Infranight”, or “Discuss Admin” in the readme and the page of redistribution.
You MAY NOT resell this package, even after editing, for any profit, regardless of if I get any percent of it Wink.

Texts (the words that are on the rank images)
-Active Member
-Administrator
-Banned
-Co Administrator
-Coder
-Designer
-Developer
-Ex Administrator
-Ex Management
-Ex Moderator
-Group Leader
-Guest
-Guru
-Head of Staff
-Jr Member
-Jr Staff Member
-Management
-Member
-Moderator
-Not Validated
-Paid Member
-Pain in the Neck
-Premium
-Reporter
-Retired Staff
-Root Admin.
-RSS Bot
-Search Engine
-Spammer
-Special Member
-Sponsor
-Sr Member
-Sr Staff Member
-Staff Member
-Subscriber
-Super Mod
-Warner
-Support Team
-Top Poster
-Validating
-VIP

Copyright Discuss Admin 2009