Definitely not right. Doesn’t look like anything on that page is picking up the styles I added, except the background. I wonder if I used the wrong tags that are specific only to my instance. Did you copy over the entire style or just cut and paste. Some of it is inherited from earlier edits, so if you don’t use all of it, that could explain the difference.
Here is an update to my style.
- fixes the signature
- adds lines to divide the signature from the message
- fix some other text showing up too dark
- quote boxes are lighter to make them stand out easier
! html, body {background-color: #323232}
! nav.navbar-default .navbar-nav>li>a {color: #323232}
! nav.navbar.navbar-default {background-color: #323232; border: 0px}
! div.container-fluid div.row {max-width: none}
! div.navbar-collapse.collapse {background-color: #ff8a00; border-color: #ff8a00}
! div.container-fluid span.Breadcrumbs {background-color: #222; margin-bottom: 10px}
! div.container-fluid span.CrumbLabel.HomeCrumb a {color: #fff}
! div.container-fluid span.CrumbLabel.Last a {color: #ff8a00}
! div.well {background-color: #222; padding: 15px}
! div.well.search-from div.AdvancedSearch {max-width: none}
! div.container-fluid h1.H {margin: 20px}
! div.P.PageDescription {color: #ccc; padding-left: 30px; padding-bottom: 0px}
! div.PageControls {margin: 10px}
! div.PageControls a.Previous {background-color: #ccc; border: #323232; color: #ff8a00}
! .NumberedPager span {background-color: #ccc; border: #323232; color: #000}
! .NumberedPager a {background-color: #ccc; border: #323232; color: #000}
! .NumberedPager div.QuickSearch {background-color: #ccc; border: #323232}
! .NumberedPager div.QuickSearch a {background-color: #ccc}
! div.PageControls a.Next {background-color: #ccc; border: #323232; color: #ff8a00}
! .CategoryHeading {background: #ff8a00 !important}
! .DataList .Item {border: 1px solid #323232; background-color: #222}
! .DataList .Item a {color: #ff8a00}
! .DataList .Item .Meta a {color: #fff !Important}
! .OptionsMenu .SpFlyoutHandle {color: #ccc}
! div.CategoryDescription {color: #777}
! div.BoxFilter {border: solid #323232; background-color: #222}
! div.BoxFilter li a {color: #777}
! div.BoxFilter .Count {background-color: #777}
! div.CategoryFilter {border: solid #323232; padding: 15px; background-color: #222; color: #777}
! div.Box.Tags {border: solid #323232; padding: 15px; background-color: #222; color: #777}
! div.Box.Tags li {background-color: #222}
! div.Box.Tags li a {color: #777}
! div.Box.Tags .Count {background-color: #777; color: #ff8a00}
! div.WhosOnline {border: solid #323232; padding: 15px; background-color: #222; color: #777}
! div.WhosOnline .Count {background-color: #323232}
!
! div.MessageList div.Item {border: 5px #ff8a00}
! div.Item-Header.DiscussionHeader {background-color: #777; border: 0px}
! div.Item-Header div.AuthorWrap a {color: #ff8a00}
! div.Item span.AuthorInfo {color: #ccc}
! div.Item-Header.CommentHeader {background-color: #777; border: 0px}
! div.Comment span.AuthorInfo {color: #ccc}
! div.Comment span.Arrow.SpFlyoutHandle {color: #ccc}
! div.Message p {color: #ccc}
!
! div.Meta.DiscussionMeta a {color: #ff8a00 !Important}
! div.Item-BodyWrap {background-color: #222}
! div.Item-Body div.Message {color: #ccc; border-bottom: 1px solid #777}
! div.Item-Body div.Message blockquote.Quote {background-color: #555}
! div.Meta.CommentMeta.CommentInfo a {color: #ff8a00 !Important}
! ul.AcceptedAnswers .Item.QnA-Item-Accepted .Item-Body {background-color: #777;}
!
! div.Form-BodyWrap {background-color: #777}
! div.Form-BodyWrap div.Buttons {background-color: #777; border-top: 10px solid #323232}
! div.MessageForm {border: 0px}
! div.container-fluid.dark.footer div.row {padding: 20px 60px 20px 60px}
!
! div.Profile h2.H {color: #ccc}
! div.Profile div.Title {color: #ccc}
! div.Profile dl.About {color: #777}
! div.Photo.PhotoWrap.PhotoWrapLarge {background-color: #323232; border: 0px}
!
! div.Box.Leaderboard {background-color: #222; padding: 15px; color: #777}
! div.Box.Leaderboard .PanelInfo a {background-color: #222; color: #ff8a00; border: 0px}
! div.Box.Leaderboard .Count {background-color: #777}
! div.ItemContent.Activity {color: #777}
! div.ItemContent.Activity div.Title {color: #777}
!
! div.Signature.UserSignature {color: #777; border-bottom: 1px solid #777}
Actually, I am the problem here… It was @vanstinator 's Style that I uploaded automatically… yours is a cut and paste from the .txt file.
I guess my problem is that I want the best of both… I’ll just stand back for a while and let you two guys duke-it-out for market share. HAhhaaahaaaa… ugh.
Sorry.
Okay, here’s my entry:
{
html, body {color: #E2E2E2; background-color: #282828;}
ul.DataList li.Item {background-color: #F2F2F2;}
div.Item-BodyWrap {background-color: #e2e2e2;}
div.PageTitle h1 {color: #f2f2f2;}
h1.H {color: #F2F2F2;}
div.Form-BodyWrap {background-color: #e2e1e9;}
a {color: orange;}
div.DiscussionHeader, div.Item-Header {background-color: #f2f2f2 !important;}
/* Search */
.search-form {background-color: #d2d2d2;}
#Form_search, .Button {background-color: #f2f2f2;}
/* Text Editor */
/* appears when creating/editing posts, signature editor */
#Form_CategoryID, #Form_Name, #Form_Preview, #Form_SaveDraft {background-color: #f2f2f2;}
ul.token-input-list {background-color: #f2f2f2;}
form[id*="_Comment"], div.editor {color: #282828;}
div[class*="editor"] {color: #282828; background-color: #e2e2e2;}
textarea.TextBox {background-color: #f2f2f2;}
/* Tag Cloud */
ul.TagCloud {background-color: transparent;}
ul.TagCloud li {background-color: #424242;}
a[class^="Tag_"] {color: #f2f2f2 !important; background-color: transparent;}
span.Count {color: #f2f2f2 !important; background-color: #727272}
/*main navbar (Categories, Discussions, Activity, Account options, Notifications*/
nav.navbar, ul.nav.navbar-nav li a {color: #f2f2f2 !important; background-color: #5D5D5D;}
ul.nav.navbar-nav a.Selected {color: black; background-color: orange;}
ul.nav.navbar-nav li a:hover {color: orange !important; background-color: #5D5D5D;}
div.MeBox div.WhoIs a.Username {color: #f2f2f2;}
span.Breadcrumbs {background-color: transparent;}
/* Filter Menu (right side) */
ul.FilterMenu li a {color: #F2F2F2 !important;}
ul.FilterMenu li a:hover {color: #F2F2F2 !important; background-color: #383838;}
li[id^="Comment_"]{background-color: #9e9e9e !important;}
/*Category Headings */
li.CategoryHeading[id^="Category_"] {color: white !important; background-color: #5D5D5D !important;}
div.ItemContent.Category {color: white !important;}
/* Pager */
span[id^="Pager"], a[class*="p-"], a.Next, a.Previous, span.Next, span.Previous, span.Ellipsis, div.QuickSearch {color: #f2f2f2 !important; background-color: transparent !important; border-color: #828282 !important;}
span[id^="Pager"], a[class^="Highlight"] {color: white !important; background-color: orange !important; border-color: #8888AA !important;}
/* Signature Block */
div[class*="Signature"]{background-color: #f2f2f2;}
/* Preferences */
/* Flyout Menus */
div[class*="MenuItems"] {background-color: #5d5d5d;}
div.SignatureRules {color: #f2f2f2; background-color: transparent;}
}The only thing I see not working with my theme is the pager at the top of the screen when viewing a multi-page thread. For some reason, it isn’t following my CSS settings like the rest.
@beckfield I like your style (pun intended).
Yours is one that causes default Signatures to be invisible however.
It’s a good mix of Dark and Light areas.
There is a greenish tint to the text areas in the thread. Could you point me to that setting?
I’d prefer a little grayer background in the text.
@Plexhilarated said:
There is a greenish tint to the text areas in the thread. Could you point me to that setting?
I’d prefer a little grayer background in the text.
your monitor calibration is off.
the line you are looking for is most likely this: div.Item-BodyWrap {background-color: #e2e2e2;}
and #e2e2e2 is RGB 66,66,66 which is strictly neutral grey
@OttoKerner said:
the line you are looking for is most likely this: div.Item-BodyWrap {background-color: #e2e2e2;}
and #e2e2e2 is RGB 66,66,66 which is strictly neutral grey
You beat me to it.
@Plexhilarated
As for the Signature block, everyone’s signature is showing up for me. I added the words “Test signature” to my own, and it shows up. I wonder if the problem is with signatures created in the old forums.
EDIT: Oh, now I see Otto’s signature is invisible.
@OttoKerner said:
and #e2e2e2 is RGB 66,66,66 which is strictly neutral grey
Most of my life has a bluish tint to it, so you could be entirely correct. :))
Thanx for the pointer, I’ll go play with that setting.
@beckfield said:
I wonder if the problem is with signatures created in the old forums.
most likely ^^^
the old forum allowed color definitons. Back then, I chose to have my sig in grey to give it less visual “weight”.
those colors were imported and are still in effect.
^^^ I did the same ^^^
But I believe that all HTML color definition codes have been removed since (at least I removed them from mine).
@Plexhilarated said:
^^^ I did the same ^^^
But I believe that all HTML color definition codes have been removed since (at least I removed them from mine).
Only if you edited your signature since the forum switch 
edit: You can still use color. But you have to use html coding.
I’ve been tweaking mine, so if you haven’t copied it since the last edit, you might want to do it again.
I lightened the background of the Signature block, which made Otto’s reappear, but Plexhilarated’s got worse. :-/
@beckfield said:
I’ve been tweaking mine, so if you haven’t copied it since the last edit, you might want to do it again.I lightened the background of the Signature block, which made Otto’s reappear, but Plexhilarated’s got worse. :-/
maybe instead of trying to find a color, you could try to find an opacity that works.
added benefit: signatures are visually less important - no matter what bright colors the user chose
@OttoKerner said:
edit: You can still use color. But you have to use html coding.
Yeah, I did edit since the forum switch… the new forum didn’t allow images, initially - it does now (hence the logo), so I stripped out my HTML and started over. It should now be using whatever the default is for text color, because I have no other HTML codes in there.
Signature are going to be an issue if people use custom colors. I can’t find a way to override it. Anyone know if that is possible? i.e. Otto’s is a custom gray and I can’t get it to override to anything else.
You guys are making me wish I was home to be working on mine lol
I’m at work. Shhh.
How does Otto’s signature look? He uses a light gray which might get washed out with your gray background.
