MyBB Central

Full Version: Template/Theme Design Question
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Alrighty so I have been working with this unofficial forum for the last few days and it's the first forum I have ever really tried to create! Eventually I would like to create and run a forum however this is simply for the sake of learning to use and edit MyBB related content...

Mmk so I have been trying to edit/create my own template starting with the original base... My creation is here:
http://www.wares-forum.com
I like the way it is coming along and I am basically done with the basic stuff... only thing left to do is maybe creating new icons and rank badges.

However there are a few things in the template coding I don't understand and can't seem to figure out on my own! My basic plan was that when I ran into something I didn't know I made it this bright ass green color so it would stand out... However either I'm just overlooking a few things or they aren't visible... So the coding below are the ones I have issues with or do not understand!

Code:
.trow_shaded {
    background: #66ff00;
}
What is this?


Code:
.smalltext {
        
    font-size: 11px;
}

.largetext {
    font-size: 16px;
    font-weight: bold;
}
What text is this for?


Code:
.editor {
    background: #66ff00;
    border: 1px solid #0253a1;
}
Couldn't find this either! What is this for?

Code:
.autocomplete {
    background: #f0e9db;
    border: 1px solid #0253a1;
    color: black;
}

.autocomplete_selected {
    background: #66ff00;
    color: #000;
}
What are these two things for?

Code:
.invalid_field {
    border: 1px solid #66ff00;
    color: #f30;
}

.valid_field {
    border: 1px solid #66ff00;
}

.validation_error {
    background: url(images/invalid.gif) no-repeat center left;
    color: #f30;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}

.validation_success {
    background: url(images/valid.gif) no-repeat center left;
    color: #00b200;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}

.validation_loading {
    background: url(images/spinner.gif) no-repeat center left;
    color: #555;
    margin: 5px 0;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
    padding-left: 22px;
}
Couldn't figure these ones out either!!



Code:
/* Additional CSS (Master) */
img {
    border: none;
}

.clear {
    clear: both;
}

.hidden {
    display: none;
    float: none;
    width: 1%;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.menu ul {
    list-style: none;
    margin: 0;
}

.menu li {
    display: inline;
    padding-left: 5px;
}

.menu img {
    padding-right: 5px;
    vertical-align: top;
}

#panel .links {
    margin: 0;
    float: right;
}

.expcolimage {
    float: right;
    width: auto;
    vertical-align: middle;
    margin-top: 3px;
}
None of that made since...

Code:
img.attachment {
    border: 1px solid #0253a1;
    padding: 2px;
}
Think this is for the border around an img a user attaches to their post??

Code:
#copyright {
    font: 11px Verdana, Arial, Sans-Serif;
    margin: 0;
    padding: 10px 0 0 0;
}

#debug {
    float: right;
    text-align: right;
    margin-top: 0;
}
Guessing this has to do with the "Powered By MyBB, © 2002-2009 MyBB Group." However what is the "#debug" for?

Code:
.subforumicon {
    border: 0;
    vertical-align: middle;
}
Is this for an icon to be placed between the "New posts/closed" images and the title of the forum??

Code:
.separator {
    margin: 5px;
    padding: 0;
    height: 0px;
    font-size: 1px;
    list-style-type: none;
}

form {
    margin: 0;
    padding: 0;
}



.popup_menu .popup_item_container {
    margin: 1px;
    text-align: left;
}

.popup_menu .popup_item {
    display: block;
    padding: 3px;
    text-decoration: none;
    white-space: nowrap;
}

.popup_menu a.popup_item:hover {
    text-decoration: none;
}

.autocomplete {
    text-align: left;
}

.subject_new {
    font-weight: bold;
}

.highlight {
    background: #FFFFCC;
    padding: 3px;
}
No clue what any of this is...

Code:
.red_alert {
    background: #f0e9db;
    border: 1px solid #A5161A;
    color: #A5161A;
    text-align: center;
    padding: 5px 20px;
    font-size: 11px;
}
What's a red alert? I know what the PM alert was but couldn't find this one...


Code:
.pagination {
    font-size: 11px;
    padding-top: 10px;
    margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
    padding-top: 0;
}

.pagination .pages {
    font-weight: bold;
}

.pagination .pagination_current, .pagination a {
    padding: 2px 6px;
    margin-bottom: 3px;
}

.pagination a {
    border: 1px solid #81A2C4;
}

.pagination .pagination_current {
    background: #F5F5F5;
    border: 1px solid #81A2C4;
    font-weight: bold;
}

.pagination a:hover {
    background: #F5F5F5;
    text-decoration: none;
}

.thread_legend, .thread_legend dd {
    margin: 0;
    padding: 0;
}

.thread_legend dd {
    padding-bottom: 4px;
    margin-right: 15px;
}

.thread_legend img {
    margin-right: 4px;
    vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
    margin: 0;
    padding: 0;
}

.forum_legend dd {
    float: left;
    margin-right: 10px;
}

.forum_legend dt {
    margin-right: 10px;
    float: left;
}
No clue what any of that is either...

Code:
.success_message {
    color: #66ff00;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 10px;
}

.error_message {
    color: #66ff00;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 10px;
}
Are these for the messages displayed when you succesfully/failed to post a new thread or post and are being redirected?

Code:
.post_body {
    padding: 5px;
}

.post_content {
    padding: 5px 10px;
}

.quick_jump {
    background: url(images/jump.gif) no-repeat 0;
    width: 13px;
    height: 13px;
    padding-left: 13px; /* amount of padding needed for image to fully show */
    vertical-align: middle;
    border: none;
}
Last but not least none of that made any since either...


I know that's a lot to cover in one post but I have an odd feeling it is all pretty simple I'm just missing it...
If you choose to help me out on this one bare in mind this is the first time I have worked with any of this... I dabbled in some HTML about 4 years ago and that was it...
Other then the coding if you have any ideas or comments on the template progress so far just let me know! I'm dying to here people opinions!!

To those who do decide to help I greatly appreciate it and owe you big time! lol If you ever need a signature for this site or just a graphic in general hit me up and I'll see what I can do!!
A lot of them are clear from the name. .smalltext is for smaller text than usual, .largetext is for larger text than usual. .editor is probably the text editor background. #debug is the little chunk of code with server stats in the bottom right hand corner. All the .pagination ones are the page numbers in threads and forums.

When I don't know what a CSS class does, I change the background colour to the most bright and crazy colour I can find, and then try and find it on the forum; then I know where it is and exactly what it does. You can probably find most of them by doing a template search for the names, but without the . at the start, so just smalltext or largetext etc etc, you should be able to find where they're used that way too.
Yea the color idea is exactly what I was doing but some of them I couldn't find... Mmk well that already helps me a lot so thanks bro!!