Stylish Options?

Terra Branford

Terra Branford

Running an Orphanage!
Veteran
Joined
Jan 11, 2008
Messages
2,086
Location
Mobliz
Gil
0
I have been using Stylish on a few other Vb forums and was wondering if it could be added here? For one theme? If accepted, you could just duplicate one of the themes and add it as "Stylish" and then give the code out for Stylish for people to edit.

If no one knows what Stylish is, its a Firefox add-on that allows people to create themes for Vb, tumblr, youtube...almost anything, I believe. With the Stylish code, people could make their own themes for this forum without having to constantly beg for new ones or others could post their themes for others to use.

An example of what Stylish could do for the forum:
http://i52.tinypic.com/2nk8c8.jpg
(It doesn't work fully because I have no idea what the coding of the theme I'm using is..)

Well, was just curious to whether or not this could be applied to the site,

Terra~
 
Terra Branford: Can you link to the vBulletin 3.8.x compatible version?
 
You don't need to install anything else by Stylish. To install Stylish, go here. https://addons.mozilla.org/en-US/firefox/addon/stylish/

You don't need to install anything to the forum, that's the cool part. Well, you could create another theme for the Stylish users to use and set the code for others to edit. For example, its written in CSS and would look like this:

Code: 
@-moz-document domain("URL TO THE FORUM HERE. THIS TELLS THE CODE ONLY TO OVERRIDE THE FF FORUM'S THEMES, NOT OTHER SITES") {

body { 
color: #000000 !important;
font: 8pt "Tahoma", "verdana", "geneva", "lucida", "lucida grande", "arial", "helvetica", sans-serif !important;
background-image: url("background image url") !important;
background-repeat: repeat !important;
background-position: 50% 0% !important;
background-size: auto !important;
background-origin: padding-box !important;
background-clip: border-box !important;
background-color: #000000 !important;
background-attachment: fixed !important;
margin: 0px !important;
padding: 0px !important;
 }
The "!important;" means its overriding, but not permanently, all the old images, CSS, code etc. Say I wanted to change the gray to the post backgrounds, you'd find the CSS color to the post background:
Code: 
 }
textarea, .bginput { 
background-image: none !important;
background-attachment: scroll !important;
background-repeat: repeat !important;
background-position: 0% 0% !important;
background-size: auto !important;
background-origin: padding-box !important;
background-clip: border-box !important;
background-color: #DBD6C3 !important;
color: #000000 !important;
font: 9pt "verdana", "geneva", "lucida", "lucida grande", "arial", "helvetica", sans-serif !important;
border: 1px inset #0a0a0a !important;
margin: 0px auto 6px !important;
padding: 3px 0px 3px 3px !important;
 }
And change the colors, size, text effects, borders, margin, padding etc etc.

So to give an example of this, I'm using FFForums V1 [FIXED] theme. Say I wanted to change this image: http://www.finalfantasyforums.net/images/afterdark/misc/banner.jpg (the banner)

to something else. I would write the CSS code to overwrite the banner by doing this:

Code: 
img[src="http://www.finalfantasyforums.net/images/afterdark/misc/banner.jpg"]

{
width:0 !important;
height: 330px !important;
background-image: url("URL HERE OF BANNER") !important;
background-repeat: no-repeat !important;
padding-left: 1020px !important;
}
Did you see the "img[src="http://www.finalfantasyforums.net/images/afterdark/misc/banner.jpg"]"? That's the theme's default URL to the banner. You don't change this part, you change "background-image: url("URL HERE OF BANNER") !important;" and make sure the "!important;" is after it. The "!important;" tells Firefox to override the CSS its being fed with, with the ones Stylish is telling it to do.

So if the theme's code writes the posts to be pink: #pinknumber here
And you wanted it to be black, you would do this: "color; #000000 !important;"

The only hard part will be creating or giving out, the theme's CSS so people could get the code and tell Stylish to overwrite it....

Although I use Stylish and create themes for it, I wouldn't be able to create the template. The person who made the theme for the forum would have to create it...

*I will ask my friend Cael. He uses it....*

EDIT:
Here, I have something that might clear it up. By "it" I mean the actual workings of Stylish. Install Stylish and then go to Add-ons>Stylish>Options>Write new code>name it and then past one of my theme codes into the box and click "ENABLE". It will show you how it works.

Here is a link to themes you can test out. Or, you can simply click "INSTALL" once you have Stylish installed and it will automatically install the theme for you.

Once you have something installed, come back and view the forum (click "disable" when you don't want it anymore) and you will see how Stylish overrides previous CSS codes.
 
I use this on 4chan, actually. It makes everything look pretty damned nice. I attempted to try it on here once, but I had nothing to work with... so I couldn't do much of anything, just small things here and there. It's a rather nice idea, and the change would be more than welcome.

In fact, I already have a few good ideas running around in my head. :grin:
 
I know how to write CSS and what !important does, I'm just not sure what it is you expect me to do. All the CSS code for existing themes can be found and viewed via the source code already.
 
Oh, I thought "!important;" was exclusive to Stylish (I'm not very good with CSS, was just trying to explain just in case)...sorry about that. >.>

Well, I was wondering if the admin/Mods could upload a simpler theme (an extra, as mentioned above) for us (mostly novices just getting into CSS) to work with. But that is fine, I think I can build a template for the current themes here when I have some free time.

I was also going to ask -- if I was given permission -- if I could create a Community Skin Thread to post all the work in. And if I can, where this would go and if double posts and long posts (lots of codes) could be made...

@Chell:
Nice to see others worked with it or have tried it before :)
 
Terra Branford said:
Well, I was wondering if the admin/Mods could upload a simpler theme (an extra, as mentioned above) for us (mostly novices just getting into CSS) to work with.
Click to expand...

That would require someone taking it upon themselves to make one. Ryan made the Mercurial Dark skin, for example.

I was also going to ask -- if I was given permission -- if I could create a Community Skin Thread to post all the work in. And if I can, where this would go and if double posts and long posts (lots of codes) could be made...
Click to expand...

Assuming it was new information, double posts would be fine.

It seems like this is something that you can just do on your own, for your own personal view of the site. In other words, if you create a skin/theme, you're the only one who sees that theme, and it's only on your computer. So in that case, you wouldn't really need permission, as it wouldn't be affecting the site itself. Only your view of it.
 
Last edited:
There's really no such thing as a simpler theme either. All this theme has done is replace colour definition on the default style with its own, so even a completely un-customised theme would still have a load of CSS to edit.

Adding a theme that removes the CSS in question would just mean that Stylish users didn't know the full extent of the CSS to replace.

In other words, your best bet is to just copy down all the CSS files you see in the source on various pages, and then edit them as you see fit, then upload them to a service like Dropbox (to avoid posting it in-line) :)
 
By simpler, I mean nothing too fancy, like the default Vb theme? I know a lot of "novices" who just get confused or loses confidence (I want to encourage community work/help and whatnot), at longer codes full of complex looking images. For example, how the posts have images around them?

Where may I make a thread for this? The graphics area?

Thank you guys for clearing up the matter. :)
 
I think I may have something for you, Terra. Just for shits and giggles I used my current 4chan theme on FFF to see what would happen...

This is what I got:
24kz7tg.jpg


Now, I'm a little busy at the moment, so I can't do much with it. However, it seems that for the meantime, I've got a base to work with. I'll see what I can cook up in the next few days. :ryan:

If you want to tinker with it yourself, feel free to do so. You can find the code below. :grin:

Please share your results with me, as I am a lazy arse. :rofl:

Code: 
[MENTION=3251]nam[/MENTION]espace url([url]http://www.w3.org/1999/xhtml);[/url]



@-moz-document domain([url]www.finalfantasyforums.net[/url]) {



body 

  { background: url("http://i51.tinypic.com/zmdt8j.jpg")  center no-repeat fixed #000000 !important;

    font: 100%/1.4 Helvetica, Arial, sans-serif !important;
    color: #FFFFFF !important;  }



.filesize { font: 100%/1.4 Helvetica, Arial, sans-serif !important; }



a 

  { color: #F3399A !important; 

    font-weight: 700 !important; }



a:visited

  { font-weight: 200 !important;

    font-style: italic !important;

    opacity: 0.75 !important; }



/* Like my Theme? Please comment.



.reply a.linkmail[href="mailto:sage"] { background-color: [URL=http://www.finalfantasyforums.net/misc.php?do=dbtech_usertag_hash&hash=000000%21important]#000000!important[/URL] }

.replyhl a.linkmail[href="mailto:sage"] { background-color: [URL=http://www.finalfantasyforums.net/misc.php?do=dbtech_usertag_hash&hash=000000%21important]#000000!important[/URL] }



*/



.logo 

  { margin-bottom: 25px !important; 

    text-align: right !important;

    width: auto !important;

    margin: 0 30px 0 0 !important; }



.logo img 

  { float: left !important;

    clear: left !important; }



.logo font { margin: 0 !important; }



.logo font b span, html > body > table > tbody > tr > th > font

  { color: #FFFFFF !important;

    font: 200 100%/1.4 Helvetica, Arial, sans-serif !important; }



.logo font b span 

  { color: #FFFFFF !important;

    font-weight: 700 !important;

    font-size: 150% !important; }



html > body > table > tbody > tr > td,

html > body > table > tbody > tr > th

  { opacity: 0.50 !important;

    -moz-border-radius: 10px !important; }





html > body > table > tbody > tr > td { padding: 0.25em 0 !important; }



html > body > table > tbody > tr > td:hover, 

html > body > table > tbody > tr > td:focus,

html > body > table > tbody > tr > th:hover

  { opacity: 1.00 !important; }



.doubledash { display: none !important; }



.postarea > form > table > tbody > tr { opacity: 0.5 !important; }

.postarea > form > table > tbody > tr:hover { opacity: 1.00 !important; }



.postblock 

  { background-color: #c63b8c !important;

    border-color: #FEFEFE !important;

    color: #FFFFFF !important; 

    padding-top: 0.1850em !important;

    -moz-border-radius: 10px 0 0 10px !important;

    vertical-align: top !important;

    text-align: right !important; }



.inputtext, input[name="upfile"]

  { width: 100% !important;

    -moz-border-radius: 0 10px 10px 0 !important; }



textarea.inputtext

  { height: 200px !important; }



.deletebuttons .inputtext { width: 8px !important; -moz-border-radius: 10px !important; }



.pages { position: relative !important; }

.pages a, .pages b { padding: 0 0.25em !important; }

.pages a:visited { font-style: normal !important; }



.pages b { font-size: 100% !important; margin-top: 0.25em !important;  }



.commentpostername a.linkmail[href="mailto:sage"]:after

  { content: " Doesn't like Bitter things" !important; }



.filetitle 

  { font-size: 115% !important;

    font-weight: 400 !important; 

    display: block !important;

    clear: right !important; 
    
    color: #1D265A !important; }



.reply, .replyhl, .pages

  { border: 3px double !important;

    color: #FFFFFF !important;

    /* border-width: 1px 2px 2px 1px !important;

    border-style: solid !important; */

    -moz-border-radius: 0 40px !important;

    padding: 0 30px 20px 0 !important;

    opacity: 0.90 !important; }



*[class*="poster"], *[class*="linkmail"], *[class*="replytitle"], *[class*="filetitle"], *[class*="omittedposts"], *[class*="oldpost"] 

  { 

    color: #87ceeb !important; 

    border-width: 0px !important; }



.reply, .pages

  { background-color: #080808 !important;

    border-color: #FEFEFE !important; }



.replyhl

  { 

    background-position: left !important;

    background-repeat: no-repeat !important;

    background-attachment: fixed !important;

    background-color: #080808 !important;

    -moz-border-radius-bottomright: 8px !important;

    -moz-border-radius-topright: 8px !important;

    -moz-border-radius-topleft: 8px !important;

    -moz-border-radius-bottomleft: 8px !important;

    border-color: #FFFFFF !important;

    color: #FFFFFF !important; }


.reply {
    

    background-position: left !important;

    background-repeat: no-repeat !important;

    background-attachment: fixed !important;

    background-color: #080808 !important;

    -moz-border-radius-bottomright: 8px !important;

    -moz-border-radius-topright: 8px !important;

    -moz-border-radius-topleft: 8px !important;

    -moz-border-radius-bottomleft: 8px !important;}



.reply .unkfunc, .replyhl .unkfunc 

  { font-style: italic !important; 

    margin-left: 1em !important; }



.replyhl .unkfunc { color: #FFFFFF !important; }



.pages

  { padding: 5px !important; }



.postername, .commentpostername 

  { font-size: 100% !important; 

    color: #739930 !important; 

    text-shadow: 5px 5px 10px #FFFFFF !important; }



.postertrip 

  { color: #1e90ff !important; 

    opacity: 0.5 !important; }


.replyhl .postertrip { color: #FFFFFF !important; }



.replyhl .commentpostername { color: #FFFFFF !important; }



.replyhl a { color: #FFFFFF !important; }


.replyhl {background-color:#9999FF !important;}




hr 

  { border-color: #FFFFFF !important; 

    width: 100% !important;

    clear: both !important; }



/* 4chan extension */



DIV[class="4chan_ext_hiddenthreadinfo"] .reply

  { padding: 0 !important; 

    border: 0 none !important;

    -moz-border-radius: 0 !important;

    background-color: transparent !important; }



.reply .postblock { text-align: center !important; }



SPAN[class="4chan_win_header_buttons"]

  { right: 34px !important; }



SPAN[style="border: thin solid black; padding: 3px; z-index: 100; position: absolute; right: 10px; top: 0px;"][class="reply"],

SPAN[style="border: thin solid black; padding: 3px; position: absolute; right: 10px;"][class="reply"] 

{ padding: 0 !important;

  -moz-border-radius: 0 5px !important; }



#twi_table_div 

  { border: 0 none !important; 

    opacity: 0.90 !important; }



#twi_table_div .postername,

#twi_table_div .postertrip,

#twi_table_div .filetitle

  { font-size: 100% !important; }



#twi_table_div > .postblock 

  { border-color: #FFFFFF !important;

    border-width: 1px 1px 0 1px !important;

    -moz-border-radius: 10px 10px 0 0 !important;

    text-align: center !important; }



#twi_table_div table .postblock 

  { -moz-border-radius: 0 !important;

    background-color: #080808 !important; 

    margin: 0 !important;

    color: #FFFFFF !important;

    text-align: center !important; }



#twi_table_div > #twi_table

  { border-width: 0 1px 1px 1px !important;

    -moz-border-radius: 0 0 10px 10px !important; 

    padding: 0 0 5px 0 !important;

    opacity: 1.00 !important; }



}
 
Thank you very much, Chell! That's for Mercurial theme, right? I'll add it to my template code for the M theme :)

Now I just need to know where I can make the Skin thread and then get started xD
 
Yep, that would be the Mercurial theme. It should still work (more or less) with the other two themes. Hopefully we can get something rolling with it. :grin:
 
You must log in or register to reply here.
Back
Top