Custom CSS

Forum rules Need urgent support or can't access your account? Email us at support@furstralia.com
User avatar
Furstralian
Posts: 272
Species: Wolf

kasarn, Thu Apr 11, 2013 11:35 am

Messing about in Stylish (custom CSS addon for Firefox and Chrome).

Got bored, thought I'd post what I had:
Image Image

/* ==== GENERAL STUFF ==== */
div#main { /* iframe wrapper; fixes the left/right scrolling */
width:970px !important;
}


/* ==== MESSAGE THREAD STUFF ==== */
li.Comment { /* forums messages */
background-color:rgb(227, 244, 255);
border-radius:10px;
border-top-left-radius:0px;
margin-top:0.5em !important;
box-shadow: 5px 5px 5px #888888;
border: 1px solid rgb(190, 200, 204) !important;
}

li.Comment.Alt { /* alternate forum messages */
background-color:aliceblue !important;
}

div.Message { /* messages */
margin:1.5em 0em !important;
}

div.UserSignature { /* user signatures */
color:silver;
border-top:1px dashed rgb(190, 200, 204) !important;
line-height:1;
}

blockquote.UserQuote { /* quotes */
border-radius:10px;
}

div.MessageForm { /* reply box */
margin-top:1em !important;
}

img.ProfilePhotoMedium {
border:2px solid black !important;
}


/* ==== CATEGORY VIEW STUFF ==== */
ul.CategoryList {
background:aliceblue;
border:1px solid LightSteelBlue !important;
}

ul.CategoryList li.Depth1 {
color:#FFF !important;
background-color:DodgerBlue !important;
border:none !important;
border-radius:0px !important;
border-bottom-left-radius:6px !important;
border-bottom-right-radius:6px !important;
}

ul.CategoryList li.Depth1 a {
color:#FFF !important;
}

ul.CategoryList li.Depth2 {
border-bottom:1px solid LightSteelBlue !important;
padding-left:0.5em !important;
line-height:1.5;
}

div.CategoryDescription {
padding-left:1em !important;
font-size:0.9em !important;
color:#888;
}

User avatar
Furstralian
Posts: 203
Species: ►Vampire fox
Location: ► Brisbane

FoxTailedCritter, Thu Apr 11, 2013 12:32 pm

Whoa thats pretty kewl~!
Thanks fur sharing that. ^w^
Everything you say or do has ripple effects....
Be the change you want to see in the world.

User avatar
Furstralian
Posts: 272
Species: Wolf

kasarn, Fri Apr 12, 2013 5:44 pm

This snippet will make many things light up when you mouse over them. It's like instant readability!
li.Comment:hover,
li.Item:hover,
li.Activity:hover,
div.Box li:hover
{
background-color:LemonChiffon !important;
}

li.ActivityComment:hover {
background-color:PeachPuff !important;
}
Much simpler than restyling the entire forum and thus not likely to break whenever Zwabbe decides to reskin it.

User avatar
Furstralian
Posts: 272
Species: Wolf

kasarn, Tue Jun 04, 2013 12:39 pm

If anybody was interested, this is what I currently use.

/* ==== GENERAL STUFF ==== */
div#main { /* iframe wrapper; fixes the left/right scrolling */
width:970px !important;
}


/* ==== MESSAGE THREAD STUFF ==== */
li.Comment { /* forums messages */
background-color:aliceblue;
border-radius:10px;
margin-top:0.5em !important;
box-shadow: 2px 2px 3px #888888;
border: 1px solid rgb(190, 200, 204) !important;
}

li.Comment.Alt { /* alternate forum messages */
background-color:rgb(227, 244, 255) !important;
}

div.Message { /* messages */
margin:1.5em 0em !important;
}

div.UserSignature { /* user signatures */
color:silver;
border-top:1px dashed rgb(190, 200, 204) !important;
line-height:1;
}

blockquote.UserQuote { /* quotes */
border-radius:3px;
}

div.MessageForm { /* reply box */
margin-top:1em !important;
}

img.ProfilePhotoMedium {
border:2px ridge SlateGray !important;
}

li.Mine {
background-color:Lavender !important;
}

/* nested comments */
.ReplyToDepth-1 {
margin-left:2em !important;
border-top-left-radius:0px !important;
}

.ReplyToDepth-1 .Comment {
padding-left:0em !important;
}


/* ==== CATEGORY VIEW STUFF ==== */
ul.CategoryList { /* forum */
/*background:aliceblue;*/
}

div.Tabs.Headings.CategoryHeadings { /* "All Categories" thingy at the top*/
width:300px;
color:rgb(153, 226, 254);
background-color:rgb(0, 76, 155) !important;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom:none !important;
text-align:center !important;
}

ul.CategoryList li.Depth1 { /* forum groupings */
color:#FFF !important;
background-color:DodgerBlue !important;
border-bottom:none !important;
border-radius:6px !important;
margin-top:0.1em !important;
}

/* first forum grouping for styling different than the others */
ul.CategoryList li.Category-news-and-notices {
border-top-left-radius:0px !important;
margin-top:0em !important;
}

ul.CategoryList li.Depth1 a { /* forum groupings text */
color:#FFF !important;
}

ul.CategoryList li.Depth2 { /* forums */
background:aliceblue;
border-bottom:1px dashed LightSteelBlue !important;
line-height:1.5;
margin-left:5px !important;
margin-right:5px !important;
}

/* adds a star when there are new posts in category view */
ul.CategoryList li.Unread a.Title:after {
content:" ★";
color:Tomato;
}

div.CategoryDescription { /* text description for forums */
padding-left:1em !important;
font-size:0.9em !important;
color:#888;
}

/* make the RSS icon a bit smaller */
img[src="/home/forum/applications/dashboard/design/images/rss.gif"] {
width:1em;
height:1em;
}

/* adds a spacer between individual forum stats */
span.CommentCount:after, span.LastDiscussionTitle:after {
content:"•"
}

/* total forum stats at the bottom */
div.SFPBox {border-bottom-left-radius:10px;}
div.SFVCBox {border-bottom-right-radius:10px; margin-right:5px !important;}


/* ==== HOVER STUFF ==== */
div.Unfollow {
background-color:transparent !important;
}

li.Comment:hover,
li.Item:hover,
li.Activity:hover,
div.Box li:hover,
div.Unfollow:hover
{
background-color:LemonChiffon !important;
}

ul.CategoryList li.Depth1:hover {
background-color:LemonChiffon !important;
background-image: linear-gradient(to right, DodgerBlue, LemonChiffon) !important;
}

li.ActivityComment:hover {
background-color:PeachPuff !important;
}

User avatar
Furstralian
Posts: 235
Species: Goat

Wererstritchy, Tue Jun 04, 2013 9:58 pm

Hmm... I wonder if you can change the left border a little to make it look like a speech bubble. Might be tricky. you may even have to make a second shape to overlap, either the left or the top side to do that... now I'm interested in trying my hand at stylish.

User avatar
Furstralia Founder
Posts: 699
Species: Snow Leopard

Zwabbe, Sun Jun 16, 2013 2:27 pm

Thanks for this CSS. I'll look into integrating it soon. I have another busy couple weeks ahead of me but I like these changes!


Return to “Support and Feedback”