In this post I will tell you about the primary parts of a Beehive forum style for this site's system. Our layout is a bit different from a default setup. We've made modifications to the CSS used to style these forums. For those who don't know, CSS stands for Cascading Style Sheet. It should also be noted that any style on the system can be used by any forum on the system. Beehive doesn't provide for private styles.

Let us begin:

---

Each style has a folder placed in the main forums system's styles folder.

Like this:
Forums system
-Styles
--Forum Style (Which can be named virtually anything.)

Now inside the Forum Style folder there are folders and files.
Forum Style
-editor
-images
admin.css
desc.txt*
images.css*
mobile.css*
style.css*
top.php

*The items you usually need to concern yourself with when creating a style.

---

Editor holds the files for styling the editors found throughout the forum, unless you're positive what you're doing, you should just leave it alone.

Images holds default style images. This includes style icons. When I create a style I like to create a folder for my own images.

Like this:

Forum Style -myImgs

OR

Forum Style -images --myImgs

admin.css controls the styling for the forum's administration areas. I usually just leave this alone. It's basic and clean cut. Besides, regular users don't see the areas this file affects.

desc.txt is a text file that tells the system the name of a style to display on drop down lists. In the example shown below Pretty Style by Deanna is what would show on the drop down list.
               Example of desc.txt contents:    Pretty Style by Deanna

images.css tells the system where to find style images, such as icons. It already holds the information for the default system icons, etc.

mobile.css tells mobile phones and similar devices how to display your forum. I tend to leave this one alone as well, unless I want to change things like background colors.

style.css is the style's main css file. This file can be used to control virtually everything about how a forum style appears, including using custom icons, backgrounds, and more.

top.php is the skeleton of main header above the navbar. We strongly suggest you just ignore it. Make a wrong move with it and you've got a broken forum.

This the basic layout of the files and folders inside a Style's main folder, and their purpose.

This is the basic style.css for this forums system.

---

html, body {
    background-color: #EAEFF4;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 100%;
    margin: 0px;
    padding: 0px;
}

.top a:hover {
    background-color: transparent;
}

td.beehive-logo {
    background: transparent;
    align: left;
    width: 150px;
    height: 60px;
    padding: 0px 20px 0px 0px;
}

td.beehive-logo a {
    background: transparent;
    align: left;
    width: 150px;
    height: 60px;
    padding: 0px 20px 0px 0px;
}

.forum_name {
    font-family: verdana, arial, helvetica, sans-serif;
    font-weight: bold;
    font-size: 150%;
    color: #000000;
    margin: 0px;
    padding: 0px 0px 0px 20px;
}

a {
    background-color: transparent;
    color: #000000;
    text-decoration: underline;
}

a.button {
    background-color: #5A809F;
    border: 1px outset;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 100%;
    font-weight: bold;
    margin: 0px;
    outline: none;
    padding: 1px 6px 0px 0px;
    text-align: center;
    text-decoration: none;
}

a.button.upload,
a.button.delete {
    display: inline-block;
    vertical-align: middle;
}

input::-moz-focus-inner {
    border: 0px;
}

input:focus {
    outline: 0px;
}

form {
    margin: 0px;
    padding: 0px;
}

frame {
    border: 0px none #000000;
    margin: 0px;
    padding: 0px;
}

frameset {
    border: 0px none;
    margin: 0px;
    padding: 0px;
}

h1 {
    background-color: #C8D7E6;
    color: #000000;
    font-size: 100%;
    font-weight: bold;
    margin: 0px;
    padding: 2px;
    text-decoration: none;
}

h2 {
    background-color: transparent;
    color: #000000;
    font-size: 90%;
    font-weight: bold;
    margin: 05px 05px 05px 0px;
    text-decoration: none;
}

h3 {
    font-size: 100%;
}

h6 {
    font-size: 80%;
}

img {
    vertical-align: bottom;
}

p {
    color: #000000;
    font-size: 100%;
}

p,
h1,
h2 {
    text-decoration: none;
}

span.ui-helper-hidden-accessible {
    display: none;
}

ul.ui-autocomplete {
    background-color: white;
    border-color: #82827E #F9F9F6 #F9F9F6 #82827E;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    padding: 0px;
}

ul.ui-autocomplete li {
    cursor: default;
    display: block;
    font-size: 100%;
    line-height: 16px;
    margin: 0px;
    overflow: hidden;
}

ul.ui-autocomplete li a {
    display: block;
    padding: 3px;
    text-decoration: none;
}

ul.ui-autocomplete li a:hover,
ul.ui-autocomplete li a.ui-state-focus {
    background-color: #A6BED7;
    color: #FFFFFF;
}

.activeusers {
    font-size: 85%;
    padding: 8px 0px 0px 0px;
}

.birthdayusers {
    font-size: 85%;
    padding: 8px 0px 0px 0px;
}

.add_upload_field {
    cursor: pointer;
}

.admin_folder_perms {
    height: 140px;
    overflow: auto;
    padding: 2px;
}

.admin_options_dropdown {
    width: 300px;
}

.admin_settings_text {
    font-size: 90%;
}

.admin_tools_textarea {
    font-family: monospace;
    width: 650px;
}

.adminipdisplay {
    font-size: 90%;
}

.approved_text {
    font-size: 75%;
}

.attachment_thumb {
    border: 1px solid #777777;
    display: inline-block;
    margin: 5px;
    padding: 5px;
}

.banned_dropdown {
    height: 100px;
    width: 250px;
}

.beehive_bar {
    color: #000000;
    padding-left: 2px;
}

.bhinputcheckbox,
.bhinputradio {
    font-size: 90%;
}

.bhinputcheckboxdisabled,
.bhinputradiodisabled {
    color: #808080;
}

.bhinputlogon {
    width: 165px;
}

.bhseparatorlogon {
    border: 0px solid #A6BED7;
    border-top-width: 1px;
    margin: 10px 0px 5px 0px;
}

.bhinputlogon_warning {
    font-size: 75%;
}

select.bhinputprofileitem {
    width: 574px;
}

.bhinputprofileitem {
    width: 570px;
}

.bhinputprofileprivacy {
    width: 100px;
}

.bhinputsearch {
    background-color: #FFFFFF;
    border: 1px solid #82827e;
    border-bottom-color: #F9F9F6;
    border-right-color: #F9F9F6;
    float: left;
}

.bhinputtext,
.bhtextarea,
.bhselect,
.install_input,
.bhinputlogon,
.bhlogondropdown,
.register_dropdown,
.search_dropdown,
.banned_dropdown,
.links_dropdown,
.timezone_dropdown,
.admin_tools_textarea,
.dictionary_word_display,
.dictionary_best_selection,
.dictionary_change_to,
.post_folder_dropdown,
.thread_title,
.post_content,
.signature_content,
.edit_signature_content,
.friends_dropdown,
.recipient_dropdown,
.recent_user_dropdown,
.admin_options_dropdown,
.user_in_thread_dropdown,
.user_pref_field,
.bhinputprofileitem,
.bhinputprofileprivacy,
.text_captcha_input,
.user_pref_dob_dropdown,
.user_pref_dropdown {
    background-color: #FFFFFF;
    border: 1px inset;
    color: #000000;
    font-size: 100%;
    padding-left: 2px;
}

.bhlightinput {
    font-size: 100%;
    max-height: 40%;
    max-width: 90%;
}

.bhlightselect {
    max-width: 75%;
}

.bhlogondropdown {
    width: 169px;
}

.bhlogonother {
    font-style: italic;
    padding-left: 5px;
}

.bhlogonseparator {
    max-width: 100%;
    width: 350px;
}

.bhselectoptgroup {
    font-size: 100%;
}

.box {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    padding: 0px;
}

.button,
.dictionary_button {
    background-color: #5A809F;
    border-width: 1px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 100%;
    font-weight: bold;
    margin: 0px;
    padding: 1px 6px 0px 0px;
    text-align: center;
    text-decoration: none;
}

.button_disabled {
    background-color: #EBEBE4;
    border: 1px solid buttonhighlight;
    border-bottom-color: buttonshadow;
    border-right-color: buttonshadow;
    color: #808080;
    cursor: pointer;
    font-size: 100%;
    font-weight: bold;
    margin: 0px;
    padding: 1px 6px 0px 0px;
    text-align: center;
    text-decoration: none;
}

.button_image {
    background: transparent;
    border: none;
    cursor: pointer;
    overflow: visible;
    padding: 0px;
    width: auto;
}

.button_image span {
    display: inline-block;
    margin: 0px;
}

.button_image.disabled {
    opacity: 0.4;
}

.button_image.add_option {
    padding-left: 35px;
}

.button_image.delete_option {
    vertical-align: text-bottom;
}

.button_image.delete_question {
    vertical-align: text-bottom;
}

.code {
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    font-family: monospace;
    font-size: 120%;
    color: #000000;
    margin: 0px 10px 10px 40px;
    overflow: auto;
    padding: 3px;
}

pre.code span.emoticon {
    background-image: none;
}

pre.code span.emoticon span {
    display: inherit;
}

fieldset.poll_question {
    margin: 5px 0px 0px 0px;
    width: 680px;
}

fieldset.poll_question + fieldset.poll_question {
    margin: 10px 0px 5px 0px;
}

div.sig {
    margin-top: 10px;
}

div.poll_option_list ol {
    margin-bottom: 5px;
}

div.poll_option_list ol li {
    margin: 5px 0px 0px 0px;
}

div#toolbar {
    background-color: #F5F5F5 !important;
}

.create_poll_display {
    border: 1px solid #808080;
    height: 450px;
    margin-right: 10px;
    overflow: auto;
    padding: 2px;
    width: 540px;
}

.dictionary_best_selection {
    height: 85px;
    margin: 0px;
    padding: 0px;
    width: 330px;
}

.dictionary_best_selection option {
    padding-left: 5px;
    width: 300px;
}
…[Message Truncated] View full message.

This is the default images.css for this site's forums system.

---

.image {
    display: inline-block;
    background-image: url('./images/images.png');
    background-repeat: no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    text-align: left;
    vertical-align: middle;
}

.image.beehive_logo {
    width: 150px;
    height: 28px;
}

.image.mobile_logo {
    width: 150px;
    height: 28px;
}

.image.mobile_back {
    background-position: -200px -60px;
    width: 30px;
    height: 30px;
}

.image.mobile_icon {
    background-position: -230px -60px;
    width: 30px;
    height: 30px;
}

.image.mobile_menu {
    background-position: -260px -60px;
    width: 30px;
    height: 30px;
}

.image.mobile_navigation {
    background-position: -290px -60px;
    width: 30px;
    height: 30px;
}

.image.mobile_post {
    background-position: -320px -60px;
    width: 30px;
    height: 30px;
}

.image.mobile_reply_all {
    background-position: -200px -90px;
    width: 30px;
    height: 30px;
}

.image.add {
    background-position: -230px -90px;
    width: 16px;
    height: 16px;
}

.image.admin_locked {
    background-position: -246px -90px;
    width: 16px;
    height: 16px;
}

.image.admin_tool {
    background-position: -262px -90px;
    width: 16px;
    height: 16px;
}

.image.approved {
    background-position: -278px -90px;
    width: 16px;
    height: 16px;
}

.image.attach {
    background-position: -294px -90px;
    width: 16px;
    height: 16px;
}

.image.bigstar, .image.forum_add_favourite, .image.forum_remove_favourite {
    background-position: 50% 50%;
    background-image: url('./images/bigstar.png');
    width: 16px;
    height: 16px;
}

.image.bullet {
    background-position: -310px -90px;
    width: 16px;
    height: 16px;
}

.image.close {
    background-position: -326px -90px;
    width: 16px;
    height: 16px;
}

.image.current_thread {
    background-position: -0px -106px;
    width: 16px;
    height: 16px;
}

.image.default_forum {
    background-position: -230px -106px;
    width: 16px;
    height: 16px;
}

.image.default_group {
    background-position: -16px -106px;
    width: 16px;
    height: 16px;
}

.image.delete {
    background-position: -246px -106px;
    width: 16px;
    height: 16px;
}

.image.edit {
    background-position: -32px -106px;
    width: 16px;
    height: 16px;
}

.image.email {
    background-position: -262px -106px;
    width: 16px;
    height: 16px;
}

.image.enemy {
    background-position: -48px -106px;
    width: 16px;
    height: 16px;
}

.image.error {
    background-position: -278px -106px;
    width: 16px;
    height: 16px;
}

.image.export {
    background-position: -64px -106px;
    width: 16px;
    height: 16px;
}

.image.folder {
    background-position: -294px -106px;
    width: 16px;
    height: 16px;
}

.image.folder_add {
    background-position: -80px -106px;
    width: 16px;
    height: 16px;
}

.image.folder_ignored {
    background-position: -310px -106px;
    width: 16px;
    height: 16px;
}

.image.folder_subscribed {
    background-position: -96px -106px;
    width: 16px;
    height: 16px;
}

.image.forward {
    background-position: -326px -106px;
    width: 16px;
    height: 16px;
}

.image.friend {
    background-position: -112px -106px;
    width: 16px;
    height: 16px;
}

.image.help {
    background-position: -128px -106px;
    width: 16px;
    height: 16px;
}

.image.high_interest {
    background-position: -144px -106px;
    width: 16px;
    height: 16px;
}

.image.home {
    background-position: -160px -106px;
    width: 16px;
    height: 16px;
}

.image.link {
    background-position: -176px -106px;
    width: 16px;
    height: 16px;
}

.image.link_add {
    background-position: -192px -120px;
    width: 16px;
    height: 16px;
}

.image.mark_as_unread {
    background-position: -208px -120px;
    width: 16px;
    height: 16px;
}

.image.merge_thread {
    background-position: -0px -122px;
    width: 16px;
    height: 16px;
}

.image.message_down {
    background-position: -224px -122px;
    width: 16px;
    height: 16px;
}

.image.message_up {
    background-position: -16px -122px;
    width: 16px;
    height: 16px;
}

.image.mods_list {
    background-position: -240px -122px;
    width: 16px;
    height: 16px;
}

.image.move_down {
    background-position: -32px -122px;
    width: 16px;
    height: 16px;
}

.image.move_up {
    background-position: -256px -122px;
    width: 16px;
    height: 16px;
}

.image.options {
    background-position: -48px -122px;
    width: 16px;
    height: 16px;
}

.image.pm_read {
    background-position: -272px -122px;
    width: 16px;
    height: 16px;
}

.image.pm_unread {
    background-position: -64px -122px;
    width: 16px;
    height: 16px;
}

.image.poll {
    background-position: -288px -122px;
    width: 16px;
    height: 16px;
}

.image.post {
    background-position: -80px -122px;
    width: 16px;
    height: 16px;
}

.image.post_options {
    background-position: -304px -122px;
    width: 16px;
    height: 16px;
}

.image.post_read {
    background-position: -96px -122px;
    width: 16px;
    height: 16px;
}

.image.post_unread {
    background-position: -320px -122px;
    width: 16px;
    height: 16px;
}

.image.print {
    background-position: -112px -122px;
    width: 16px;
    height: 16px;
}

.image.quick_reply {
    background-position: -128px -122px;
    width: 16px;
    height: 16px;
}

.image.quick_reply_all {
    background-position: -144px -122px;
    width: 16px;
    height: 16px;
}

.image.reload {
    background-position: -160px -122px;
    width: 16px;
    height: 16px;
}

.image.reply_all {
    background-position: -176px -122px;
    width: 16px;
    height: 16px;
}

.image.rss {
    background-position: -192px -136px;
    width: 16px;
    height: 16px;
}

.image.search {
    background-position: -208px -136px;
    width: 16px;
    height: 16px;
}

.image.search_button {
    background-position: 50% 50%;
    background-image: url('./images/search.gif');
    width: 16px;
    height: 16px;
}

.image.separator {
    background-position: -224px -138px;
    width: 16px;
    height: 16px;
}

.image.set_default_forum {
    background-position: -16px -138px;
    width: 16px;
    height: 16px;
}

.image.set_default_group {
    background-position: -240px -138px;
    width: 16px;
    height: 16px;
}

.image.sort_asc {
    background-position: -32px -138px;
    width: 16px;
    height: 16px;
}

.image.sort_desc {
    background-position: -256px -138px;
    width: 16px;
    height: 16px;
}

.image.split_thread {
    background-position: -48px -138px;
    width: 16px;
    height: 16px;
}

.image.sticky {
    background-position: -272px -138px;
    width: 16px;
    height: 16px;
}

.image.stop {
    background-position: -64px -138px;
    width: 16px;
    height: 16px;
}

.image.subscribe {
    background-position: -288px -138px;
    width: 16px;
    height: 16px;
}

.image.success {
    background-position: -80px -138px;
    width: 16px;
    height: 16px;
}

.image.thread_closed {
    background-position: -304px -138px;
    width: 16px;
    height: 16px;
}

.image.thread_options {
    background-position: -96px -138px;
    width: 16px;
    height: 16px;
}

.image.thread_starter {
    background-position: -320px -138px;
    width: 16px;
    height: 16px;
}

.image.unread_thread {
    background-position: -112px -138px;
    width: 16px;
    height: 16px;
}

.image.warning {
    background-position: -128px -138px;
    width: 16px;
    height: 16px;
}

.image.hide {
    background-position: -144px -138px;
    width: 15px;
    height: 15px;
}

.image.quote_disabled {
    background-position: -159px -138px;
    width: 15px;
    height: 15px;
}

.image.quote_enabled {
    background-position: -174px -138px;
    width: 15px;
    height: 15px;
}

.image.show {
    background-position: -189px -152px;
    width: 15px;
    height: 15px;
}

.image.status_offline {
    background-position: -336px -122px;
    width: 12px;
    height: 12px;
}

.image.status_online {
    background-position: -336px -134px;
    width: 12px;
    height: 12px;
}

.image.vote_down_off {
    background-position: -336px -146px;
    width: 12px;
    height: 12px;
}

.image.vote_down_on {
    background-position: -204px -152px;
    width: 12px;
    height: 12px;
}

.image.vote_up_off {
    background-position: -144px -153px;
    width: 12px;
    height: 12px;
}

.image.vote_up_on {
    background-position: -156px -153px;
    width: 12px;
    height: 12px;
}

image.loading {
    background-image: url('./images/loading.gif');
    width: 15px;
    height: 15px;
}