Theme Competition 2008
Just wanted to post on this since a number of people have expressed that they are not too familiar with CSS or how to go about starting in this competition. Not only is this easy, but it's also relatively simple for anyone to create a theme for HBH. Hopefully, this will inspire more people to create the theme that THEY want to use, instead of just settling for someone else's theme.
That being said, the first thing you'll want to do is set up a test area on your local machine so that you can see the changes as you make them. Just go ahead and make a folder somewhere on your local machine then, from your browser, go to File, Save Page As (may be slightly different for different browsers… using FF here), and save the HBH main page as an html file in that folder you created (I called mine template.html). Now, if there's not a "template_files" folder created in the folder you created, then just make a folder named like that: your html file's name followed by _files. This is where the majority of the images and CSS will be pulled from.
Navigate to each of these links and (File, Save Page As) to your (whatever)_files folder:
The CSS you'll be modifying: http://www.hellboundhackers.org/fusion_themes/HBH/styles.css No modification needed: http://www.hellboundhackers.org/fusion_themes/common.css No modification needed: http://www.hellboundhackers.org/css.css
Now, view your (whatever).html file on your local machine and, with those, you should have a functional layout that is just missing images. We'll go ahead and grab those now and put those in the same folder as the CSS:
Top banner: http://www.hellboundhackers.org/fusion_images/hbhbanner.png Gray triangle on nav items on left: http://www.hellboundhackers.org/fusion_themes/HBH/images/bullet.gif Gray triangle facing opposite (on Shoutbox Archive link and Poll Link): http://www.hellboundhackers.org/fusion_themes/HBH/images/bulletb.gif Red triangle on master nav items on left: http://www.hellboundhackers.org/fusion_images/newbutton.gif
Now, create an "images" folder inside of your (whatever)_files folder, add the bullet.gif from the list above to this new folder, then add these two as well:
Middle area heading background: http://www.hellboundhackers.org/fusion_themes/HBH/images/capmain.gif Side area heading background: http://www.hellboundhackers.org/fusion_themes/HBH/images/scapmain.gif
Hopefully, you should have a working template now (except for your avatar and some of the unimportant images like Paypal, the ad at the top, etc.). This is most of what I did to get my test area in place, but I may have left something out (it was all trial and error). If you find that to be the case, feel free to post or PM me telling me what is missing, and I'll add it in here.
My next post in this thread will be a quick primer to the important CSS for this competition, as well as the specifics of the styles.css file that you'll be working with.
Glad you found it helpful. Now, we'll move on to the CSS portion of the assistance. For that, let's go ahead and see a quick CSS primer.
The main CSS properties that will be used: color font-weight / text-decoration background-color / background-image border / border-style / border-width / border-color
Do your research on those to understand them; w3schools is really helpful for this. To sum it all up:
color specifies text color, font-weight makes text bold, text-decoration gives text underlines, background-color and background-image assigns colors or images to the background, border-style specifies the border type, border-width specifies the border thickness, border-color specifies the border color, and border is the shorthand for those border properties.
To apply CSS properties, you can specify properties settings for HTML elements (a, div, table, etc.), an element's id attribute (by preceding the id with a #), or an element's class attribute (by preceding the class name with a period). The basic layout of a CSS rule is this:
#mydiv { /* This is a comment / color:0000; / This sets the text color to be black… using the HTML color code / text-decoration:underline; font-weight:bold; border-style:dashed; border-width:2px; / Widths and such are usually specified in number of pixels */ }
Your rules can have as few or as many of the properties as you want.
Also, CSS has the ability to define alternate rules for when you hover over certain elements. For that, you use a rule that starts like this:
#mydiv:hover
Well, that's about all I can do with a quick CSS primer. Futility has offered to post his commented CSS file to help out with locating where the different rules apply and such, which I know will help immensely in getting lots of people involved. For those that are not familiar with CSS (or are not very good at it), just take the tips shown here, learn a bit from the sources online, then take a practical try at it. Let's get the community involved in this competition!
Remember, the competition lasts until the end of the year but, if you want yours to have a chance at being the default for Halloween, you need to have that theme in at least a couple of days before Halloween!
Quick note to those entering this competition: Yes, there is a CSS class named "admin" for the coloring and font-weight of the admin names on the site. Do not change the color or font-weight; it is only there for you to override any other color-changing rules you might have. Also, be sure to not modify any of the margin and padding settings, nor any width or height settings that you might come across. Any of those things could result in automatic rejection of your entry. Be aware that these themes are not going to be tested on the live site, so no need to try to be crafty. Good luck, all!
heres my theme submitted.. I changed it to black and white. Whatever at least I tried.
Giant image btw.
http://img401.imageshack.us/img401/7449/hellboundhackers1225063qx5.png
no dude you have orange and mines just white .. someone can edit mine if they wish:
http://www.mediafire.com/?sharekey=46ef09c99cf4ab52d2db6fb9a8902bda
moshbat wrote: My half completed attempt. http://i151.photobucket.com/albums/s138/moshbat/scsht.jpg
EDIT: Low quality image to save you time… Yes, I did just change tyhe colour of the banner and give the edges a … Burnt look… Looks like we think alike, moshbat. Here's a glimpse of the one I submitted earlier today:
http://i466.photobucket.com/albums/rr25/Zephyr_Pure/screenie-1.jpg
hellboundhackersok wrote: thanks but I don't feel like working anymore
and sh** I did change the admin colors whatever you guys can change it. Edit the hell out of it idc.
That's the main problem with members right now… most don't care to put in the effort that a number of us do to make the content quality content. If you don't care to follow the miniscule stipulations of the competition, your entry can just be forfeited. Laziness is not acceptable.
Most contests that I have seen here on HBH have been aimed more towards the 'elite' members- those who have been around for a while and know what's going on. A few people take part in them and the competition ends up falling apart and failing. So now I'm going to post something that will (hopefully) make this simple competition easier for everyone. The easier it seems, the more people will compete. The more people that compete, the more likely it is to succeed with spectacular results.
Creating a theme is not difficult. I had zero knowledge of CSS before I went into this, and now I have a fairly cool theme set up. Sure it needs some tweaking, but it'll get there.
Anyway, on to the main part. I've taken "styles.css" and commented in what changing most of the properties will do. Now all you have to do is change the colors to fit what you want. Comments are enclosed in /* */. I'd suggest using a text editor with some sort of syntax highlighting to make it easier. Notepad++ is my personal favorite. Remember, this is my first time working with CSS, so if anyone notices any mistakes, feel free to correct me.
/* Computer News, Website News, Podcasts, and Urban Defacement */
color: #cccccc;
/* Border around main part (body) of page */
background-color: 00000;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:10px;
margin:0px;
}
/* Normal names, buddy list, affiliates, "My Profile", article titles */
a { color:#ddcc88; text-decoration:none; }
/* Color it changes to when you hover over. This should normally be the same as the one you used before */
a:hover { color:#ddcc88; text-decoration:underline; }
/* Normal names in shoutbox, poll text, sub-topics ( "Basic Web Hacking" "Logical" "Stegano" etc)*/
a.side { color:#ffddaa; text-decoration:none; }
a:hover.side { color:#ffddaa; text-decoration:underline; }
/* Not Sure, but probably not relavant */
a.white { color:#ddd; text-decoration:none; }
a:hover.white { color:#333; text-decoration:underline; }
/* ExclusiveMember color ... just like it says */
.exclusiveMember { color: orange; }
form { margin:0px 0px 0px 0px; }
/* Horizontal spacer lines. */
hr { height:2px; border-top:81f1c 1px solid; border-bottom:#485f5c 1px solid; }
hr.side-hr { height:2px; border-top:#283f3c 1px solid; border-bottom:#687f7c 1px solid; }
td { font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:10px; }
a
pre { font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:9px; }
/* "Posts" "Location" "Joined" "Rank" */
.alt { color:#aaa; }
.white-header {
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:10px;
color:#ccc;
/* Background for quote on top and footer on bottom */
background-color:#283f3c;
padding:4px;
/* Border for what is above. */
border-top:#586f6c 1px solid;
border-bottom:#586f6c 1px solid;
}
.full-header {
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:10px;
/* Background around banner */
color:#fff;background-color:#485f5c;
width:100%;
}
/* Subscribe/unsubscribe and Shout buttons */
.button {
font-family:Tahoma,Arial,Verdana,Sans-Serif;
font-size:10px;
color:00;background-color:#687f7c;
height:19px;
background-image:url(images/button.gif);
background-repeat:repeat-x;
border:1px #687f7c solid;margin-top:2px;
}
/* Text boxes before you login */
.textbox {
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:10px;
color:#ccc;background-color:81f1c;
border:1px #687f7c solid;
}
.password {
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:10px;
color:#ccc;background-color:81f1c;
border:1px #687f7c solid;
}
.pstrength-minchar {
font-size : 10px;
}
/* Background of title, news, and border around recent posts */
.main-body { font-size:11px; color:#ccc; background-color:#283f3c; padding:3px 4px 3px 4px; }
/* Titles such as Home, main, shop, learn (on left) and Poll text, "My Buddy List", how many points you have and text in the "Members Online" section */
.side-body { font-size:10px; color:#fff; padding:4px 4px 6px 4px; }
/* Exactly what it says. The main background color. */
.main-bg { background-color:81f1c; padding:10px; }
/* Border around the news sections */
.border {
border-width:0px 1px 1px 1px;border-color:#485f5c;border-style:solid;
}
/* Exactly what it says. Borders on the left and right side */
.side-border-left { background-color:#485f5c; border-width:0px 1px 0px 0px; border-color:#3c3c3c; border-style:solid; }
.side-border-right { background-color:#485f5c; border-width:0px 0px 0px 1px; border-color:#3c3c3c; border-style:solid; }
/* Another fairly simple one. The box that is found at the bottom of every news submission */
.news-footer {
font-size:9px;
color:#ccc;background-color:#182f2c;
padding:2px 2px 2px 2px;
}
/* Not seeing a difference in main page or forum */
.barmain {
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:10px;font-weight:bold;
color:#ddd;
height:20px;
padding:0px 2px 2px 2px;
background-image:url(images/barmain.gif);background-repeat:repeat-x;}
/* I don't know how else to say this. It's the bar on the left. */
.barleft {
width:2px;height:20px;
background-image:url(images/barleft.gif);
}
/* See barleft */
.barright {
width:2px;height:20px;
background-image:url(images/barright.gif);
}
/* "Welcome to Hellboundhackers" on top */
.capmain {
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:10px;font-weight:bold;
color:#ddd;
height:20px;
padding:5px 2px 2px 5px;
/* To change the color here, you're going to need to change the "capmain" image.
Usually the 'gradient' tool is used in Photoshop and GIMP. Then you just
Change where the url() is pointed.
*/
background-image:url(capmain.gif);background-repeat:repeat;
}
.capleft {
width:2px;height:20px;
background-image:url(images/capleft.gif);
}
.capright {
width:2px;height:20px;
background-image:url(images/capright.gif);
}
.scapmain {
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:10px;font-weight:bold;
/* Changes "Navigation" "Buddy List" "Affiliates"... all text that's in the 'scapmain' images */
color:00;
height:19px;
padding:0px 2px 0px 2px;
/* Change the scapmain image as you would the capmain */
background-image:url(scapmain.gif);background-repeat:repeat-x;
border-width:1px 0px 1px 0px;border-color:#283f3c 00 #283f3c 00;border-style:solid;
}
/* Forum table border */
.tbl-border { background-color:#384f4c; }
.tbl { font-size:11px; padding:3px 4px 3px 4px; }
/* Highlighting around the lighter forum posts */
.tbl1 { font-size:11px; color:#ccc; background-color:#283f3c; padding:4px; }
/* Darker */
.tbl2 { font-size:11px; color:#ccc; background-color:#182f2c; padding:4px; }
/* Not sure, but once again probably not relevant */
.forum-caption {
font-size:10px;font-weight:bold;
color:#ddd;background-color:#283f3c;
height:20px;
padding:0px 4px 2px 4px;
background-image:url(capmain.gif);background-repeat:repeat-x;
}
/* Forum quotes */
.quote {
color:#ccc;
background-color:#182f2c;
padding:2px;
margin:0px 20px 0px 20px;
border:1px #284f4c solid;
}
/* outline around the poll bars */
.poll { height:12px; border:1px 00 solid; }
/* Comments */
.comment-name { font-weight:bold; color:#ddcc88; }
/* shoutbox name, date, and color of text. */
.shoutboxname { font-weight:bold; color:#ffddaa; }
.shoutbox { color:#ccc; }
.shoutboxdate { font-size:9px; color:#aaa; }
/* Admin. Don't touch */
.admin { font-weight:bold; color:white; }
.small { font-size:9px; font-weight:normal; }
.small2 { font-size:9px; font-weight:normal; color:#aaa; }
.side-small { font-size:10px; font-weight:normal; color:#fff; }
/* background of "Shop Learn Links Communicate Submit etc */
.side-label { background-color:#384f4c; padding:2px; }
.news_title {
padding:5px;
font-size:11px;
position:relative;
top:-5px;
z-index: 1;
line-height: 0;
}
.news_box {
}
.news_capmain {
font-family:Verdana,Tahoma,Arial,Sans-Serif;
/* news titles - words */
color:#ddd;
height:20px;
background-image:url(capmain.gif);background-repeat:repeat;
width:100%;
padding:1px;
padding-bottom:0px;
overflow:hidden;
text-align:left;
vertical-align:top;
}
/* Time in the top right */
.time {
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:10px;
color:#ccc;
padding:4px;
position:absolute;
right: 10px;
top: 100px;
}
.open_table {
/* Border around "Welcome to HellboundHackers" and "Latest Forum Posts" sections */
width: 100%;
border: 1px solid #586f6c;
}
/* Here is where you'd change the image you use for the bulleted lists */
.navlink {
padding-left:7px;
background-image:url('bullet.gif');
background-repeat:no-repeat;
background-position: center left;
line-height:12px;
}
ul
{
list-style: none;
padding: 0;
margin: 1px 0px 1px 10px;
}
.articlelink {
font-size:10px;
width:150px;
overflow:hidden;
}```
So lets go. As you can see, it's not that difficult. All you really have to do is try. With a small amount of time and little effort, *you *can make HBH look how *you *want it.
Zephyr_Pure wrote: That's the main problem with members right now… most don't care to put in the effort that a number of us do to make the content quality content. If you don't care to follow the miniscule stipulations of the competition, your entry can just be forfeited. Laziness is not acceptable.
I see no reason to, as you don't get anything worthwhile.
This is my submission for the Halloween contest. Comments would be appreciated. :D
HZ wrote: This is my submission for the Halloween contest. Comments would be appreciated. :D
http://i36.tinypic.com/jrsmft.jpg Ooh, me likes :D very well done!
HZ wrote: This is my submission for the Halloween contest. Comments would be appreciated. :D
http://i36.tinypic.com/jrsmft.jpg Nice one.. I loved it. the top banner is nice.
HZ wrote: Should I post the contents of styles.css in a code box, or should I post a link to a dl? The details on how to submit it are located in the news article.
Sorry about the double post, but I've decided to let you guys see my work so far. Remember, I have absolutely no background in CSS or anything related to art. I'm just a normal guy that decided to take a go at this competition. As of right now, the only thing that I really think needs changing is the text in the banner. It's just… weird. And the bullets are kind of hard to notice. Anyway, without further ado, my theme.
http://i252.photobucket.com/albums/hh11/zanimabean/NewHBH.jpg
Tell me what you guys think.
HZ wrote: Should I post the contents of styles.css in a code box, or should I post a link to a dl? Futility wrote: The details on how to submit it are located in the news article.
http://www.hellboundhackers.org/news.php?readmore=404 … Basically.
Futility wrote:\ Anyway, without further ado, my theme.
http://i252.photobucket.com/albums/hh11/zanimabean/NewHBH.jpg
In a few minutes I'll edit this to include a screen shot of the forum, as well. Tell me what you guys think. I think you did quite well. I also think that we have three serious entries in the running as far as I know and, hopefully, more as people hurry up to finish those entries! Deadline is tomorrow for Halloween!
Not much…but hey, I tried. www.mediafire.com/shadowboy1505
Not really one for the halloween theme… and the banner for the theme is not done yet. http://snigelsniper2.co.cc/
EDIT: Banner done :D
@shadowboy1505 - The banner is awesome!
I like it, shadowboy… only things I can say about it are this:
- It's a little bright.
- Some of the colors clash in places.
In general, I recommend that people stick to two or three colors only when making themes, because it's much easier to make a smaller number of colors work well together. Ideally, you're looking to split your colors half between light and dark so, if you have three colors, you need two of one of those types that do not get used together for anything that must be legible. Also, if you're going to do a bright light and a deep dark, you need to take into account the extreme contrast of that combination; often, you'll find that darkening your light some or lightening your dark some will make for a more pleasant theme.
Okay, my rant is done; just wanted to throw that info out there to help out the entrants.
Oh, and shadowboy… that logo at the top totally beats the hell out of my attempt. Too bad I already submitted mine. :P
SnigelSniper wrote: Not really one for the halloween theme… and the banner for the theme is not done yet. http://snigelsniper2.co.cc/
Yeah… that theme is hot. :D Can't wait to see when it's finished.
Yeah I got bored so made one also.
http://img89.imageshack.us/img89/614/themenb8.png
Comments/Suggestions welcome
stdio wrote: Yeah I got bored so made one also.
http://img89.imageshack.us/img89/614/themenb8.png
Comments/Suggestions welcome
Best here yet, imo.
stdio wrote: Yeah I got bored so made one also.
http://img89.imageshack.us/img89/614/themenb8.png
Comments/Suggestions welcome
It looks like the old default with turquoise text and a turquoise banner with no background. It could use some more creative touches. I tried to say that as nicely as I could. :)
hellboundhackersok wrote: Best here yet, imo. Well, no one ever accused you of having a worthwhile opinion… no reason to start now. After all, there was a blue theme posted before this one that was MUCH more creative. It was by SnigelSniper. There were plenty of good themes before that, too. If you're not going to put any effort into participating, at least try to put some effort into posting in my contest thread.
True I do have a lot more work to go before I would really call it finished (especially in the banner). However, I think we have VERY different styles that we prefer. Using snipers example that you like… Its just too busy, with blue on blue, making it harder for me to read. (seems to have a world of warcraft feel) Im trying to keep it easy on the eyes, with no really dark/bright colors, but also contrasting enough to stand out. But ultimetly it will be simple and basic… more my style.
As always appreciate the comments.
stdio wrote: True I do have a lot more work to go before I would really call it finished (especially in the banner). However, I think we have VERY different styles that we prefer. Using snipers example that you like… Its just too busy, with blue on blue, making it harder for me to read. I was using Snipers' theme as an example of one that had a complete creative makeover. To be honest, I wasn't crazy about the blue on blue, either… but, the other design aspects of it were quite nice. Anyways, I look forward to your theme's completion.
http://i50.photobucket.com/albums/f333/MON5T3R/hbh-2.png
Things that i still have to finish; -text colors -link colors -logo -bullets / arrows -textboxes, buttons
good, bad.. let me know
moshbat wrote: I hope to god that's a after/before image…
ehm yes it is lol. heres the full screenshot http://i50.photobucket.com/albums/f333/MON5T3R/hbh1254.png
moshbat wrote: I paid attention. I said that's what you really, really need to do. Besides, what was the point of just changing the green to white/grey/whatever, without changing the fonts – a two minute job– and taking a screenshot at that point?
because I want to, clear enough? It doesnt matter if I changed to font or not, if you noticed im working on the images, background atm. when im happy with how the background colors/ images look then i'll start working on the fonts and links.
I posted that image to see if other members liked the way the theme colors are set up (black/white/gray). If they like it ill simply move to the next part of the project which is the font colors.
This is just a reminder that this competition is coming to a close. You have 8 days to finish (start) any theme you might want to see on HBH. I… don't have much more to say that hasn't already been mentioned either in this thread or here-
http://www.hellboundhackers.org/404-new-theme-competition.html
So get to work. You're running out of time.