A nice trend in web design nowadays are dark themed skins for websites. I generally prefer them to light themes because they are easier on my eyes, which are more sensitive to white backgrounds than they used to be (along with my eyesight being worse as I get older). Have the staff considered adding an option for a dark themed version of the button copy theme? It might be tricky due to the headings already being dark contrasted, but I'm sure other people would appreciate it.
I generally prefer dark theme over light for the same reasons, as I use it on Youtube, Discord and Twitter. But how would a dark theme work with the predominantly green background/theme here?
A brute force solution I occasionally use is a Firefox feature that converts everything into text (no formatting, though I can tell who's post is who's). From there, there's an option to change the theme (dark, sepia, and light). I'm not sure if it has a name and it seems to only work on mobile.
Quote from: SkyPesos on March 26, 2021, 09:27:29 AM
I generally prefer dark theme over light for the same reasons, as I use it on Youtube, Discord and Twitter. But how would a dark theme work with the predominantly green background/theme here?
I've been pondering that as well, and to be honest that's kind of a tricky part to solve.
Quote from: noelbotevera on March 26, 2021, 09:31:37 AM
A brute force solution I occasionally use is a Firefox feature that converts everything into text (no formatting, though I can tell who's post is who's). From there, there's an option to change the theme (dark, sepia, and light). I'm not sure if it has a name and it seems to only work on mobile.
I have a plugin I use for Firefox that kind of does the same thing, called DarkReader, but on this site, it kind of makes some parts harder to read while helping enhance others (like posting)
Quote from: Zeffy on March 26, 2021, 09:35:22 AM
Quote from: SkyPesos on March 26, 2021, 09:27:29 AM
I generally prefer dark theme over light for the same reasons, as I use it on Youtube, Discord and Twitter. But how would a dark theme work with the predominantly green background/theme here?
I've been pondering that as well, and to be honest that's kind of a tricky part to solve.
Quote from: noelbotevera on March 26, 2021, 09:31:37 AM
A brute force solution I occasionally use is a Firefox feature that converts everything into text (no formatting, though I can tell who's post is who's). From there, there's an option to change the theme (dark, sepia, and light). I'm not sure if it has a name and it seems to only work on mobile.
I have a plugin I use for Firefox that kind of does the same thing, called DarkReader, but on this site, it kind of makes some parts harder to read while helping enhance others (like posting)
Yeah I have a similar extension on Chrome and it made sections harder to read. The actual posts though look pretty nice for the most part
Quote from: Zeffy on March 26, 2021, 09:22:40 AM
A nice trend in web design nowadays are dark themed skins for websites. I generally prefer them to light themes because they are easier on my eyes, which are more sensitive to white backgrounds than they used to be (along with my eyesight being worse as I get older).
I'm much older than you, and have gone through five eye surgeries. I have no problem with the existing theme.
Not a perfect solution, but Chrome has an extension called "LiveCSSEditor", in which you create your own overriding style sheets.
(...But it only works for one page at a time.) :-|
I use it on a few sites where the standard visited/unvisited link colors are hard to interpret (#0000ff and #ff00ff are very similar due a weak colorblindness).
If brightness is an issue, my first suggestion would be to just lower the brightness on whatever device you're using. I always keep my laptop quite dimly lit, to the point where others sometimes ask how I can even see what I'm doing. Ever since I started doing that, I've never had any issues, on this forum or elsewhere.
Another option that worked for me before I got a pair of eyeglasses that filter blue light was to turn on the "red shift" (sometimes called "night light" or "night shift") at all times on my devices.
Let's make it dark blue.
The title of this thread got me thinking this might be the Zack Synder version of AAroads.
Let's make it retroreflective green.
The easiest thing to do would be to invert the colors: :-D
(https://i.imgur.com/wsNBYrn.png)
As for answering the actual question posed here: dark mode is nice to have (I have a friend who recently had a concussion and for a month or so using the computer would give her a headache unless she was using something in dark mode). However, I think if we were to install a dark mode theme it would probably be a plain premade one from SMF and not include all of the fancy roadgeek touches that the Button Copy theme uses (since I'm not even sure what a "dark mode" road sign would look like, and designing the existing Button Copy theme took enough energy that I'm not sure I feel like going through the effort again for a few dozen users).
A more pressing issue would be converting the theme to be responsive to mobile devices (i.e. making a version of the theme that automatically resizes to fit a mobile screen). This would mean there would be no need for Tapatalk. I am not sure if making a theme like that is doable in the version of SMF that we're running. I think there is supposed to be a new version of SMF coming out soon that would probably require making a new theme anyway, so it's probably better to wait for that to come out than to try and do anything with it now.
That's fine, outside of some weird quirks with some of the top bar navigation stuff, my DarkReader plugin actually isn't that bad to use.
Quote from: CtrlAltDel on March 26, 2021, 03:35:40 PM
The easiest thing to do would be to invert the colors: :-D
(https://i.imgur.com/wsNBYrn.png)
My avatar looks so cursed when you invert the colors lol
Quote from: Zeffy on March 26, 2021, 04:21:33 PM
That's fine, outside of some weird quirks with some of the top bar navigation stuff, my DarkReader plugin actually isn't that bad to use.
Quote from: CtrlAltDel on March 26, 2021, 03:35:40 PM
The easiest thing to do would be to invert the colors: :-D
(https://i.imgur.com/wsNBYrn.png)
My avatar looks so cursed when you invert the colors lol
Tails Doll?
I just modified the .css file, but there's no way to use one post to display it, since it's over 25,000 characters.
(https://www.aaroads.com/forum/gallery/2069_26_03_21_4_58_41.png)
Let me try to break it up...it's also a work in progress.
...this is Part 1:
/* Styles for the general looks for the Button Copy 2.0 theme.
*/
/* Normal, standard links. */
a:link, a:visited
{
color: #cc8000;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
/* Tables should show empty cells. */
table
{
empty-cells: show;
}
/* Set a fontsize that will look the same in all browsers. */
body
{
background-image: url(../images/bigbackground.png);
background-repeat: repeat;
background-color: #252525;
font-size: 11.5pt;
font-family: Verdana, sans-serif;
margin: 0;
padding: 12px 30px 4px 30px;
}
/* Help popups require a different styling of the body element. */
body#help_popup
{
width: auto;
padding: 1em;
min-width: 0;
}
/* use dark grey for the text, leaving #000 for headers etc */
body, td, th, tr
{
color: #444;
}
/* lets give all forms zero padding/margins */
form
{
padding: 0;
margin: 0;
}
/* We can style the different types of input buttons to be uniform throughout different browsers and their color themes.
.button_submit - covers input[type=submit], input[type=button], button[type=submit] and button[type=button] in all browsers
.button_reset- covers input[type=reset] and button[type=reset] throughout all browsers
.input_check- covers input[type=checkbox] throughout all browsers
.input_radio- covers input[type=radio] throughout all browsers
.input_text - covers input[type=text] throughout all browsers
.input_file - covers input[type=file] throughout all browsers
*/
input, button, select, textarea
{
font-size: 90%;
font-family: Verdana, sans-serif;
color: #000;
}
/* The font size of textareas should be just a little bit larger. */
textarea
{
font: 105% Verdana, sans-serif;
}
/* All input elements that are checkboxes or radio buttons shouldn't have a border around them. */
input.input_check, input.input_radio
{
border: none;
background: none;
}
/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
height: 1px;
border: 0;
color: #666;
background-color: #666;
}
/* By default set the color on these tags as #000. */
h1, h2, h3, h4, h5, h6
{
color: #000;
font-size: 1em;
margin: 0;
padding: 0;
}
.content fieldset
{
border: 2px groove #fff;
padding: 1em;
margin: 0 0 0.3em 0;
}
/* No image should have a border when linked. */
a img
{
border: 0;
}
/* Define strong as bold, and em as italics */
strong
{
font-weight: bold;
}
em
{
font-style: italic;
}
/* Alternative for u tag */
.underline
{
text-decoration: underline;
}
/* Common classes for easy styling.
------------------------------------------------------- */
.floatright
{
float: right;
}
.floatleft
{
float: left;
}
.flow_auto
{
overflow: auto;
}
.flow_hidden
{
overflow: hidden;
}
.clear
{
clear: both;
}
.clear_left
{
clear: left;
}
.clear_right
{
clear: right;
}
/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext, tr.smalltext th
{
font-size: 0.85em;
font-family: verdana, sans-serif;
}
.smalltext1
{
font-size: 0.85em;
font-family: verdana, sans-serif;
color: white;
margin-top: 5px;
}
.smalltext2
{
font-size: 0.85em;
font-family: verdana, sans-serif;
color: black;
}
.smalltext3
{
font-size: 0.85em;
font-family: verdana, sans-serif;
color: white;
}
.smalltext3 a
{
color: #ffcc00;
}
.middletext
{
font-size: 0.9em;
font-family: verdana, sans-serif;
}
.middletext1
{
font-size: 0.9em;
line-height: 1.2em;
}
.middletext1 a
{
color: #ff9900;
}
.normaltext
{
font-size: 1em;
line-height: 1.2em;
}
.largetext
{
font-size: 1.4em;
}
.centertext
{
margin: 0 auto;
text-align: center;
}
.righttext
{
margin-left: auto;
margin-right: 0;
text-align: right;
}
.righttext1
{
margin-left: auto;
margin-right: 0;
text-align: right;
color: white;
}
.lefttext
{
margin-left: 0;
margin-right: auto;
text-align: left;
}
/* some common padding styles */
.padding
{
padding: 0.7em;
}
.main_section, .lower_padding
{
padding-bottom: 0.5em;
}
/* a quick reset list class. */
ul.reset, ul.reset li
{
padding: 0;
margin: 0;
list-style: none;
}
/* Some BBC related styles.
------------------------------------------------------- */
/* A quote, perhaps from another post. */
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote
{
color: #a8a8a8;
border: 1px solid #fff;
margin: 1px;
padding: 1px;
font-size: 9pt;
line-height: 1.4em;
overflow: auto;
}
/* Alterate block quote stylings */
blockquote.bbc_standard_quote
{
background-color: #000;
}
blockquote.bbc_alternate_quote
{
background-color: #252525;
}
/* A code block - maybe even PHP ;). */
code.bbc_code
{
display: block;
font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
font-size: x-small;
background: #333;
border: 1px solid #fff;
line-height: 1.3em;
padding: 1px;
overflow: auto;
white-space: nowrap;
/* Show a scrollbar after about 24 lines. */
max-height: 24em;
}
/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader
{
color: #fff;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
padding: 0 0.3em;
}
/* For links to change the code stuff... */
.codeoperation
{
font-weight: normal;
}
/* Styling for BBC tags */
.bbc_size
{
line-height: 1.4em;
}
.bbc_color a
{
color: inherit;
}
.bbc_img
{
border: 0;
}
.bbc_table
{
font: inherit;
color: inherit;
}
.bbc_table td
{
font: inherit;
color: inherit;
vertical-align: top;
}
.bbc_u
{
text-decoration: underline;
}
.bbc_tt
{
font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
}
/* Generally, those [?] icons.This makes your cursor a help icon. */
.help
{
cursor: help;
}
/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
color: red;
}
/* Highlighted text - such as search results. */
.highlight
{
background-color: #fc0;
font-weight: bold;
color: #000;
}
/* A more discreet highlight color, for selected membergroups etc. */
.highlight2
{
background-color: #f90;
color: #000;
}
/* Generic, mostly color-related, classes.
------------------------------------------------------- */
.titlebg, .titlebg2, tr.titlebg td, tr.titlebg2 td
{
color: #fff;
font-family: Verdana, sans-serif;
font-weight: bold;
background: url(../images/titlebg.png) #000 repeat-x;
}
.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th
{
color: #fff;
font-family: Verdana, sans-serif;
font-weight: bold;
background: url(../images/asphalt.jpg) #252525 repeat-x;
}
.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th
{
background: url(../images/asphalt.jpg) #252525 repeat-x;
}
/* adjust the table versions of headers */
tr.titlebg td, tr.titlebg2 td
{
padding: 6px;
}
tr.catbg td, tr.catbg2 td, td.catbg, td.catbg2, tr.catbg th, tr.catbg2 th, th.catbg, th.catbg2
{
padding: 6px;
}
tr.titlebg td a, tr.titlebg2 td a
{
color: #000;
}
tr.catbg td a, tr.catbg2 td a, .catbg a
{
color: #fff;
}
tr.catbg th.smalltext
{
font-size: 0.9em;
}
/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body, .content
{
color: #ccc;
background-color: #000;
}
.roundframe
{
color: #fff;
background-color: #f6f6f6;
}
.windowbg .content
{
color: #fff;
background-color: #000;
}
.windowbg td
{
background-color: #000;
}
.windowbg2
{
color: #ccc;
background-color: #252525;
}
.windowbg2 .content
{
color: #000000;
background-color: #000;
}
.windowbg2 td
{
background-color: #252525;
}
.windowbg3
{
color: #000000;
background-color: #454545;
}
.windowbg4
{
color: #000000;
background-color: #666666;
}
/* the page navigation area */
.pagesection
{
font-size: 0.9em;
font-family: verdana, sans-serif;
padding: 0.5em 0.2em;
overflow: hidden;
color: white;
}
.pagesection a
{
color: #fc0;
}
.pagelinks
{
font-size: 0.9em;
font-family: verdana, sans-serif;
padding: 0.3em 0;
color: white;
}
.pagelinks a
{
color: #ff6600;
}
/* GenericList */
table.table_grid thead tr.catbg th.smalltext
{
white-space: nowrap;
}
/* Color for background of posts requiring approval */
.approvebg
{
color: #000;
background-color: #ffcc00;
}
/* Color for background of *topics* requiring approval */
.approvetbg
{
color: #000;
background-color: #ff6600;
}
/* sticky posts have a different background */
.stickybg
{
background: #333333;
}
.stickybg2
{
background: #454545;
}
/* locked posts too! */
.lockedbg
{
background: #000;
font-style: italic;
}
.lockedbg2
{
background: #252525;
font-style: italic;
}
/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
width: 100%;
overflow: auto;
line-height: 1.4em;
}
/* All the signatures used in the forum.If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
clear: right;
padding: 1em 0 3px 0;
width: 98%;
border-top: 1px solid #666;
line-height: 1.4em;
font-size: 0.85em;
}
.custom_fields_above_signature
{
clear: right;
padding: 1em 0 3px 0;
width: 98%;
border-top: 1px solid #666;
line-height: 1.4em;
font-size: 0.85em;
}
/* Sometimes there will be an error when you post */
.error
{
color: ff6600;
}
/* Messages that somehow need to attract the attention. */
.alert
{
color: #ff6600;
}
/* Calendar colors for birthdays, events and holidays */
.birthday
{
color: #ff6600;
}
.event
{
color: #ff9900;
}
.holiday
{
color: #ffcc00;
}
/* Colors for warnings */
.warn_mute
{
color: pink;
}
.warn_moderate
{
color: red;
}
.warn_watch, .success
{
color: green;
}
a.moderation_link, a.moderation_link:visited
{
color: red;
font-weight: bold;
}
.openid_login
{
background: black url(../images/openid.gif) no-repeat;
padding-left: 18px;
}
/* a descriptive style */
.description
{
padding: 1em;
font-size: 0.9em;
line-height: 1.5em;
border: 1px solid #bbb;
background: #ffcc00;
margin: 0 0 1em 0;
}
/* an informative style */
.information
{
padding: 1em;
font-size: 0.9em;
line-height: 1.5em;
border: 1px solid #bbb;
background: #ffcc00;
margin: 0 0 1em 0;
}
.information p
{
padding: 1em;
margin: 0;
}
/* AJAX notification bar
------------------------------------------------------- */
#ajax_in_progress
{
background: #32cd32;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 18pt;
padding: 0.4em;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#ajax_in_progress a
{
color: #fff;
text-decoration: underline;
font-size: smaller;
float: right;
}
/* a general table class */
table.table_grid
{
border-collapse: collapse;
border: 1px solid #adadad;
}
table.table_grid td
{
padding: 3px;
border: 1px solid #adadad;
}
/* Lists with settings use these a lot.
------------------------------------------------------- */
dl.settings
{
clear: right;
overflow: auto;
margin: 0 0 10px 0;
padding: 0;
}
dl.settings dt
{
width: 48%;
float: left;
margin: 0 0 10px 0;
padding: 0;
clear: both;
}
dl.settings dt.settings_title
{
width: 100%;
float: none;
margin: 0 0 10px 0;
padding: 5px 0 0 0;
font-weight: bold;
clear: both;
}
dl.settings dt.windowbg
{
width: 98%;
float: left;
margin: 0 0 3px 0;
padding: 0 0 5px 0;
clear: both;
}
dl.settings dd
{
width: 48%;
float: left;
overflow: auto;
margin: 0 0 3px 0;
padding: 0;
}
dl.settings img
{
margin: 0 10px 0 0;
}
/* The main content area.
------------------------------------------------------- */
.content, .roundframe
{
padding: 0.5em 1.2em;
margin: 0;
border: none;
border: 1px solid #adadad;
}
.content p, .roundframe p
{
margin: 0 0 0.5em 0;
}
/* Styles used by the auto suggest control.
------------------------------------------------------- */
.auto_suggest_div
{
border: 1px solid #000;
position: absolute;
visibility: hidden;
}
.auto_suggest_item
{
background-color: #252525;
}
.auto_suggest_item_hover
{
background-color: #000;
cursor: pointer;
color: #00cc00;
}
/* Styles for the standard dropdown menus.
------------------------------------------------------- */
/* Container for the new admin menu */
#adm_container
{
float: left;
margin-left: 10px;
padding: 0 5px 0 5px;
background: url(../images/admintab_left.png) no-repeat;
}
ul.admin_menu, ul.admin_menu li ul
{
margin: 0;
padding: 0;
list-style: none;
}
ul.admin_menu
{
background: url(../images/admintab_right.png) top right no-repeat;
}
ul.admin_menu a
{
text-decoration: none;
}
/* First layer of menu items */
ul.admin_menu li
{
position: relative;
float: left;
background: url(../images/admintab_back.png) top right repeat-x;
padding-right: 4px;
}
ul.admin_menu li.last
{
background: url(../images/admintab_right.png) top right repeat-x;
}
ul.admin_menu li.chosen
{
background: url(../images/admintab_active_left.png) no-repeat;
padding: 0 0 0 6px;
}
ul.admin_menu li h4
{
margin: 0;
padding: 7px 5px 3px 5px;
cursor: pointer;
font-weight: normal;
font-size: x-small;
text-transform: uppercase;
color: white;
}
ul.admin_menu li h4:hover
{
color: fc0;
}
ul.admin_menu li.last.chosen h4
{
background: url(../images/admintab_active_last.png) top right no-repeat;
padding-right: 17px;
color: black;
}
/* IE6 does't support multiple class selectors */
ul.admin_menu li.last_chosen h4
{
background: url(../images/admintab_active_last.png) top right no-repeat;
padding-right: 17px;
color: black;
}
ul.admin_menu li.chosen h4
{
background: url(../images/admintab_active_right.png) top right no-repeat;
padding-right: 10px;
color: black;
}
ul.admin_menu li.chosen h4:hover
{
color: red;
}
/* Second layer of menu items */
ul.admin_menu li ul
{
z-index: 90;
display: none;
position: absolute;
/* IE6 needs a fixed width to prevent the menu from going haywire */
width: 19em;
border: 1px solid #808080;
border-left: 2px solid #6888a7;
background: #000;
}
ul.admin_menu li.chosen ul
{
margin: 0 0 0 -6px;
}
ul.admin_menu li ul li
{
background: none;
width: 19em;
padding: 0;
}
ul.admin_menu li ul li a
{
display: block;
padding: 0.5em 2em 0.5em 0.5em;
font-size: 90%;
text-decoration: none;
background: none;
color: #000 !important;
}
ul.admin_menu li ul li a.subsection
{
background: url(../images/admin/subsection.gif) no-repeat 98% 50%;
}
ul.admin_menu li ul li a.chosen
{
font-weight: bold;
}
ul.admin_menu li ul li a:hover
{
background-color: #252525;
text-decoration: none;
}
ul.admin_menu li:hover ul, ul.admin_menu li.over ul
{
display: block;
}
/* Third layer of menu items */
ul.admin_menu li ul li ul, ul.admin_menu li ul li.over ul
{
display: none;
position: absolute;
top: -999em;
border: 1px solid #a0a0a0;
border-left: 2px solid #6888a7;
background: #454545;
}
ul.admin_menu li ul li:hover ul, ul.admin_menu li ul li.over ul
{
display: block;
left: 18em;
top: auto;
margin: -2em 0 0 1em;
}
#adm_submenus
{
padding: 0 0 0 2em;
}
#adm_submenus, #adm_submenus ul
{
height: 3em;
overflow: auto;
}
/* The dropdown menu toggle image */
div#menu_toggle
{
float: right;
margin: 0 10px 0 0;
background: url(../images/changetab_left.png) top left no-repeat;
padding: 0 0 0 7px;
}
div#menu_toggle a
{
display: block;
background: url(../images/changetab_right.png) top right no-repeat;
padding: 8px 12px 3px 6px;
}
Part 2:
/* Styles for the standard button lists.
------------------------------------------------------- */
.buttonlist ul
{
background: url(../images/maintab_first.png) no-repeat scroll left bottom;
padding: 0 0 0 10px;
}
.buttonlist ul li, .buttonlist_bottom ul li
{
display: inline;
}
.buttonlist ul li a, .buttonlist_bottom ul li a
{
float: left;
display: block;
color: #fff;
font-size: 0.8em;
font-family: tahoma, sans-serif;
text-transform: uppercase;
text-decoration: none;
}
.buttonlist ul li a:hover, .buttonlist_bottom ul li a:hover
{
color: #e0e0ff;
}
.buttonlist ul li a span
{
background: url(../images/maintab_back.png) repeat-x bottom left;
display: block;
padding: 0.1em 0.5em 0.5em 0.5em;
}
.buttonlist ul li a:hover span
{
color: yellow;
}
.buttonlist ul li.last a span
{
background: url(../images/maintab_last.png) no-repeat bottom right;
padding: 0.1em 1em 0.5em 0.5em;
}
.buttonlist ul li.active a span em
{
padding: 0.1em 0.5em 0.5em 0.5em;
display: block;
font-style: normal;
color: black;
background: url(../images/maintab_active_back.png) repeat-x bottom right;
}
.buttonlist ul li.active a:hover span em
{
color: red;
}
.buttonlist ul li.active a span
{
background: url(../images/maintab_active_first.png) no-repeat bottom left;
padding: 0 0 0 8px;
}
.buttonlist ul li.last.active
{
float: left;
background: url(../images/maintab_last.png) no-repeat bottom right;
padding: 0 8px 0 0;
}
.buttonlist ul li.active a
{
background: url(../images/maintab_active_last.png) no-repeat bottom right;
padding-right: 8px;
}
/* For links that are basically submit buttons. */
.buttonlist_submit
{
background: transparent;
color: #fff;
text-transform: uppercase;
vertical-align: top;
text-decoration: none;
font-size: 9px;
font-family: tahoma, sans-serif;
border: 0;
}
.buttonlist_submit:hover
{
color: #e0e0ff;
}
/* ..for the "bottom" menu */
.buttonlist_bottom ul
{
background: url(../images/mirrortab_first.png) no-repeat scroll left top;
padding: 0 0 0 10px;
}
.buttonlist_bottom ul li a span
{
background: url(../images/mirrortab_back.png) repeat-x top left;
display: block;
padding: 0.4em 0.5em 0.2em 0.5em;
}
.buttonlist_bottom ul li a:hover span
{
color: yellow;
}
.buttonlist_bottom ul li.last a span
{
background: url(../images/mirrortab_last.png) no-repeat top right;
padding: 0.4em 1em 0.2em 0.5em;
}
.buttonlist_bottom ul li.active a span em
{
padding: 0.4em 0.5em 0.2em 0.5em;
display: block;
font-style: normal;
color: black;
background: url(../images/mirrortab_active_back.png) repeat-x top right;
}
.buttonlist_bottom ul li.active a:hover span em
{
color: red;
}
.buttonlist_bottom ul li.active a span
{
background: url(../images/mirrortab_active_first.png) no-repeat top left;
padding: 0 0 0 8px;
}
.buttonlist_bottom ul li.lastactive
{
float: left;
background: url(../images/mirrortab_last.png) no-repeat top right;
padding: 0 8px 0 0;
}
.buttonlist_bottom ul li.active a
{
background: url(../images/mirrortab_active_last.png) no-repeat top right;
padding-right: 8px;
}
/* The old-style button strips, with images */
.oldbuttonlist
{
text-align: right;
padding: 0.5em;
}
/* a smaller quick-button list */
ul.quickbuttons
{
margin: 0.9em 11px 0 0;
clear: right;
float: right;
text-align: right;
}
ul.quickbuttons li
{
float: left;
display: inline;
margin: 0 0 0 11px;
}
ul.quickbuttons li a
{
padding: 0 0 0.7em 20px;
display: block;
height: 20px;
font: bold 0.85em/18px arial, sans-serif;
float: left;
}
ul.quickbuttons li.quote_button
{
background: url(../images/buttons/mutcd_quote.png) no-repeat 0 0;
}
ul.quickbuttons li.remove_button
{
background: url(../images/buttons/mutcd_delete.png) no-repeat 0 0;
}
ul.quickbuttons li.modify_button
{
background: url(../images/buttons/mutcd_edit.png) no-repeat 0 0;
}
ul.quickbuttons li.approve_button
{
background: url(../images/buttons/mutcd_approve.png) no-repeat 0 0;
}
ul.quickbuttons li.restore_button
{
background: url(../images/buttons/restore_topic.gif) no-repeat 0 0;
}
ul.quickbuttons li.split_button
{
background: url(../images/buttons/mutcd_split.png) no-repeat 0 0;
}
ul.quickbuttons li.reply_button
{
background: url(../images/buttons/mutcd_reply.png) no-repeat 0 0;
}
ul.quickbuttons li.reply_all_button
{
background: url(../images/buttons/mutcd_reply.png) no-repeat 0 0;
}
ul.quickbuttons li.notify_button
{
background: url(../images/buttons/mutcd_notify_sm.png) no-repeat 0 0;
}
ul.quickbuttons li.inline_mod_check
{
margin: 0 0 0 5px;
}
.generic_tab_strip
{
margin: 0 1em 2em;
}
.generic_tab_strip .buttonlist
{
float: left !important;
}
/* the navigation list */
ul#navigation
{
margin: 0;
font-size: 0.9em;
padding: 1em 0.4em;
}
ul#navigation li
{
float: none;
font-size: 0.95em;
display: inline;
}
/* Styles for the general looks for the Core theme.
------------------------------------------------------- */
/* this is the main container surrounding everything, use this to set forum width, font-sizeetc. */
#mainframe
{
font-size: 85%;
width: 95%;
margin: auto;
}
/* the forum name or logo */
h1#forum_name
{
padding: 0.6em 0 0.6em 0;
margin: 0;
font-family: Verdana, sans-serif;
font-size: 135%;
color: #fff;
}
/* The greeting section */
#greeting_section
{
padding: 0.7em 0.4em 0.7em 0.4em;
clear: both;
}
#greeting_section li
{
font-weight: normal;
}
#greeting_section li#name
{
padding-left: 0.5em;
}
#greeting_section li em
{
font-style: normal;
font-weight: bold;
}
/* user section with all relevant links */
#user_section
{
padding: 1px;
margin: 1px 0 0 0;
font-size: 90%;
}
#user_section ul, #user_section form
{
padding: 0.5em 0.7em 0.5em 0.7em;
}
/* the avatar, located to the left */
#user_section #myavatar
{
padding: 0.7em;
border-right: 1px solid #adadad;
margin: 0 0.5em 0 0;
float: left;
background-color: #252525;
}
/* the news and search areas */
#news_section
{
clear: both;
font-size: 0.8em;
padding: 0.5em 1em 0.5em 1em;
}
#random_news h3
{
margin-right: 1em;
font-size: 0.85em;
display: inline;
color: white;
}
#random_news p
{
margin: 0;
padding: 0;
display: inline;
}
/* The main menu. */
.main_menu
{
padding-left: 1em;
}
.main_menu ul
{
list-style: none;
padding: 0;
margin: 0;
background: url(../images/maintab_first.png) no-repeat bottom left;
padding-left: 10px;
}
.main_menu li
{
margin: 0;
padding: 0;
display: inline;
}
.main_menu li a:link, .main_menu li a:visited
{
float: left;
display: block;
color: #fc0;
font-size: 0.8em;
font-family: tahoma, sans-serif;
text-transform: uppercase;
}
.main_menu li a:hover
{
color: #ffcc00;
text-decoration: none;
}
.main_menu li a span
{
background: url(../images/maintab_back.png) repeat-x bottom left;
display: block;
padding: 0.1em 0.5em 0.5em 0.5em;
}
.main_menu li a:hover span
{
color: #ffcc00;
}
.main_menu li.last a span
{
background: url(../images/maintab_last.png) no-repeat bottom right;
padding: 0.1em 1em 0.5em 0.5em;
}
.main_menu li.active a span em
{
padding: 0.1em 0.5em 0.5em 0.5em;
display: block;
font-style: normal;
color: #00aa00;
background: url(../images/maintab_active_back.png) repeat-x bottom right;
}
.main_menu li.active a:hover span em
{
color: red;
}
.main_menu li.active a span
{
background: url(../images/maintab_active_first.png) no-repeat bottom left;
padding: 0 0 0 8px;
}
.main_menu li.last.active
{
float: left;
background: url(../images/maintab_last.png) no-repeat bottom right;
padding: 0 8px 0 0;
}
/* IE6 doesn't support multiple class selectors */
.main_menu li.lastactive
{
float: left;
padding: 0 8px 0 0;
background: url(../images/maintab_last.png) no-repeat bottom right;
}
.main_menu li.active a
{
background: url(../images/maintab_active_last.png) no-repeat bottom right;
padding-right: 8px;
}
/* the linktree */
ul.linktree
{
clear: both;
width: 100%;
list-style: none;
margin: 0;
padding: 1.5em 0.5em 0.5em 0.5em;
overflow: hidden;
color: #808080;
}
ul.linktree li
{
float: left;
padding: 0 0.5em 0 0;
font-size: 0.85em;
}
ul.linktree li a
{
color: #fff;
}
ul.linktree li a:hover
{
color: yellow;
}
ul.linktree li span
{
font-weight: bold;
}
/* the footer area */
#footerarea
{
padding: 1em 0 2em 0;
text-align: center;
color: #fff;
}
#footerarea ul
{
margin: 0 auto 0 auto;
}
#footerarea ul li
{
text-align: center;
display: inline;
border-right: 1px solid #888;
margin: 0;
padding: 0 4px 0 2px;
}
#footerarea a
{
color: #fc0;
}
/* Note: It is against the license to remove, alter or otherwise hide the copyright output from SMF so please do not alter the two sections below. */
#footerarea ul li.copyright
{
display: block;
line-height: 0;
font-size: small;
padding: 1em;
}
#footerarea ul li.copyright, #footerarea ul li.last
{
border-right: none;
}
/* page created in.. */
#footerarea p
{
clear: both;
text-align: left;
padding-left: 0.5em;
}
p#show_loadtime
{
display: block;
text-align: center;
}
/* the upshrink buttons */
#upshrink, #advsearch
{
margin: 0 1ex;
}
/* Styles for a typical table.
------------------------------------------------------- */
table.table_list
{
width: 100%;
}
table.table_list p
{
padding: 0;
margin: 0;
}
table.table_list td,table.table_list th
{
padding: 5px;
}
table.table_list tbody.header td
{
padding: 0;
}
table.table_list tbody.content td.stats
{
font-size: 90%;
width: 15%;
text-align: center;
}
table.table_list tbody.content td.lastpost
{
line-height: 1.2em;
font-size: 85%;
width: 24%;
}
table.table_list tbody.content td.icon
{
text-align: center;
width: 6%;
}
/* Styles for headers.
------------------------------------------------------- */
/* Styles for headers used in Curve templates. */
h3.catbg, h3.catbg2, h3.titlebg, h4.titlebg, h4.catbg, div.titlebg, .table_list tbody.header td
{
overflow: hidden;
line-height: 2em;
font-weight: bold;
}
h3.titlebg, h4.titlebg
{
border-left: 1px solid #adadad;
border-right: 1px solid #adadad;
}
h3.titlebg, h4.catbg
{
padding: 0 0.5em !important;
}
h3.catbg img.icon, div.titlebg img.icon, h3.catbg img
{
float: left;
margin: 5px 8px 0 0;
}
/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
color: #ccc;
font-style: normal;
background: url(../images/titlebg.png) #454545 repeat-x;
border-bottom: solid 1px #9BAEBF;
border-top: solid 1px #FFFFFF;
padding-left: 10px;
padding-right: 10px;
}
.titlebg
{
font-weight: bold;
color: white;
font-style: normal;
text-decoration: none;
}
.titlebg a:link, .titlebg a:visited
{
font-weight: bold;
color: #ff6600;
font-style: normal;
text-decoration: none;
}
.titlebg a:hover
{
color: white;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
color: #ffcc00;
font-style: normal;
text-decoration: none;
}
.titlebg2 a:hover
{
text-decoration: underline;
}
/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers. */
.catbg, tr.catbg td, .catbg3, tr.catbg3 td
{
background: url(../images/asphalt.jpg) #444444 repeat-x;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg2, tr.catbg2 td
{
background: url(../images/asphalt.jpg) #444444 repeat-x;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
border-bottom: 1px solid #375576;
}
.catbg, .catbg2
{
font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
font-size: 95%;
color: white;
text-decoration: none;
}
.catbg a:link, .catbg a:visited, .catbg2 a:link, .catbg2 a:visited
{
color: white;
text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
color: #ff0000;
}
/* Styles for the board index.
------------------------------------------------- */
p#stats
{
text-align: right;
}
h3#newsfader
{
font-size: 1em;
}
#smfNewsFader
{
font-weight: bold;
line-height: 1.4em;
padding: 1em;
font-size: 1em;
text-align: center;
}
#upshrink_ic
{
margin-right: 2ex;
text-align: right;
}
.categoryframe
{
margin-top: 0.4em;
}
.categoryframe h3
{
margin: 0;
}
table.boardsframe
{
width: 100%;
}
table.boardsframe td.icon
{
text-align: center;
padding: 0.5em;
width: 6%;
}
table.boardsframe td.info
{
width: 60%;
padding: 0;
}
table.boardsframe td.info h4
{
padding: 0.4em 0.4em 0 0.4em;
margin: 0;
}
table.boardsframe td.info p
{
padding: 0 0.4em 0.5em 0.4em;
margin: 0;
}
table.boardsframe td.info p.moderators
{
font-size: 0.8em;
font-family: verdana, sans-serif;
}
table.boardsframe td.stats
{
width: 8%;
vertical-align: middle;
text-align: center;
}
table.boardsframe td.lastpost
{
width: 20%;
vertical-align: top;
padding: 0.5em;
}
#posticons
{
clear: both;
width: 100%;
}
#posticons .buttonlist
{
margin-right: 1em;
float: right;
}
/* the newsfader */
#smfFadeScroller
{
text-align: center;
overflow: auto;
color: #000000; /* shouldn't be shorthand style due to JS bug in IE! */
}
/* Styles for the info center on the board index.
---------------------------------------------------- */
#infocenterframe
{
margin-top: 2em;
clear: both;
}
/* each section in infocenter has this class */
.infocenter_section
{
clear: both;
}
.infocenter_section p.section
{
display: block;
margin: 0;
width: 30px;
text-align: center;
float: left;
padding: 0.5em 0 0 0;
}
.infocenter_section div.sectionbody
{
margin-left: 30px;
padding: 0.3em;
border-left: 1px solid #a0a0a0;
min-height: 25px;
height: auto !important;
}
/* recent posts - or just one recent post */
dl#infocenter_recentposts
{
float: left;
width: 100%;
padding: 0;
margin: 0;
}
dl#infocenter_recentposts dt
{
clear: left;
float: left;
padding: 0.1em;
width: 68%;
white-space: nowrap;
overflow: hidden;
}
dl#infocenter_recentposts dd
{
clear: right;
float: right;
padding: 0.1em;
width: 25%;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
/* login form */
form#infocenter_login ul.horizlist label
{
white-space: nowrap;
font-size: 90%;
font-weight: bold;
}
/* Styles for the message (topic) index.
---------------------------------------------------- */
#childboards table
{
width: 100%;
}
.modbuttons
{
clear: both;
width: 100%;
}
.buttonlist, .buttonlist_bottom
{
margin-right: 1em;
float: right;
}
#messageindex td.icon1, #messageindex td.icon2
{
text-align: center;
padding: 0.5em;
width: 5%;
}
#messageindex td.subject
{
padding: 0.5em;
}
#messageindex td.starter
{
text-align: center;
padding: 0.5em;
width: 14%;
}
#messageindex td.replies
{
text-align: center;
padding: 0.5em;
width: 4%;
}
#messageindex td.views
{
text-align: center;
padding: 0.5em;
width: 4%;
}
#messageindex td.lastpost
{
padding: 0.5em;
width: 22%;
}
#messageindex td.moderation
{
text-align: center;
padding: 0.5em;
width: 4%;
}
#topic_icons p
{
display: block;
padding: 0.5em 0.5em 0.1em 0.5em;
margin: 0;
border-bottom: none;
font-weight: normal !important;
}
#topic_icons ul
{
display: block;
padding: 0.5em 1em 0.1em 1em;
margin: 0;
border-bottom: none;
font-weight: normal !important;
}
#message_index_jump_to
{
margin: 2em 4em 0 2em;
}
.lastpost img
{
float: right;
}
/* Styles for the display template (topic view).
---------------------------------------------------- */
.linked_events
{
clear: both;
margin: 1em 0;
}
.linked_events .edit_event
{
color: #f00;
}
#moderationbuttons
{
margin-left: 0.5em;
}
#postbuttons .nav, #postbuttons_lower .nav
{
margin: 0.5em 0.5em 0 0;
text-align: right;
}
#postbuttons_lower .nav
{
margin: 0 0.5em 0.5em 0;
}
#postbuttons, #postbuttons_lower
{
text-align: right;
}
/* Poll question */
h4#pollquestion
{
padding: 1em 0 1em 2em;
}
/* Poll vote options */
#poll_options ul.options
{
border-top: 1px solid #696969;
padding: 1em 2.5em 0 2em;
margin: 0 0 1em 0;
}
#poll_options div.submitbutton
{
clear: both;
padding: 0 0 1em 2em;
}
#poll_options div.submitbutton.border
{
border-bottom: 1px solid #696969;
margin: 0 0 1em 0;
}
/* Poll results */
#poll_options dl.options
{
border: solid #808080;
border-width: 1px 0;
padding: 1em 2.5em 0 2em;
margin: 0 0 1em 0;
}
#poll_options dl.options dt.voted
{
font-weight: bold;
}
#poll_options dl.options dd
{
margin: 0.5em 0 1em 0;
}
/* Poll notices */
#poll_options p
{
margin: 0 1.5em 0.2em 1.5em;
padding: 0 0.5em 0.5em 0.5em;
}
div#pollmoderation
{
margin: -1em 0 0 2em;
padding: 0;
}
.approve_post
{
margin: 2ex;
padding: 1ex;
border: 2px dashed #cc3344;
color: #000;
font-weight: bold;
}
#forumposts h3.catbg3
{
font-weight: normal;
padding: 0.4em;
overflow: hidden;
}
#forumposts h3.catbg3 img
{
float: left;
vertical-align: middle;
}
#forumposts h3.catbg3 span
{
float: left;
padding-left: 2%;
}
#forumposts h3.catbg3 span#top_subject
{
padding-left: 9.5em;
}
.poster
{
width: 17em;
float: left;
}
.post
{
clear: right;
}
img.smiley
{
vertical-align: bottom;
}
.postarea
{
margin-left: 17.5em;
}
.messageicon
{
float: left;
margin: 0 0.5em 0.5em 0;
}
.messageicon img
{
padding: 6px 3px;
}
.keyinfo
{
float: left;
clear: none;
width: 50%;
min-height: 3em;
}
ul.postingbuttons
{
float: right;
padding: 0 0.5em 0 0;
}
ul.postingbuttons li
{
float: left;
margin: 0 0.5em 0 0;
}
.modifybutton
{
float: right;
margin: 0 0.5em 0.5em 0;
font: bold 0.85em arial, sans-serif;
color: #476c8e;
}
.attachments
{
padding-top: 1em;
overflow: auto;
}
.attachments hr
{
clear: both;
margin: 1em 0 1em 0;
}
.postfooter
{
margin-left: 17.5em;
}
.topborder
{
border-top: 1px solid #bbb;
}
.moderatorbar
{
clear: right;
margin: 1em 0 0 17.5em;
}
#pollmoderation, #moderationbuttons_strip
{
float: left;
}
/* Styles for the quick reply area.
---------------------------------------------------- */
#quickReplyOptions #quickReplyWarning
{
border: none;
text-align: left;
margin: 0;
width: 25%;
float: left;
}
#quickReplyOptions #quickReplyContent
{
text-align: right;
float: left;
width: 67.5%;
padding: 1em;
border-left: 1px solid #aaa;
}
#quickReplyOptions #quickReplyContent textarea, #quickReplyOptions #quickReplyContent input
{
margin-bottom: .5em;
}
#quickReplyWarning
{
width: 20%;
float: left;
padding: 0.5em 1em;
}
#quickReplyContent
{
width: 75%;
float: right;
padding: 0.5em 0;
}
#quickReplyOptions .roundframe
{
overflow: hidden;
}
#quickReplyOptions form textarea
{
height: 100px;
width: 635px;
max-width: 100%;
min-width: 100%;
}
/* The jump to box */
#display_jump_to
{
clear: both;
padding: 5px;
}
/* Separator of posts. More useful in the print stylesheet. */
#forumposts .post_separator
{
display: none;
}
/* Styles for edit post section
---------------------------------------------------- */
form#postmodify .roundframe
{
padding: 0 12%;
}
#post_header
{
margin-bottom: 0.5em;
padding: 0.5em;
overflow: hidden;
}
#post_header dt
{
float: left;
margin: 0;
padding: 0;
width: 15%;
margin: .3em 0;
font-weight: bold;
}
#post_header dd
{
float: left;
margin: 0;
padding: 0;
width: 83%;
margin: .3em 0;
}
#post_header img
{
vertical-align: middle;
}
ul.post_options
{
margin: 0 0 0 1em;
padding: 0;
list-style: none;
overflow: hidden;
}
ul.post_options li
{
margin: 0.2em 0;
width: 49%;
float: left;
}
#postAdditionalOptionsHeader
{
margin-top: 1em;
}
#postMoreOptions
{
border-bottom: 1px solid #666;
padding: 0.5em;
}
#postAttachment, #postAttachment2
{
overflow: hidden;
margin: .5em 0;
padding: 0;
border-bottom: 1px solid #666;
padding: 0.5em;
}
#postAttachment dd, #postAttachment2 dd
{
margin: .3em 0 .3em 1em;
}
#postAttachment dt, #postAttachment2 dt
{
font-weight: bold;
}
#postAttachment3
{
margin-left: 1em;
}
#post_confirm_strip, #shortcuts
{
padding: 1em 0 0 0;
}
.post_verification
{
margin-top: .5em;
}
.post_verification #verification_control
{
margin: .3em 0 .3em 1em;
}
/* The BBC buttons */
#bbcBox_message
{
margin: 1em 0 0.5em 0;
}
#bbcBox_message div
{
margin: 0.2em 0;
vertical-align: top;
}
#bbcBox_message div img
{
margin: 0 1px 0 0;
vertical-align: top;
}
#bbcBox_message select
{
margin: 0 2px;
}
/* The smiley strip */
#smileyBox_message
{
margin: 0.75em 0 0.5em 0;
}
Part 3:
/* Styles for edit event section
---------------------------------------------------- */
#post_event .roundframe
{
padding: 1% 12%;
}
#post_event fieldset
{
margin-bottom: 0.5em;
border: 1px solid #c4c4c4;
padding: 0.5em;
clear: both;
}
#post_event legend
{
font-weight: bold;
color: #000;
}
#post_event #event_main input
{
margin: 0 0 1em 0;
float: left;
}
#post_event #event_main div.smalltext
{
width: 33em;
float: right;
}
#post_event div.event_options
{
float: right;
}
#post_event ul.event_main, ul.event_options
{
padding: 0;
overflow: hidden;
}
#post_event ul.event_main li
{
list-style-type: none;
margin: 0.2em 0;
width: 49%;
float: left;
}
#post_event ul.event_options
{
margin: 0;
padding: 0 0 .7em .7em;
}
#post_event ul.event_options li
{
list-style-type: none;
margin: 0;
float: left;
}
#post_event #event_main select, #post_event ul.event_options li select, #post_event ul.event_options li .input_check
{
margin: 0 1em 0 0;
}
/* Styles for edit poll section.
---------------------------------------------------- */
#edit_poll
{
overflow: hidden;
}
#edit_poll fieldset
{
margin: 0.5em 0;
border: 1px solid #c4c4c4;
padding: 0.5em;
clear: both;
overflow: hidden;
}
#edit_poll legend
{
font-weight: bold;
color: #000;
}
#edit_poll fieldset input
{
margin-left: 8.6em;
}
#edit_poll ul.poll_main li
{
padding-left: 1em;
}
#edit_poll ul.poll_main input
{
margin-left: 1em;
}
#edit_poll ul.poll_main, dl.poll_options
{
overflow: hidden;
padding: 0 0 .7em .7em;
list-style: none;
}
#edit_poll ul.poll_main li
{
margin: 0.2em 0;
}
#edit_poll dl.poll_options dt
{
width: 33%;
padding: 0 0 0 1em;
}
#edit_poll dl.poll_options dd
{
width: 65%;
}
#edit_poll dl.poll_options dd input
{
margin-left: 0;
}
/* Styles for the recent messages section.
---------------------------------------------------- */
.readbuttons
{
clear: both;
width: 100%;
}
.buttonlist, .buttonlist_bottom
{
margin-right: 1em;
float: right;
}
/* Styles for the move topic section.
---------------------------------------------------- */
#move_topic dl
{
margin-bottom: 0;
}
.move_topic
{
width: 710px;
margin: auto;
text-align: left;
}
div.move_topic fieldset
{
margin: 0.5em 0;
border: 1px solid #cacdd3;
padding: 0.5em;
}
/* Styles for the send topic section.
---------------------------------------------------- */
fieldset.send_topic
{
margin-bottom: 0.5em;
border: none;
padding: 0.5em;
}
dl.send_topic
{
margin-bottom: 0;
}
dl.send_mail dt
{
width: 35%;
}
dl.send_mail dd
{
width: 64%;
}
/* Styles for the split topic section.
---------------------------------------------------- */
div#selected, div#not_selected
{
width: 49%;
}
ul.split_messages li.windowbg, ul.split_messages li.windowbg2
{
border: 1px solid #adadad;
padding: 1em;
margin: 1px;
}
ul.split_messages li a.split_icon
{
padding: 0 0.5em;
}
ul.split_messages div.post
{
padding: 1em 0 0 0;
border-top: 1px solid #fff;
}
/* Styles for the report topic section.
---------------------------------------------------- */
#report_topic dl
{
margin-bottom: 0;
}
#report_topic dl.settings dt
{
width: 20%;
}
#report_topic dl.settings dd
{
width: 79%;
}
/* Styles for the merge topic section.
---------------------------------------------------- */
ul.merge_topics li
{
list-style-type: none;
}
dl.merge_topic dt
{
width: 25%;
}
dl.merge_topic dd
{
width: 74%;
}
fieldset.merge_options
{
margin-bottom: 0.5em;
}
fieldset.merge_options legend
{
font-weight: bold;
}
.custom_subject
{
margin: 0.5em 0;
}
/* Styles for the login areas.
------------------------------------------------------- */
.login
{
width: 540px;
margin: 0 auto;
}
.login dl
{
overflow: auto;
clear: right;
}
.login dt, .login dd
{
margin: 0 0 0.4em 0;
width: 44%;
padding: 0.1em;
}
.login dt
{
float: left;
clear: both;
text-align: right;
font-weight: bold;
}
.login dd
{
width: 54%;
float: right;
text-align: left;
}
.login p
{
text-align: center;
}
.login h3 img
{
float: left;
margin: 4px 0.5em 0 0;
}
/* Styles for the registration section.
------------------------------------------------------- */
.register_error
{
border: 1px dashed red;
padding: 5px;
margin: 0 1ex 1ex 1ex;
}
.register_error span
{
text-decoration: underline;
}
/* Additional profile fields */
dl.register_form
{
margin: 0;
clear: right;
overflow: auto;
}
dl.register_form dt
{
font-weight: normal;
float: left;
clear: both;
width: 50%;
margin: 0.5em 0 0 0;
}
dl.register_form dt strong
{
font-weight: bold;
}
dl.register_form dt span
{
display: block;
}
dl.register_form dd
{
float: left;
width: 49%;
margin: 0.5em 0 0 0;
}
#confirm_buttons
{
text-align: center;
padding: 1em 0;
}
.coppa_contact
{
padding: 4px;
width: 32ex;
background-color: #fff;
color: #000;
margin-left: 5ex;
border: 1px solid #000;
}
.valid_input
{
background-color: #000;
}
.invalid_input
{
background-color: #000;
}
/* Styles for maintenance mode.
------------------------------------------------------- */
#maintenance_mode
{
width: 75%;
min-width: 520px;
text-align: left;
}
#maintenance_mode img.floatleft
{
margin-right: 1em;
}
/* common for all admin sections */
h3.titlebg img
{
vertical-align: middle;
margin-right: 0.5em;
}
tr.titlebg td
{
padding-left: 0.7em;
}
#admin_menu
{
min-height: 2em;
padding-left: 0;
}
#admin_content
{
clear: left;
}
#admin_login .centertext
{
padding: 1em;
}
#admin_login .centertext .error
{
padding: 0 0 1em 0;
}
/* Styles for sidebar menus.
------------------------------------------------------- */
.left_admmenu, .left_admmenu ul, .left_admmenu li
{
padding: 0;
margin: 0;
list-style: none;
}
#left_admsection
{
background-color: #fff;
padding: 1px;
border: 1px solid #ADADAD;
width: 160px;
float: left;
margin-right: 10px;
}
.adm_section h4.titlebg
{
font-size: 95%;
margin-bottom: 5px;
}
#main_container
{
position: relative;
}
.left_admmenu li
{
padding: 0 0 0 0.5em;
}
.left_admmenu
{
margin-bottom: 1.1em;
}
#main_admsection
{
position: relative;
left: 0;
right: 0;
overflow: hidden;
}
tr.windowbg td, tr.windowbg2 td, tr.approvebg td, tr.highlight2 td
{
padding: 0.3em 0.7em;
}
#credits p
{
padding: 0;
font-style: italic;
margin: 0;
}
/* Styles for generic tables.
------------------------------------------------------- */
.topic_table table
{
width: 100%;
}
.topic_table .icon1, .topic_table .icon2, .topic_table .stats
{
text-align: center;
}
#topic_icons
{
margin-top: 1em;
}
#topic_icons .description
{
margin: 0;
}
.topic_table table thead
{
border-bottom: 1px solid #fff;
}
/* the subject column */
.topic_table td
{
font-size: 1em;
}
.topic_table td.subject
{
padding: 4px;
}
.topic_table td.subject p, .topic_table td.stats, .topic_table td.lastpost
{
font-size: 0.85em;
padding: 0;
margin: 0;
}
.topic_table td.lastpost, .topic_table td.lastpost
{
font-size: 0.9em;
line-height: 100%;
padding: 4px;
}
.topic_table td.stickybg2
{
background-image: url(../images/icons/quick_sticky.gif);
background-repeat: no-repeat;
background-position: 98% 4px;
}
.topic_table td.lockedbg2
{
background-image: url(../images/icons/quick_lock.gif);
background-repeat: no-repeat;
background-position: 98% 4px;
}
.topic_table td.lastpost
{
background-image: none;
}
/* Styles for (fatal) errors.
------------------------------------------------- */
#fatal_error
{
border: 1px solid #aaa;
}
.errorbox
{
padding: 1em;
border: 1px solid #cc3344;
color: #000;
background-color: #cc0000;
margin: 1em 0;
}
.errorbox h3
{
padding: 0;
margin: 0;
font-size: 1.1em;
text-decoration: underline;
}
.errorbox p
{
margin: 1em 0 0 0;
}
.errorbox p.alert
{
padding: 0;
margin: 0;
float: left;
width: 1em;
font-size: 1.5em;
}
/* Styles for the profile section.
------------------------------------------------- */
dl
{
overflow: auto;
margin: 0;
padding: 0;
}
/* Fixes for the core theme */
#profileview
{
padding: 1px;
border: 1px solid #696969;
background-color: #252525;
}
#profileview .content
{
border: none;
}
#profileview1
{
border: 1px solid #696969;
background-color: #000;
}
#profileview2
{
padding: 1px;
border: 1px solid #696969;
background-color: #252525;
}
#profileview2 .content
{
border: none;
}
#basicinfo .content
{
padding: 1em;
background-color: #000;
}
#basicinfo a
{
color: black;
}
#detailedinfo .content
{
padding: 0.7em 1.2em;
border-left: 1px solid #aaa;
background-color: #252525;
}
/* The basic user info on the left */
#basicinfo
{
width: 19%;
float: left;
}
#detailedinfo
{
width: 81%;
float: right;
}
#basicinfo h4
{
font-size: 135%;
font-weight: 100;
line-height: 105%;
white-space: pre-wrap; /* css-2.1 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
overflow: hidden;
}
#basicinfo h4 span.position
{
font-size: 80%;
font-weight: 100;
display: block;
}
#basicinfo img.avatar
{
display: block;
margin: 10px 0 10px 5px;
}
#basicinfo ul
{
list-style-type: none;
margin: 10px 0 0 0;
}
#basicinfo ul li
{
display: block;
float: left;
margin-right: 5px;
height: 20px;
}
#basicinfo span#userstatus
{
display: block;
clear: both;
}
#basicinfo span#userstatus img
{
vertical-align: middle;
}
#detailedinfo div.content dl, #tracking div.content dl
{
clear: right;
overflow: auto;
margin: 0 0 18px 0;
padding: 0 0 15px 0;
border-bottom: 1px solid #ccc;
}
#detailedinfo div.content dt, #tracking div.content dt
{
width: 30%;
float: left;
margin: 0 0 3px 0;
padding: 0;
font-weight: bold;
clear: both;
}
#detailedinfo div.content dd, #tracking div.content dd
{
width: 70%;
float: left;
margin: 0 0 3px 0;
padding: 0;
}
#detailedinfo div.content dl.noborder
{
border-bottom: 0;
}
#detailedinfo div.content dt.clear
{
width: 100%;
}
.signature, .custom_fields_above_signature, .attachments
{
width: 98%;
overflow: auto;
clear: right;
border-top: 1px solid #666;
}
.signature h5
{
font-size: 100%;
margin-bottom: 10px;
}
#personal_picture
{
display: block;
margin-bottom: 0.3em;
}
#avatar_server_stored div
{
float: left;
}
#main_admsection #basicinfo, #main_admsection #detailedinfo
{
width: 100%;
}
#main_admsection #detailedinfo .content
{
border: none !important;
}
#main_admsection #basicinfo
{
border-bottom: 1px solid #ccc;
}
#main_admsection #basicinfo h4
{
float: left;
}
#main_admsection #basicinfo .blurb
{
float: right;
text-align: center;
margin-right: 8px;
margin-top: 40px;
}
#main_admsection #basicinfo .blurb img.avatar
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -44px;
margin-bottom: 5px;
}
#main_admsection #basicinfo ul
{
clear: left;
padding-top: 10px;
}
#main_admsection #basicinfo span#userstatus
{
clear: left;
}
#main_admsection #basicinfo p#infolinks
{
display: none;
clear: both;
}
#main_admsection #basicinfo .botslice
{
clear: both;
}
/* Simple feedback messages */
div#profile_error, div#profile_success
{
margin: 0 0 1em 0;
padding: 1em 2em;
border: 1px solid;
}
div#profile_error
{
border-color: red;
color: red;
background: #fee;
}
div#profile_error span
{
text-decoration: underline;
}
div#profile_success
{
border-color: green;
color: green;
background: #efe;
}
/* Profile statistics */
#generalstats div.content dt
{
width: 50%;
float: left;
margin: 0 0 3px 0;
padding: 0;
font-weight: bold;
clear: both;
}
#generalstats div.content dd
{
width: 50%;
float: left;
margin: 0 0 3px 0;
padding: 0;
}
/* Activity by time */
.activity_stats
{
margin: 0;
padding: 0;
list-style: none;
}
.activity_stats li
{
width: 4.16%;
float: left;
}
.activity_stats li span
{
display: block;
border: solid #000;
border-width: 1px 1px 0 0;
text-align: center;
}
.activity_stats li.last span
{
border-right: none;
}
.activity_stats li div.bar
{
margin: 0 auto;
width: 15px;
}
.activity_stats li div.bar div
{
background: url('../images/bar.gif');
}
.activity_stats li div.bar span
{
position: absolute;
top: -1000em;
left: -1000em;
}
/* Most popular boards by posts and activity */
#popularposts
{
width: 50%;
float: left;
}
#popularactivity
{
width: 50%;
float: right;
}
#popularposts div.content dt, #popularactivity div.content dt
{
width: 65%;
float: left;
margin: 0 0 3px 0;
padding: 0;
font-weight: bold;
clear: both;
}
#popularposts div.content dd, #popularactivity div.content dd
{
width: 35%;
float: left;
margin: 0 0 3px 0;
padding: 0;
}
.profile_pie
{
background-image: url(../images/stats_pie.png);
float: left;
height: 20px;
width: 20px;
margin: 0 1em 0 0;
padding: 0;
text-indent: -1000em;
}
/* View posts */
.time
{
float: right;
}
.counter
{
margin: 0 0 0 0;
padding: 0.2em 0.5em 0.1em 0.2em;
font-size: 2.2em;
font-weight: bold;
color: #cc0000;
float: left;
}
.list_posts
{
border-top: 1px solid #adadad;
padding-top: 1em;
margin-top: 0.5em;
}
div.core_posts
{
border: 1px solid #adadad;
margin-bottom: 3px;
}
div.core_posts div.content
{
background: none;
border: none;
}
.topic h4
{
margin: 3px 0;
}
.mod_icons
{
text-align: right;
margin-right: 1em;
}
#permissions div.tborder
{
margin-bottom: 2em;
}
#permissions ul
{
padding: 0;
margin: 1px 0 0 0;
border-top: 1px solid #e5e5e8;
float: left;
width: 100%;
}
#permissions div.permission_name
{
width: 48%;
list-style: none;
border-right: 1px solid #e5e5e8;
background: #000;
margin: 0 1% 0 0;
padding: 0.7em 0.7em 0.8em 0.7em;
line-height: 1em;
}
#permissions li
{
width: 100%;
padding: 0;
list-style: none;
margin: 0 0 1px 0;
}
#permissions li span.permission_status, #permissions li span.alert
{
line-height: 2.9em;
font-size: 0.85em;
}
#tracking div.content dl
{
border-bottom: 0;
margin: 0;
padding: 0;
}
#creator dl
{
margin: 0;
}
#creator dt
{
width: 40%;
float: left;
clear: both;
margin: 0 0 10px 0;
}
#creator dd
{
float: left;
width: 60%;
margin: 0 0 10px 0;
overflow: auto;
}
.ignoreboards
{
margin: 0 2%;
padding: 0;
width: 45%;
}
.ignoreboards a
{
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #c4c4c4;
padding: 0.1em 0;
}
.ignoreboards a:hover
{
text-decoration: none;
border-bottom: 1px solid #476c8e;
}
.ignoreboards ul
{
margin: 0;
padding: 0;
}
.ignoreboards li
{
list-style: none;
float: left;
clear: both;
}
.ignoreboards li.category
{
margin: 0.7em 0 0 0;
width: 100%;
}
.ignoreboards li ul
{
margin: 0.2em 0 0 0;
}
.ignoreboards li.category ul li.board
{
width: 93%;
}
#theme_settings
{
overflow: auto;
margin: 0;
padding: 0;
}
#theme_settings li
{
list-style: none;
margin: 10px 0;
padding: 0;
}
/*Paid Subscriptions*/
#paid_subscription
{
width: 100%;
}
#paid_subscription dl.settings
{
margin-bottom: 0;
}
#paid_subscription dl.settings dd, #paid_subscription dl.settings dt
{
margin-bottom: 4px;
}
/*pick theme*/
#pick_theme
{
width: 100%;
float: left;
}
/*Issue a warning*/
#warn_body{
width: 80%;
font-size: 0.9em;
}
/* Styles for the statistics center.
------------------------------------------------- */
#statistics
{
padding-bottom: 0.5em;
}
#statistics h4.titlebg
{
text-align: center;
margin-bottom: 5px;
}
#stats_left, #top_posters, #top_topics_replies, #top_topics_starter
{
float: left;
width: 49.5%;
}
#stats_right, #top_boards, #top_topics_views, #most_online
{
float: right;
width: 49.5%;
}
dl.stats
{
clear: both;
overflow: hidden;
margin: 0;
padding: 0;
}
dl.stats dt
{
width: 49%;
float: left;
margin: 0 0 4px 0;
line-height: 16px;
padding: 0;
clear: both;
font-size: 1em;
}
dl.stats dd
{
text-align: right;
width: 50%;
font-size: 1em;
float: right;
margin: 0 0 4px 0;
line-height: 16px;
padding: 0;
}
.stats_bar
{
float: left;
background-image: url(../images/bar_stats.png);
height: 16px;
font-size: 0.9em;
display: block;
text-align: left;
color: #fff;
font-weight: bold;
background-position: top center;
}
.stats_bar span
{
padding-left: 2px;
}
/* Styles for the personal messages section.
------------------------------------------------- */
#personal_messages
{
padding: 1px;
}
#personal_messages #top_subject
{
padding-left: 11.75em !important;
}
#personal_messages div.labels
{
padding: 0 1em 0 0;
}
#personal_messages .capacity_bar
{
background: #fff;
border: 1px solid #000;
height: 7px;
width: 75%;
margin: 0 auto;
}
#personal_messages .capacity_bar div
{
border: none;
height: 7px;
}
#personal_messages .capacity_bar div.empty
{
background: #ffcc00;
}
#personal_messages .capacity_bar div.filled
{
background: #cc0000;
}
#personal_messages .capacity_bar div.full
{
background: #ff0000;
}
#personal_messages .reportlinks
{
padding: 0.5em 1.3em;
}
#searchLabelsExpand li
{
padding: 0.3em 0.5em;
}
/* Styles for the calendar section.
------------------------------------------------- */
.calendar_table
{
margin-bottom: 0.7em;
}
/* Used to indicate the current day in the grid. */
.calendar_today
{
background-color: #fff;
}
#month_grid
{
width: 200px;
text-align: center;
float: left;
}
#month_grid table
{
width: 200px;
border-collapse: collapse;
border: 1px solid #adadad;
}
#month_grid table td, #month_grid table th
{
border: 1px solid #adadad;
}
#main_grid table
{
width: 100%;
padding-bottom: 4px;
border-collapse: collapse;
border: 1px solid #adadad;
}
#main_grid table td, #main_grid table th
{
border: 1px solid #adadad;
}
#main_grid table h3.catbg
{
text-align: center;
border-top: 1px solid #adadad;
border-bottom: none;
}
#main_grid table h4
{
border: none;
}
#main_grid table.weeklist td.windowbg
{
text-align: center;
height: 49px;
width: 25px;
font-size: large;
padding: 0 7px;
border-bottom: 1px solid #adadad;
}
#main_grid table.weeklist td.weekdays
{
height: 49px;
width: 100%;
padding: 4px;
text-align: left;
vertical-align: middle;
border-right: 1px solid #adadad;
border-bottom: 1px solid #adadad;
}
#main_grid h3.weekly
{
text-align: center;
padding-left: 0;
font-size: large;
height: 29px;
}
#main_grid h3 span.floatleft, #main_grid h3 span.floatright
{
display: block;
}
#main_grid table th.days
{
width: 14%;
}
#main_grid table td.weeks
{
vertical-align: middle;
text-align: center;
}
#main_grid table td.days
{
vertical-align: top;
}
a.modify_event
{
color: red;
}
span.hidelink
{
font-style: italic;
}
#calendar_navigation
{
text-align: center;
}
#calendar .buttonlist_bottom
{
border-bottom: 1px solid #adadad;
padding: 0 0 0 1ex;
margin: 0 0 1ex 0;
}
/* Styles for the memberlist section.
------------------------------------------------- */
#mlist_search
{
margin: auto;
width: 400px;
}
/* Styles for the basic search section.
------------------------------------------------- */
#simple_search p
{
padding: 0.5em;
}
#simple_search, #simple_search p, #advanced_search
{
text-align: center !important;
margin: 0;
}
#search_error
{
font-style: italic;
padding: 0.3em 1em;
}
#search_term_input
{
font-size: 115%;
margin: 0 0 1em;
}
/* Styles for the advanced search section.
------------------------------------------------- */
#searchform fieldset
{
text-align: left;
padding: 0;
margin: 0;
border: none;
}
fieldset#advanced_search .roundframe
{
border-bottom: none !important;
}
#advanced_search dl#search_options
{
margin: 0 auto;
width: 600px;
padding-top: 1em;
overflow: hidden;
}
#advanced_search dt
{
clear: both;
float: left;
padding: 0.2em;
text-align: right;
width: 20%;
}
#advanced_search dd
{
width: 75%;
float: left;
padding: 0.2em;
margin: 0 0 0 0.5em;
text-align: left;
}
#searchform p.clear
{
clear: both;
}
/* Styles for the search results page.
------------------------------------------------- */
.pagelinks
{
padding: 0.3em;
}
.topic_table td blockquote, .topic_table td .quoteheader
{
margin: 0.5em;
}
.search_results_posts
{
overflow: hidden;
}
.search_results_posts .inner
{
padding: 0.5em 1em;
overflow: hidden;
}
.search_results_posts .windowbg2
{
margin-top: 4px;
}
.search_results_posts .buttons
{
padding: 5px 1em 0 0;
}
/* Styles for the help section.
------------------------------------------------- */
#helpmain
{
padding: 1em;
border: 1px solid #696969;
}
#helpmain p
{
margin: 0 0 1.5em 0;
line-height: 1.5em;
}
#helpmain ul
{
line-height: 1.5em;
}
/* Depreciated stuff from the old days.
------------------------------------------------- */
/* This style will make sure all headers use the same padding throughout. */
.headerpadding
{
padding: 0.5em;
}
/* smaller padding used in paragraphs, sections etc */
.smallpadding
{
padding: 0.2em;
}
/* medium padding used in paragraphs, sections etc */
.mediumpadding
{
padding: 0.45em;
}
/* larger padding used in paragraphs, sections etc */
.largepadding
{
padding: 0.7em;
}
/* A small space to the next section. */
.marginbottom
{
margin-bottom: 1em;
}
/* On the top too. */
.margintop
{
margin-top: 1em !important;
}
/* remove bold/italic styles */
span.plainstyle
{
font-weight: normal;
font-style: normal;
}
/* float a list horizontally */
ul.horizlist
{
width: 100%;
}
ul.horizlist li
{
float: left;
padding: 0.2em 0.4em 0.2em 0.4em;
vertical-align: top;
}
/* make a inline-list */
ul.nolist li
{
display: inline;
}
/* Helping style to clear floated items. */
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix
{
display: inline-block;
}
/* Hides from IE-mac. \*/
* html .clearfix
{
height: 1%;
}
.clearfix
{
display: block;
}
/* End hide from IE-mac. */
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
background-color: #707070;
padding: 0;
}
/* This is used on tables that should just have a border around them. */
.tborder
{
padding: 1px;
border: 1px solid #686868;
background-color: #fff;
}
/* If some random peep decides to use a description class within a tborder (happened to me!) */
.tborder .description
{
margin-bottom: 0;
}
/* Styles for print media.
------------------------------------------------------- */
@media print
{
#headerarea
{
display: none;
}
.tborder
{
border: none;
}
}
/* Previous and Next Links
------------------------------------------------------- */
.next, .next a
{
color: #ffcc00;
font-style: normal;
text-decoration: none;
clear: both;
}
.next a:hover
{
text-decoration: underline;
}
/* Custom Footer Text
------------------------------------------------------- */
.xfooter
{
font-style: normal;
text-align: center;
color: white;
}
/* Extra Color Fixes
------------------------------------------------------- */
.additional_row
{
color: black;
}
.additional_row.smalltext
{
color: white;
}
.additional_row a
{
color: #ffcc00;
}
.tree_extra
{
font-size: 0.9em;
font-family: verdana, sans-serif;
padding: 0.3em 0;
color: white;
}
.innerframe .content
{
background-color: #f6f6f6;
}
td.smalltext.headerpadding
{
background-color: gold;
}
Quote from: Scott5114 on March 26, 2021, 04:07:41 PM
....
A more pressing issue would be converting the theme to be responsive to mobile devices (i.e. making a version of the theme that automatically resizes to fit a mobile screen). This would mean there would be no need for Tapatalk. ...
Someone interested in a dark theme with access to Tapatalk might consider using that app. If you set your phone or tablet to default to dark mode, Tapatalk will respect that setting. Of course the forum won't look the same as it does through a browser, and whether a given user likes that is a matter of personal preference.
This forum has paid subscriptions?
Unrelated, I tried to get the code below 50,000 by removing the newlines corresponding to the beginning and ending closing braces. It didn't reduce it enough. Removing the comments will, but I don't think you want to do that.
Quote from: oscar on March 26, 2021, 09:41:23 AM
Quote from: Zeffy on March 26, 2021, 09:22:40 AM
A nice trend in web design nowadays are dark themed skins for websites. I generally prefer them to light themes because they are easier on my eyes, which are more sensitive to white backgrounds than they used to be (along with my eyesight being worse as I get older).
I'm much older than you, and have gone through five eye surgeries. I have no problem with the existing theme.
To be fair, not everyone is going to have the same health issues.
It's not always about eye issues/health, it's about ergonomics too. Eye strain. Things like that. You're older, do you remember any old computers with an amber display? Those were chosen because they were easier on the eyes than the jarring, eye-straining neon green color of the day. Owning computers with both those display types I can attest to the more ergonomic amber color. Not to mention dark themes are much easier on the eyes checking a display in a darker environment. Same reason why nightstand clocks aren't completely illuminated at night, just the digits. It would be blinding waking up in the dark and checking your clock only to be completely blasted with light because the entire thing illuminates with a white background. A forum obviously doesn't have that exact sort of application but there's other uses a dark interface can provide. Personally I've not had a problem with this site's theme but I can see why others might be interested in a dark theme.
A native dark mode would be really nice to have on here. I use the DarkReader extension, so I do get my dark mode fix at night. But it is kind of janky and doesn't always look quite right.
If it's a lot of effort to make the theme, I guess it isn't necessary. But I think you'd find that many, many users would use it, possibly even more than the light theme.
Also, this is totally an extra request, but I think it'd be interesting to see certain text on the site render in Roadgeek fonts, probably Series E. Stuff like thread titles, usernames, and post counts. Just throwing it out there.
Quote from: formulanone on March 26, 2021, 04:47:26 PM
I just modified the .css file, but there's no way to use one post to display it, since it's over 25,000 characters.
(https://www.aaroads.com/forum/gallery/2069_26_03_21_4_58_41.png)
Let me try to break it up...it's also a work in progress.
...this is Part 1:
/* Styles for the general looks for the Button Copy 2.0 theme.
*/
/* Normal, standard links. */
a:link, a:visited
{
color: #cc8000;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
/* Tables should show empty cells. */
table
{
empty-cells: show;
}
/* Set a fontsize that will look the same in all browsers. */
body
{
background-image: url(../images/bigbackground.png);
background-repeat: repeat;
background-color: #252525;
font-size: 11.5pt;
font-family: Verdana, sans-serif;
margin: 0;
padding: 12px 30px 4px 30px;
}
/* Help popups require a different styling of the body element. */
body#help_popup
{
width: auto;
padding: 1em;
min-width: 0;
}
/* use dark grey for the text, leaving #000 for headers etc */
body, td, th, tr
{
color: #444;
}
/* lets give all forms zero padding/margins */
form
{
padding: 0;
margin: 0;
}
/* We can style the different types of input buttons to be uniform throughout different browsers and their color themes.
.button_submit - covers input[type=submit], input[type=button], button[type=submit] and button[type=button] in all browsers
.button_reset- covers input[type=reset] and button[type=reset] throughout all browsers
.input_check- covers input[type=checkbox] throughout all browsers
.input_radio- covers input[type=radio] throughout all browsers
.input_text - covers input[type=text] throughout all browsers
.input_file - covers input[type=file] throughout all browsers
*/
input, button, select, textarea
{
font-size: 90%;
font-family: Verdana, sans-serif;
color: #000;
}
/* The font size of textareas should be just a little bit larger. */
textarea
{
font: 105% Verdana, sans-serif;
}
/* All input elements that are checkboxes or radio buttons shouldn't have a border around them. */
input.input_check, input.input_radio
{
border: none;
background: none;
}
/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
height: 1px;
border: 0;
color: #666;
background-color: #666;
}
/* By default set the color on these tags as #000. */
h1, h2, h3, h4, h5, h6
{
color: #000;
font-size: 1em;
margin: 0;
padding: 0;
}
.content fieldset
{
border: 2px groove #fff;
padding: 1em;
margin: 0 0 0.3em 0;
}
/* No image should have a border when linked. */
a img
{
border: 0;
}
/* Define strong as bold, and em as italics */
strong
{
font-weight: bold;
}
em
{
font-style: italic;
}
/* Alternative for u tag */
.underline
{
text-decoration: underline;
}
/* Common classes for easy styling.
------------------------------------------------------- */
.floatright
{
float: right;
}
.floatleft
{
float: left;
}
.flow_auto
{
overflow: auto;
}
.flow_hidden
{
overflow: hidden;
}
.clear
{
clear: both;
}
.clear_left
{
clear: left;
}
.clear_right
{
clear: right;
}
/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext, tr.smalltext th
{
font-size: 0.85em;
font-family: verdana, sans-serif;
}
.smalltext1
{
font-size: 0.85em;
font-family: verdana, sans-serif;
color: white;
margin-top: 5px;
}
.smalltext2
{
font-size: 0.85em;
font-family: verdana, sans-serif;
color: black;
}
.smalltext3
{
font-size: 0.85em;
font-family: verdana, sans-serif;
color: white;
}
.smalltext3 a
{
color: #ffcc00;
}
.middletext
{
font-size: 0.9em;
font-family: verdana, sans-serif;
}
.middletext1
{
font-size: 0.9em;
line-height: 1.2em;
}
.middletext1 a
{
color: #ff9900;
}
.normaltext
{
font-size: 1em;
line-height: 1.2em;
}
.largetext
{
font-size: 1.4em;
}
.centertext
{
margin: 0 auto;
text-align: center;
}
.righttext
{
margin-left: auto;
margin-right: 0;
text-align: right;
}
.righttext1
{
margin-left: auto;
margin-right: 0;
text-align: right;
color: white;
}
.lefttext
{
margin-left: 0;
margin-right: auto;
text-align: left;
}
/* some common padding styles */
.padding
{
padding: 0.7em;
}
.main_section, .lower_padding
{
padding-bottom: 0.5em;
}
/* a quick reset list class. */
ul.reset, ul.reset li
{
padding: 0;
margin: 0;
list-style: none;
}
/* Some BBC related styles.
------------------------------------------------------- */
/* A quote, perhaps from another post. */
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote
{
color: #a8a8a8;
border: 1px solid #fff;
margin: 1px;
padding: 1px;
font-size: 9pt;
line-height: 1.4em;
overflow: auto;
}
/* Alterate block quote stylings */
blockquote.bbc_standard_quote
{
background-color: #000;
}
blockquote.bbc_alternate_quote
{
background-color: #252525;
}
/* A code block - maybe even PHP ;). */
code.bbc_code
{
display: block;
font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
font-size: x-small;
background: #333;
border: 1px solid #fff;
line-height: 1.3em;
padding: 1px;
overflow: auto;
white-space: nowrap;
/* Show a scrollbar after about 24 lines. */
max-height: 24em;
}
/* The "Quote:" and "Code:" header parts... */
.codeheader, .quoteheader
{
color: #fff;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
padding: 0 0.3em;
}
/* For links to change the code stuff... */
.codeoperation
{
font-weight: normal;
}
/* Styling for BBC tags */
.bbc_size
{
line-height: 1.4em;
}
.bbc_color a
{
color: inherit;
}
.bbc_img
{
border: 0;
}
.bbc_table
{
font: inherit;
color: inherit;
}
.bbc_table td
{
font: inherit;
color: inherit;
vertical-align: top;
}
.bbc_u
{
text-decoration: underline;
}
.bbc_tt
{
font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
}
/* Generally, those [?] icons.This makes your cursor a help icon. */
.help
{
cursor: help;
}
/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
color: red;
}
/* Highlighted text - such as search results. */
.highlight
{
background-color: #fc0;
font-weight: bold;
color: #000;
}
/* A more discreet highlight color, for selected membergroups etc. */
.highlight2
{
background-color: #f90;
color: #000;
}
/* Generic, mostly color-related, classes.
------------------------------------------------------- */
.titlebg, .titlebg2, tr.titlebg td, tr.titlebg2 td
{
color: #fff;
font-family: Verdana, sans-serif;
font-weight: bold;
background: url(../images/titlebg.png) #000 repeat-x;
}
.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th
{
color: #fff;
font-family: Verdana, sans-serif;
font-weight: bold;
background: url(../images/asphalt.jpg) #252525 repeat-x;
}
.catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th
{
background: url(../images/asphalt.jpg) #252525 repeat-x;
}
/* adjust the table versions of headers */
tr.titlebg td, tr.titlebg2 td
{
padding: 6px;
}
tr.catbg td, tr.catbg2 td, td.catbg, td.catbg2, tr.catbg th, tr.catbg2 th, th.catbg, th.catbg2
{
padding: 6px;
}
tr.titlebg td a, tr.titlebg2 td a
{
color: #000;
}
tr.catbg td a, tr.catbg2 td a, .catbg a
{
color: #fff;
}
tr.catbg th.smalltext
{
font-size: 0.9em;
}
/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body, .content
{
color: #ccc;
background-color: #000;
}
.roundframe
{
color: #fff;
background-color: #f6f6f6;
}
.windowbg .content
{
color: #fff;
background-color: #000;
}
.windowbg td
{
background-color: #000;
}
.windowbg2
{
color: #ccc;
background-color: #252525;
}
.windowbg2 .content
{
color: #000000;
background-color: #000;
}
.windowbg2 td
{
background-color: #252525;
}
.windowbg3
{
color: #000000;
background-color: #454545;
}
.windowbg4
{
color: #000000;
background-color: #666666;
}
/* the page navigation area */
.pagesection
{
font-size: 0.9em;
font-family: verdana, sans-serif;
padding: 0.5em 0.2em;
overflow: hidden;
color: white;
}
.pagesection a
{
color: #fc0;
}
.pagelinks
{
font-size: 0.9em;
font-family: verdana, sans-serif;
padding: 0.3em 0;
color: white;
}
.pagelinks a
{
color: #ff6600;
}
/* GenericList */
table.table_grid thead tr.catbg th.smalltext
{
white-space: nowrap;
}
/* Color for background of posts requiring approval */
.approvebg
{
color: #000;
background-color: #ffcc00;
}
/* Color for background of *topics* requiring approval */
.approvetbg
{
color: #000;
background-color: #ff6600;
}
/* sticky posts have a different background */
.stickybg
{
background: #333333;
}
.stickybg2
{
background: #454545;
}
/* locked posts too! */
.lockedbg
{
background: #000;
font-style: italic;
}
.lockedbg2
{
background: #252525;
font-style: italic;
}
/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
width: 100%;
overflow: auto;
line-height: 1.4em;
}
/* All the signatures used in the forum.If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
clear: right;
padding: 1em 0 3px 0;
width: 98%;
border-top: 1px solid #666;
line-height: 1.4em;
font-size: 0.85em;
}
.custom_fields_above_signature
{
clear: right;
padding: 1em 0 3px 0;
width: 98%;
border-top: 1px solid #666;
line-height: 1.4em;
font-size: 0.85em;
}
/* Sometimes there will be an error when you post */
.error
{
color: ff6600;
}
/* Messages that somehow need to attract the attention. */
.alert
{
color: #ff6600;
}
/* Calendar colors for birthdays, events and holidays */
.birthday
{
color: #ff6600;
}
.event
{
color: #ff9900;
}
.holiday
{
color: #ffcc00;
}
/* Colors for warnings */
.warn_mute
{
color: pink;
}
.warn_moderate
{
color: red;
}
.warn_watch, .success
{
color: green;
}
a.moderation_link, a.moderation_link:visited
{
color: red;
font-weight: bold;
}
.openid_login
{
background: black url(../images/openid.gif) no-repeat;
padding-left: 18px;
}
/* a descriptive style */
.description
{
padding: 1em;
font-size: 0.9em;
line-height: 1.5em;
border: 1px solid #bbb;
background: #ffcc00;
margin: 0 0 1em 0;
}
/* an informative style */
.information
{
padding: 1em;
font-size: 0.9em;
line-height: 1.5em;
border: 1px solid #bbb;
background: #ffcc00;
margin: 0 0 1em 0;
}
.information p
{
padding: 1em;
margin: 0;
}
/* AJAX notification bar
------------------------------------------------------- */
#ajax_in_progress
{
background: #32cd32;
color: #fff;
text-align: center;
font-weight: bold;
font-size: 18pt;
padding: 0.4em;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#ajax_in_progress a
{
color: #fff;
text-decoration: underline;
font-size: smaller;
float: right;
}
/* a general table class */
table.table_grid
{
border-collapse: collapse;
border: 1px solid #adadad;
}
table.table_grid td
{
padding: 3px;
border: 1px solid #adadad;
}
/* Lists with settings use these a lot.
------------------------------------------------------- */
dl.settings
{
clear: right;
overflow: auto;
margin: 0 0 10px 0;
padding: 0;
}
dl.settings dt
{
width: 48%;
float: left;
margin: 0 0 10px 0;
padding: 0;
clear: both;
}
dl.settings dt.settings_title
{
width: 100%;
float: none;
margin: 0 0 10px 0;
padding: 5px 0 0 0;
font-weight: bold;
clear: both;
}
dl.settings dt.windowbg
{
width: 98%;
float: left;
margin: 0 0 3px 0;
padding: 0 0 5px 0;
clear: both;
}
dl.settings dd
{
width: 48%;
float: left;
overflow: auto;
margin: 0 0 3px 0;
padding: 0;
}
dl.settings img
{
margin: 0 10px 0 0;
}
/* The main content area.
------------------------------------------------------- */
.content, .roundframe
{
padding: 0.5em 1.2em;
margin: 0;
border: none;
border: 1px solid #adadad;
}
.content p, .roundframe p
{
margin: 0 0 0.5em 0;
}
/* Styles used by the auto suggest control.
------------------------------------------------------- */
.auto_suggest_div
{
border: 1px solid #000;
position: absolute;
visibility: hidden;
}
.auto_suggest_item
{
background-color: #252525;
}
.auto_suggest_item_hover
{
background-color: #000;
cursor: pointer;
color: #00cc00;
}
/* Styles for the standard dropdown menus.
------------------------------------------------------- */
/* Container for the new admin menu */
#adm_container
{
float: left;
margin-left: 10px;
padding: 0 5px 0 5px;
background: url(../images/admintab_left.png) no-repeat;
}
ul.admin_menu, ul.admin_menu li ul
{
margin: 0;
padding: 0;
list-style: none;
}
ul.admin_menu
{
background: url(../images/admintab_right.png) top right no-repeat;
}
ul.admin_menu a
{
text-decoration: none;
}
/* First layer of menu items */
ul.admin_menu li
{
position: relative;
float: left;
background: url(../images/admintab_back.png) top right repeat-x;
padding-right: 4px;
}
ul.admin_menu li.last
{
background: url(../images/admintab_right.png) top right repeat-x;
}
ul.admin_menu li.chosen
{
background: url(../images/admintab_active_left.png) no-repeat;
padding: 0 0 0 6px;
}
ul.admin_menu li h4
{
margin: 0;
padding: 7px 5px 3px 5px;
cursor: pointer;
font-weight: normal;
font-size: x-small;
text-transform: uppercase;
color: white;
}
ul.admin_menu li h4:hover
{
color: fc0;
}
ul.admin_menu li.last.chosen h4
{
background: url(../images/admintab_active_last.png) top right no-repeat;
padding-right: 17px;
color: black;
}
/* IE6 does't support multiple class selectors */
ul.admin_menu li.last_chosen h4
{
background: url(../images/admintab_active_last.png) top right no-repeat;
padding-right: 17px;
color: black;
}
ul.admin_menu li.chosen h4
{
background: url(../images/admintab_active_right.png) top right no-repeat;
padding-right: 10px;
color: black;
}
ul.admin_menu li.chosen h4:hover
{
color: red;
}
/* Second layer of menu items */
ul.admin_menu li ul
{
z-index: 90;
display: none;
position: absolute;
/* IE6 needs a fixed width to prevent the menu from going haywire */
width: 19em;
border: 1px solid #808080;
border-left: 2px solid #6888a7;
background: #000;
}
ul.admin_menu li.chosen ul
{
margin: 0 0 0 -6px;
}
ul.admin_menu li ul li
{
background: none;
width: 19em;
padding: 0;
}
ul.admin_menu li ul li a
{
display: block;
padding: 0.5em 2em 0.5em 0.5em;
font-size: 90%;
text-decoration: none;
background: none;
color: #000 !important;
}
ul.admin_menu li ul li a.subsection
{
background: url(../images/admin/subsection.gif) no-repeat 98% 50%;
}
ul.admin_menu li ul li a.chosen
{
font-weight: bold;
}
ul.admin_menu li ul li a:hover
{
background-color: #252525;
text-decoration: none;
}
ul.admin_menu li:hover ul, ul.admin_menu li.over ul
{
display: block;
}
/* Third layer of menu items */
ul.admin_menu li ul li ul, ul.admin_menu li ul li.over ul
{
display: none;
position: absolute;
top: -999em;
border: 1px solid #a0a0a0;
border-left: 2px solid #6888a7;
background: #454545;
}
ul.admin_menu li ul li:hover ul, ul.admin_menu li ul li.over ul
{
display: block;
left: 18em;
top: auto;
margin: -2em 0 0 1em;
}
#adm_submenus
{
padding: 0 0 0 2em;
}
#adm_submenus, #adm_submenus ul
{
height: 3em;
overflow: auto;
}
/* The dropdown menu toggle image */
div#menu_toggle
{
float: right;
margin: 0 10px 0 0;
background: url(../images/changetab_left.png) top left no-repeat;
padding: 0 0 0 7px;
}
div#menu_toggle a
{
display: block;
background: url(../images/changetab_right.png) top right no-repeat;
padding: 8px 12px 3px 6px;
}
That's nice but I prefer dark blue like Twitter or Google Maps layout.
Quote from: Scott5114 on March 26, 2021, 04:07:41 PM
I think there is supposed to be a new version of SMF coming out soon that would probably require making a new theme anyway, so it's probably better to wait for that to come out than to try and do anything with it now.
This. SMF 2.1 is getting close to being released, and it might be better to wait till then before designing a new theme for the forum, since a new one would be required anyways.
Quote from: tolbs17 on March 26, 2021, 06:01:00 PM
That's nice but I prefer dark blue like Twitter or Google Maps layout.
Something something beggars, something something choosers.
Look at Highway Divides.
Quote from: tolbs17 on March 26, 2021, 06:41:07 PM
Look at Highway Divides.
That's nice but I prefer not looking at it.
If it matters to you so much that there's a blue theme, then go learn how to make a blue theme for us, and we'll install it. It's very easy to sit on your throne and dictate what color things are if you aren't the one who has to do the work to make it happen.
Quote from: Scott5114 on March 26, 2021, 07:15:10 PM
Quote from: tolbs17 on March 26, 2021, 06:41:07 PM
Look at Highway Divides.
That's nice but I prefer not looking at it.
If it matters to you so much that there's a blue theme, then go learn how to make a blue theme for us, and we'll install it. It's very easy to sit on your throne and dictate what color things are if you aren't the one who has to do the work to make it happen.
Like this!
(https://i.imgur.com/Ji0FeJI.png)
Nice screenshot–have you got the code that makes it happen?
Quote from: Scott5114 on March 26, 2021, 07:40:25 PM
Nice screenshot–have you got the code that makes it happen?
Use inspect element and change the colors.
And I forgot how to post codes btw.
Neat. If it were that easy to do on a production website we would have done it already.
Quote from: Scott5114 on March 26, 2021, 07:48:51 PM
Neat. If it were that easy to do on a production website we would have done it already.
Would be a great idea to do it!
(https://i.imgur.com/AarmNCr.gif)
And how about the ranking colors?
Quote from: Scott5114 on March 26, 2021, 07:48:51 PM
Neat. If it were that easy to do on a production website we would have done it already.
If there's already two themes in SMF, why not upload another one?
And, I want the dark theme to be when the sunrises and sets.
Quote from: formulanone on March 26, 2021, 08:04:23 PM
Quote from: Scott5114 on March 26, 2021, 07:48:51 PM
Neat. If it were that easy to do on a production website we would have done it already.
If there's already two themes in SMF, why not upload another one?
As I mentioned, we could upload a dark mode theme, but it would be a generic one that doesn't have any of the road-specific imagery that the Button Copy theme has. More to the point, though, it sounds like when SMF 2.1 comes out we'll have to redo the themes then
anyway, so it would probably be best to just handle it then.
Quote from: tolbs17 on March 26, 2021, 08:08:06 PM
And, I want the dark theme to be when the sunrises and sets.
I want you to paint your bike fuchsia.
Quote from: Scott5114 on March 26, 2021, 08:09:12 PM
Quote from: formulanone on March 26, 2021, 08:04:23 PM
Quote from: Scott5114 on March 26, 2021, 07:48:51 PM
Neat. If it were that easy to do on a production website we would have done it already.
If there's already two themes in SMF, why not upload another one?
As I mentioned, we could upload a dark mode theme, but it would be a generic one that doesn't have any of the road-specific imagery that the Button Copy theme has. More to the point, though, it sounds like when SMF 2.1 comes out we'll have to redo the themes then anyway, so it would probably be best to just handle it then.
Quote from: tolbs17 on March 26, 2021, 08:08:06 PM
And, I want the dark theme to be when the sunrises and sets.
I want you to paint your bike fuchsia.
Unless you want to use the forum like in the early 2000s.
And hahaha would be nice
Quote from: tolbs17 on March 26, 2021, 08:08:06 PM
And, I want the dark theme to be when the sunrises and sets.
You underestimate the power of the dark theme.
Quote from: 1995hoo on March 26, 2021, 08:11:09 PM
Quote from: tolbs17 on March 26, 2021, 08:08:06 PM
And, I want the dark theme to be when the sunrises and sets.
You underestimate the power of the dark theme.
Why is that? Maybe 30 minutes before sunrise and 30 minutes after sunset would be ideal? The point of the dark theme is to reduce eye strain. Look at a windows2000 boot screen and see how bright it was in the dark.
Quote from: tolbs17 on March 26, 2021, 08:13:31 PM
Quote from: 1995hoo on March 26, 2021, 08:11:09 PM
Quote from: tolbs17 on March 26, 2021, 08:08:06 PM
And, I want the dark theme to be when the sunrises and sets.
You underestimate the power of the dark theme.
Why is that? Maybe 30 minutes before sunrise and 30 minutes after sunset would be ideal? The point of the dark theme is to reduce eye strain. Look at a windows2000 boot screen and see how bright it was in the dark.
Quote from: tolbs17 on March 26, 2021, 08:11:06 PM
Unless you want to use the forum like in the early 2000s.
And hahaha would be nice
Scott, I'm going to make a 1970's earth-tone theme just to mess with tolbs17...
Quote from: formulanone on March 26, 2021, 08:16:45 PM
Quote from: tolbs17 on March 26, 2021, 08:11:06 PM
Unless you want to use the forum like in the early 2000s.
And hahaha would be nice
Scott, I'm going to make a 1970's earth-tone theme just to mess with tolbs17...
Bonus points if you somehow manage to make it look like
Price is Right season 1.
(https://static.wikia.nocookie.net/priceisright/images/9/98/Doublebullseye2.jpg/revision/latest?cb=20181005043805)
Quote from: tolbs17 on March 26, 2021, 08:13:31 PM
Quote from: 1995hoo on March 26, 2021, 08:11:09 PM
Quote from: tolbs17 on March 26, 2021, 08:08:06 PM
And, I want the dark theme to be when the sunrises and sets.
You underestimate the power of the dark theme.
Why is that? Maybe 30 minutes before sunrise and 30 minutes after sunset would be ideal? The point of the dark theme is to reduce eye strain. Look at a windows2000 boot screen and see how bright it was in the dark.
You seriously didn't get the reference? :-o
(See the video "1" posted.)
Quote from: 1995hoo on March 26, 2021, 08:34:16 PM
Quote from: tolbs17 on March 26, 2021, 08:13:31 PM
Quote from: 1995hoo on March 26, 2021, 08:11:09 PM
Quote from: tolbs17 on March 26, 2021, 08:08:06 PM
And, I want the dark theme to be when the sunrises and sets.
You underestimate the power of the dark theme.
Why is that? Maybe 30 minutes before sunrise and 30 minutes after sunset would be ideal? The point of the dark theme is to reduce eye strain. Look at a windows2000 boot screen and see how bright it was in the dark.
You seriously didn't get the reference? :-o
(See the video "1" posted.)
I actually wasn't sure myself before looking it up and made a lucky guess.
Quote from: formulanone on March 26, 2021, 08:16:45 PM
Quote from: tolbs17 on March 26, 2021, 08:11:06 PM
Unless you want to use the forum like in the early 2000s.
And hahaha would be nice
Scott, I'm going to make a 1970's earth-tone theme just to mess with tolbs17...
Since we're (or at least he is) in the business of asking for a ton of theme features to be custom made now, can I get an art deco theme? /s It's the 20s, so it's the perfect occasion. After all it isn't the 2000s anymore.
Oh, and 30 minutes before the end of the decade the site crashes for 10 years. That'd be a nice touch.
Quote from: Scott5114 on March 26, 2021, 08:22:26 PM
Quote from: formulanone on March 26, 2021, 08:16:45 PM
Quote from: tolbs17 on March 26, 2021, 08:11:06 PM
Unless you want to use the forum like in the early 2000s.
And hahaha would be nice
Scott, I'm going to make a 1970's earth-tone theme just to mess with tolbs17...
Bonus points if you somehow manage to make it look like Price is Right season 1.
(https://static.wikia.nocookie.net/priceisright/images/9/98/Doublebullseye2.jpg/revision/latest?cb=20181005043805)
Can't see the image, and I can't pinpoint why. I opened it on my computer and phone and nothing.
Quote from: formulanone on March 26, 2021, 04:47:26 PM
I just modified the .css file, but there's no way to use one post to display it, since it's over 25,000 characters.
(https://www.aaroads.com/forum/gallery/2069_26_03_21_4_58_41.png)
Let me try to break it up...it's also a work in progress.
Suggest you email rickmastfan about this.
Quote from: formulanone on March 26, 2021, 04:47:26 PM
I just modified the .css file, but there's no way to use one post to display it, since it's over 25,000 characters.
(https://www.aaroads.com/forum/gallery/2069_26_03_21_4_58_41.png)
That particular design reminds me of how the forum looked with the original theme.
IF we were to add another theme here before SMF 2.1, just remember, I have to manually make fixes to the themes whenever I patch a mod we use, or SMF pushes an update on the 2.0.x branch most of the time. So we have to be careful with what is done. Just wanted to put this out there.
For the record, I'm one of the two people using the Core theme because for my eyes it's easier to read than the button copy theme.
I would also be interested in some sort of dark theme, but I can wait until SMF 2.1 if James thinks it would be better to do so.
I'm still waiting for a forced Clearview theme to make a comeback. :biggrin:
This would've been my idea for a dark theme.
(https://live.staticflickr.com/65535/51011223905_9993d7de80_k.jpg)
Quote from: SoDakInterstateEnthusiast on March 28, 2021, 09:53:28 PM
This would've been my idea for a dark theme.
Doesn't really seem all that dark, and the blue doesn't really match the feel of AARoads. It's better than pure white, but what Dark Reader can produce is much better. For reference, this is what the forum looks like when using Dark Reader since I don't think anyone's posted a screenshot of it so far.
(https://i.imgur.com/M2rxJZL.png)
Quote from: JoePCool14 on March 28, 2021, 10:41:00 PM
Quote from: SoDakInterstateEnthusiast on March 28, 2021, 09:53:28 PM
This would've been my idea for a dark theme.
Doesn't really seem all that dark, and the blue doesn't really match the feel of AARoads. It's better than pure white, but what Dark Reader can produce is much better. For reference, this is what the forum looks like when using Dark Reader since I don't think anyone's posted a screenshot of it so far.
(https://i.imgur.com/M2rxJZL.png)
What exactly are the objective criteria for "the feel of AARoads"?
Quote from: JoePCool14 on March 28, 2021, 10:41:00 PM
Quote from: SoDakInterstateEnthusiast on March 28, 2021, 09:53:28 PM
This would've been my idea for a dark theme.
Doesn't really seem all that dark, and the blue doesn't really match the feel of AARoads. It's better than pure white, but what Dark Reader can produce is much better. For reference, this is what the forum looks like when using Dark Reader since I don't think anyone's posted a screenshot of it so far.
(https://i.imgur.com/M2rxJZL.png)
Oh, I really like that.
Quote from: SoDakInterstateEnthusiast on March 28, 2021, 10:44:19 PM
What exactly are the objective criteria for "the feel of AARoads"?
Something that resembles roads in some form. The BGS theming is pretty cool and makes sense. Light blue isn't really a road-related color. That's my
subjective opinion though.
Quote from: SoDakInterstateEnthusiast on March 28, 2021, 10:44:19 PM
What exactly are the objective criteria for "the feel of AARoads"?
When I designed the existing forum theme, the design objective was to create a user interface that evoked the subject matter of the forum (roads, primarily in the US) by using the existing design language of the U.S. road system (that is, the MUTCD) as much as possible. So the "quote" and "edit post" buttons are blue squares, evoking blue square services signage, the "NEW!" icon that shows up on topics with new posts is a modification of the "NEW" banner in the MUTCD, and so on. The grey bar at the top of each page (and above the Quick Reply box) has a pavement-like texture. And of course, the primary color is green, because that's the color of guide signage.
Since the subject matter of the forums hasn't changed, I see no reason why the design language of the forum should either. So a dark version of the forum theme would ideally stick to the same principles, but just use darker greens and greys where appropriate.
Eh, Dark reader helps a little bit but I don't really like it.
Quote from: Scott5114 on March 28, 2021, 10:56:09 PM
Quote from: SoDakInterstateEnthusiast on March 28, 2021, 10:44:19 PM
What exactly are the objective criteria for "the feel of AARoads"?
When I designed the existing forum theme, the design objective was to create a user interface that evoked the subject matter of the forum (roads, primarily in the US) by using the existing design language of the U.S. road system (that is, the MUTCD) as much as possible. So the "quote" and "edit post" buttons are blue squares, evoking blue square services signage, the "NEW!" icon that shows up on topics with new posts is a modification of the "NEW" banner in the MUTCD, and so on. The grey bar at the top of each page (and above the Quick Reply box) has a pavement-like texture. And of course, the primary color is green, because that's the color of guide signage.
Since the subject matter of the forums hasn't changed, I see no reason why the design language of the forum should either. So a dark version of the forum theme would ideally stick to the same principles, but just use darker greens and greys where appropriate.
Or you could do a black and yellow theme, resembling asphalt and paint. (buttons resemble warning signage, maybe?)
Quote from: SoDakInterstateEnthusiast on March 29, 2021, 07:11:46 AM
Quote from: Scott5114 on March 28, 2021, 10:56:09 PM
Quote from: SoDakInterstateEnthusiast on March 28, 2021, 10:44:19 PM
What exactly are the objective criteria for "the feel of AARoads"?
When I designed the existing forum theme, the design objective was to create a user interface that evoked the subject matter of the forum (roads, primarily in the US) by using the existing design language of the U.S. road system (that is, the MUTCD) as much as possible. So the "quote" and "edit post" buttons are blue squares, evoking blue square services signage, the "NEW!" icon that shows up on topics with new posts is a modification of the "NEW" banner in the MUTCD, and so on. The grey bar at the top of each page (and above the Quick Reply box) has a pavement-like texture. And of course, the primary color is green, because that's the color of guide signage.
Since the subject matter of the forums hasn't changed, I see no reason why the design language of the forum should either. So a dark version of the forum theme would ideally stick to the same principles, but just use darker greens and greys where appropriate.
Or you could do a black and yellow theme, resembling asphalt and paint. (buttons resemble warning signage, maybe?)
That's sort of what I went for, a "Night Driver" scenario, with a mix of the MUTCD colors for warning and construction. Soon I found a few colors need some desaturation against the dark backgrounds. Personally, I'm not a dark-theme expert, nor a big fan of using black/dark backgrounds with lots of text, so I might be way off! There's also a few mismatches because sometimes you just say "hey, what does this do?" and can't see what that is until you change to a different type of page (profile, messages, forum items outside one's defaults, et al).
In my opinion, the stylesheet is a bit over-complicated, but that also allows for super-fine customization.
Quote from: tolbs17 on March 26, 2021, 08:43:43 PM
Quote from: Scott5114 on March 26, 2021, 08:22:26 PM
Bonus points if you somehow manage to make it look like Price is Right season 1.
(https://static.wikia.nocookie.net/priceisright/images/9/98/Doublebullseye2.jpg/revision/latest?cb=20181005043805)
Can't see the image, and I can't pinpoint why. I opened it on my computer and phone and nothing.
It's because the URL has extra junk after the .jpg file extension.
Does this display for you?
(https://static.wikia.nocookie.net/priceisright/images/9/98/Doublebullseye2.jpg)
Quote from: 1 on March 30, 2021, 11:13:49 AM
Quote from: kphoger on March 30, 2021, 11:12:53 AM
It's because the URL has extra junk after the .jpg file extension. If you get rid of the junk, then it doesn't render either, though. Stupid Wikia Fandom...
It works for me after removing the junk. It's the https issue again.
Fixed. I had an extra character left over.