Home
Forums
New posts
Search forums
What's new
New posts
New profile posts
Latest activity
Members
Current visitors
New profile posts
Search profile posts
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Menu
Log in
Register
Install the app
Install
Major Changes to the Word Censor - PLEASE READ
Home
Forums
FreeOnes
Questions, Comments, and Suggestions
Style customization for the new board
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="Automate" data-source="post: 10773573" data-attributes="member: 340712"><p>Another version. This one has lighter colors and is trying to approach the old board colors, although I intentionally set background colors a slight bit darker.</p><p></p><p>[CODE=css]/* This is an attempt to get close to the old board colors.</p><p> It will not be completely correct because I haven't found</p><p> screenshots of individual threads from the old board (yet)</p><p> to sample the colors from and some of the background colors</p><p> and gradients still seem blaringly bright, so I've made</p><p> those a bit darker. */</p><p>/* Non-rounded avatars */</p><p>.avatar {</p><p> border-radius: 0;</p><p>}</p><p>/* Background color */</p><p>.p-body {</p><p> background-color: #9ed6f9;</p><p>}</p><p>/* Links</p><p> Found out that if I use the pseudo-class :link here, the</p><p> link color will in places override everything I set for</p><p> some texts afterwards which are also links, such as the</p><p> share, bookmark and post numbers on top right of the</p><p> message box. Setting it with just the element, it doesn't</p><p> override (found out that it has to do with specificity,</p><p> not getting into that right now). So I'm not using the</p><p> pseudo-class then. */</p><p>a {</p><p> color: blue;</p><p> font-weight: bold;</p><p>}</p><p>/* Visited link */</p><p>a:visited {</p><p> color: #c6c;</p><p>}</p><p>/* Link color when mouseover */</p><p>a:hover {</p><p> color: #fa7411;</p><p>}</p><p>/* Link color when clicked, set it to the same as :link for now */</p><p>a:active {</p><p> color: blue;</p><p>}</p><p>/* Date, share, bookmark, post number, signature text */</p><p>div.message-attribution-main,</p><p>div.message-lastEdit,</p><p>div.message-signature {</p><p> color: black !important;</p><p>}</p><p>/* Right upper corner buttons and post number text color */</p><p>ul.message-attribution-opposite {</p><p> color: black !important;</p><p>}</p><p>ul.message-attribution-opposite--list {</p><p> color: black !important;</p><p>}</p><p>/* Message box colors */</p><p>div.message-cell--main {</p><p> background-color: #eee;</p><p>}</p><p>div.message-cell.message-cell--user {</p><p> background-color: #ddd;</p><p>}</p><p>div.message--post {</p><p> background-color: #bbb;</p><p>}</p><p>/* Thread titles */</p><p>.p-title,</p><p>.p-description {</p><p> color: black;</p><p>}</p><p>/* Username display near the thread title */</p><p>.username {</p><p> color: black;</p><p>}</p><p>/* Thread menu header */</p><p>.menu-header {</p><p> color: black !important;</p><p>}</p><p>/* Thread list: background gradients */</p><p>div.structItem {</p><p> background: linear-gradient(0deg, #e0e0e0, #eee);</p><p>}</p><p>/* Thread list: title text */</p><p>/*div.structItem-title a {</p><p> font-weight: normal;</p><p>}*/</p><p>/* Thread list: thread start date text */</p><p>li.structItem-startDate a {</p><p> color: black;</p><p> font-weight: normal;</p><p>}</p><p>/* Thread list: most current post date */</p><p>time.structItem-latestDate {</p><p> color: black;</p><p> font-weight: lighter;</p><p>}</p><p>/* Main forum section background gradients */</p><p>div.node-body {</p><p> background: linear-gradient(0deg, #e0e0e0, #eee);</p><p>}</p><p>/* Main forum section title gradient */</p><p>h2.block-header {</p><p> background: linear-gradient(0deg, #46a9ff, #75daff);</p><p>}</p><p>/* Main forum section date display */</p><p>ul.listInline {</p><p> color: black;</p><p>}</p><p>/* Main forum section username display */</p><p>li.node-extra-user a {</p><p> color: blue;</p><p> font-weight: normal;</p><p>}</p><p>/* Sub-forums text */</p><p>div.node-subNodeMenu a.menuTrigger {</p><p> color: black;</p><p>}</p><p>/* Filter bar above the thread list */</p><p>div.block-filterBar {</p><p> background: linear-gradient(0deg, #46a9ff, #75daff);</p><p> color: white;</p><p>}</p><p>/* Filter menu text color */</p><p>a.filterBar-menuTrigger {</p><p> color: black;</p><p>}</p><p>/* Top forum hierarchy navigation */</p><p>span[itemprop="name"] {</p><p> color: black;</p><p>}</p><p>/* Colors for the Replies: and Views: texts on threads */</p><p>dl.pairs {</p><p> color: black;</p><p>}</p><p>dl.pairs dt {</p><p> color: black;</p><p>}</p><p>/* Usernames on the thread list */</p><p>div.structItem-***** a {</p><p> color: blue;</p><p> font-weight: normal;</p><p>}</p><p>/* Dates in the thread list */</p><p>li.structItem-startDate a {</p><p> color: black;</p><p>}</p><p>/* Page jump box text color */</p><p>span.structItem-pageJump a {</p><p> color: black;</p><p>}[/CODE]</p><p></p><p><strong>Don't use this at the same time as all the dark theme settings above.</strong> <strong>Use one or the other</strong>, otherwise colors will most likely break in all kinds of irritating ways.</p><p></p><p>That's me done for a while. Somebody else can continue from here. Oh, and screenshots on what this does:</p></blockquote><p></p>
[QUOTE="Automate, post: 10773573, member: 340712"] Another version. This one has lighter colors and is trying to approach the old board colors, although I intentionally set background colors a slight bit darker. [CODE=css]/* This is an attempt to get close to the old board colors. It will not be completely correct because I haven't found screenshots of individual threads from the old board (yet) to sample the colors from and some of the background colors and gradients still seem blaringly bright, so I've made those a bit darker. */ /* Non-rounded avatars */ .avatar { border-radius: 0; } /* Background color */ .p-body { background-color: #9ed6f9; } /* Links Found out that if I use the pseudo-class :link here, the link color will in places override everything I set for some texts afterwards which are also links, such as the share, bookmark and post numbers on top right of the message box. Setting it with just the element, it doesn't override (found out that it has to do with specificity, not getting into that right now). So I'm not using the pseudo-class then. */ a { color: blue; font-weight: bold; } /* Visited link */ a:visited { color: #c6c; } /* Link color when mouseover */ a:hover { color: #fa7411; } /* Link color when clicked, set it to the same as :link for now */ a:active { color: blue; } /* Date, share, bookmark, post number, signature text */ div.message-attribution-main, div.message-lastEdit, div.message-signature { color: black !important; } /* Right upper corner buttons and post number text color */ ul.message-attribution-opposite { color: black !important; } ul.message-attribution-opposite--list { color: black !important; } /* Message box colors */ div.message-cell--main { background-color: #eee; } div.message-cell.message-cell--user { background-color: #ddd; } div.message--post { background-color: #bbb; } /* Thread titles */ .p-title, .p-description { color: black; } /* Username display near the thread title */ .username { color: black; } /* Thread menu header */ .menu-header { color: black !important; } /* Thread list: background gradients */ div.structItem { background: linear-gradient(0deg, #e0e0e0, #eee); } /* Thread list: title text */ /*div.structItem-title a { font-weight: normal; }*/ /* Thread list: thread start date text */ li.structItem-startDate a { color: black; font-weight: normal; } /* Thread list: most current post date */ time.structItem-latestDate { color: black; font-weight: lighter; } /* Main forum section background gradients */ div.node-body { background: linear-gradient(0deg, #e0e0e0, #eee); } /* Main forum section title gradient */ h2.block-header { background: linear-gradient(0deg, #46a9ff, #75daff); } /* Main forum section date display */ ul.listInline { color: black; } /* Main forum section username display */ li.node-extra-user a { color: blue; font-weight: normal; } /* Sub-forums text */ div.node-subNodeMenu a.menuTrigger { color: black; } /* Filter bar above the thread list */ div.block-filterBar { background: linear-gradient(0deg, #46a9ff, #75daff); color: white; } /* Filter menu text color */ a.filterBar-menuTrigger { color: black; } /* Top forum hierarchy navigation */ span[itemprop="name"] { color: black; } /* Colors for the Replies: and Views: texts on threads */ dl.pairs { color: black; } dl.pairs dt { color: black; } /* Usernames on the thread list */ div.structItem-***** a { color: blue; font-weight: normal; } /* Dates in the thread list */ li.structItem-startDate a { color: black; } /* Page jump box text color */ span.structItem-pageJump a { color: black; }[/CODE] [B]Don't use this at the same time as all the dark theme settings above.[/B] [B]Use one or the other[/B], otherwise colors will most likely break in all kinds of irritating ways. That's me done for a while. Somebody else can continue from here. Oh, and screenshots on what this does: [/QUOTE]
Insert quotes…
Name
Verification
Does a dog bark or quack?
Post reply
Home
Forums
FreeOnes
Questions, Comments, and Suggestions
Style customization for the new board
Top