Custom CSS

Having problems? Like what you see here? Got a great idea for improving the forums? Something you think we could do better? Tell us all about it here! Need urgent support or can't access your account? Email us at support@fustralia.com
Forum rules
Need urgent support or can't access your account? Email us at support@furstralia.com
User avatar
kasarn
Furstralian
Furstralian
Posts: 272
Joined: Wed Dec 20, 2006 11:02 pm
Species: Wolf

Custom CSS

Postby 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
FoxTailedCritter
Furstralian
Furstralian
Posts: 203
Joined: Thu Apr 28, 2011 3:57 am
Species: ►Vampire fox
Location: ► Brisbane
Contact:

Custom CSS

Postby 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
kasarn
Furstralian
Furstralian
Posts: 272
Joined: Wed Dec 20, 2006 11:02 pm
Species: Wolf

Custom CSS

Postby 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
kasarn
Furstralian
Furstralian
Posts: 272
Joined: Wed Dec 20, 2006 11:02 pm
Species: Wolf

Custom CSS

Postby 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
Wererstritchy
Furstralian
Furstralian
Posts: 235
Joined: Thu Jul 26, 2012 8:31 am
Species: Goat

Custom CSS

Postby 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
Zwabbe
Furstralia Founder
Furstralia Founder
Posts: 699
Joined: Thu Jan 01, 1970 10:00 am
Species: Snow Leopard

Custom CSS

Postby 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!

Who is online

Users browsing this forum: No registered users and 1 guest