Much like the WaDF theme group, this is a place to talk / chat about all things Custom Themes, and tips / tricks on how to make 'em. If it gets to such a stage, maybe this will be a place to post your finished themes as well
A quick introduction to those who have no idea what i'm blurting about:In the WaDF theme user's group, a discussion started about custom themes. So as not to go off-topic, I've set this board up.
But what IS a custom theme?Also known as a userstyle, a custom theme is a css / javascript code which is added to the website you are viewing when you navigate to it. It only affects what you see, not everybody else. Please note: i might have made a mistake here, if so, point it out please
...soooo... how do i make one?Well first you are going to need Firefox. NOTE: PLEASE NO BROWSERWARZ!. you are also going to need the Firefox addon
Stylish. It's kinda hard to explain how to make the script themselves (i'm only just starting myself, but it is basically a css stylesheet which overwrites the site's own (i think). The best way to have a squiz at the site's existing stylesheet is
Firebug. open this up, navigate to the CSS tab, and start fiddling. it's a good way of seeing what each thing does.
Well, ive had a look myself, and all you have to do is put in the things you want changed, followed by !important . again, it's hard to explain, so i've made an example
the following code will make codeblocks on NSF have no maximum height (good for reading the one below
)
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("nifflas.lpchip.nl") {
.code {
max-height:none!important;
}
}For those who don't want to install firebug, here is the CSS stylesheet for the main page (and i think the rest of the site as well):
....loading....
.color_red {
color:#FF0000;
}
.color_orange {
color:#FF8800;
}
.color_yellow {
color:#FFFF00;
}
.color_green {
color:#00FF00;
}
.color_blue {
color:#0088FF;
}
.color_purple {
color:#FF00FF;
}
div.deletedpostouter {
background-color:#111155;
font-weight:bold;
padding:3px;
}
div.deletedpostinner {
border-left:20px solid #111155;
color:#777777;
font-size:7pt;
padding:3pt;
}
.spoilerbody {
border:1px solid #9F457A;
padding:2px;
}
.bbcode_mod_div {
background-color:#880000;
border:1px solid #FFAA00;
}
.bbcode_mod_b {
color:#FF8800;
}
.bbcode_edit_div {
background-color:#315BA1;
}
.bbcode_edit_dif {
border:1px solid #315BA1;
}
#wrap {
background-color:#224488;
border:1px solid #000000;
margin:0 auto;
padding:3px 30px 30px;
text-align:left;
width:93%;
}
.catend {
background-image:url("end.gif");
height:14px;
}
a img {
border:0 none;
}
a:link, a:visited {
color:#FFFFFF;
text-decoration:none;
}
a:hover {
color:#FFFFFF;
text-decoration:underline;
}
.nav, .nav:link, .nav:visited {
color:#FFFFFF;
font-size:13px;
font-weight:bold;
}
a.nav:hover {
color:#FFFFFF;
}
table {
empty-cells:show;
}
body, td, th, tr {
color:#AACCFF;
font-family:verdana,sans-serif;
font-size:small;
}
body {
background:url("images/fade.jpg") repeat-x scroll 0 0 #333333;
margin:0;
padding:0;
}
input, textarea, button {
background:none repeat scroll 0 0 #333333;
border:1px solid #000000;
color:white;
font-family:verdana,helvetica,sans-serif;
font-size:10px;
}
input, button {
font-size:90%;
}
textarea {
color:#FFFFFF;
font-family:verdana,sans-serif;
font-size:100%;
}
input.check {
}
select {
background:none repeat scroll 0 0 #113360;
border:1px solid #000000;
color:white;
font-family:verdana,helvetica,sans-serif;
font-size:10px;
margin:5px;
padding:2px;
}
hr, .hrcolor {
background-color:#666666;
border:0 none;
color:#666666;
height:1px;
}
.quote {
background-color:#505050;
border-color:#808080 #808080 #808080 #A0A0A0;
border-style:solid;
border-width:1px 1px 1px 5px;
color:#D0D0FF;
font-size:x-small;
margin:0;
overflow:auto;
padding:5px;
}
.code {
background-color:#303038;
border-color:#808080 #808080 #808080 #A0A0A0;
border-style:solid;
border-width:1px 1px 1px 5px;
color:#F0F0F0;
font-family:"courier",helvetica,"times new roman",serif;
font-size:88%;
margin:0;
max-height:300px;
overflow:auto;
padding:5px;
white-space:nowrap;
}
.code pre {
overflow:auto;
white-space:normal;
}
.quoteheader, .codeheader {
color:#E0E0E0;
font-size:x-small;
font-style:normal;
font-weight:bold;
text-decoration:none;
}
.help {
cursor:help;
}
.meaction {
color:#FF0000;
}
.editor {
width:96%;
}
.highlight {
background-color:#FFF000;
color:#000000;
font-weight:bold;
}
.windowbg {
background-color:#113366;
color:#F3ECDD;
font-family:"Trebuchet MS",verdana,sans-serif;
}
.windowbg2 {
background-color:#143669;
border-bottom:1px solid #15376A;
border-top:1px solid #0E3164;
color:#C4C8CC;
font-family:"Trebuchet MS",verdana,sans-serif;
padding-left:5px;
}
.windowbg3 {
background-color:#113360;
color:white;
}
.windowbg4 {
background-color:#1F396E;
color:#F3ECDD;
font-family:"Trebuchet MS",verdana,sans-serif;
}
.windowbg5 {
background-color:#273C6F;
border-bottom:1px solid #15376A;
border-top:1px solid #0E3164;
color:#C4C8CC;
font-family:"Trebuchet MS",verdana,sans-serif;
padding-left:5px;
}
.calendar_today {
background-color:#333333;
color:#FFFFFF;
font-weight:bold;
}
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td {
background-color:#9F457A;
color:#FFFFFF;
font-style:normal;
font-weight:bold;
padding:5px 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited {
color:#FFFFFF;
font-style:normal;
font-weight:bold;
margin:5px;
}
.titlebg a:hover {
color:#FFFFFF;
text-decoration:underline;
}
.titlebg2 a:link, .titlebg2 a:visited {
color:#FFFFFF;
font-style:normal;
text-decoration:underline;
}
.titlebg2 a:hover {
text-decoration:underline;
}
.catbg, tr.catbg td, .catbg3, tr.catbg3 td {
background-color:transparent;
background-image:url("images/catbg.jpg");
background-repeat:no-repeat;
color:#FFFFFF;
font-weight:bold;
padding-left:10px;
padding-right:10px;
}
.catbg2, tr.catbg2 td {
background-color:#9F457A;
background-image:url("images/catbg.jpg");
background-repeat:no-repeat;
color:#FFFFFF;
padding-left:10px;
padding-right:10px;
}
.catbg, .catbg2, .catbg3 {
background-color:#224488;
background-repeat:no-repeat;
border-bottom:1px solid #9F457A;
border-top:15px solid #224488;
margin:5px;
}
.catbg, .catbg2 {
font-weight:bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited {
color:#FFFFFF;
font-size:95%;
text-decoration:none;
}
.catbg a:link, .catbg a:visited, .catbg2 a:link, .catbg2 a:visited {
color:#FFFFFF;
text-decoration:none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover {
color:#E0E0FF;
}
.bordercolor {
background-color:#696464;
padding:0;
}
.tborder {
border:1px solid #696464;
padding:1px;
}
.smalltext {
font-family:verdana,sans-serif;
font-size:x-small;
}
.middletext {
font-size:90%;
}
.normaltext {
font-size:small;
}
.largetext {
font-size:large;
}
.post, .personalmessage {
line-height:1.3em;
overflow:auto;
width:100%;
}
.signature {
line-height:1.3em;
max-height:200px;
overflow:auto;
padding-bottom:3px;
width:100%;
}
.error {
color:#FF0000;
}
.maintab_active_back, .maintab_back {
background-color:#113366;
border-bottom:1px solid #696464;
border-right:1px solid #696464;
padding-bottom:2px;
padding-left:5px;
padding-right:5px;
}
.maintab_active_back {
font-weight:bold;
}
.maintab_active_first, .maintab_active_last {
display:none;
}
.maintab_first {
border-right:1px solid #696464;
}
#tabs6 {
height:44px;
left:-40px;
line-height:normal;
margin:auto;
position:relative;
top:-8px;
}
#tabs6 ul {
list-style:none outside none;
margin:0;
padding:10px 10px 0 50px;
}
#tabs6 li {
display:inline;
margin:0;
padding:0;
}
#tabs6 a {
background:url("images/tableft6.gif") no-repeat scroll left top transparent;
float:left;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs6 a span {
background:url("images/tabright6.gif") no-repeat scroll right top transparent;
color:#FFFFFF;
display:block;
float:left;
line-height:23px;
padding:5px 15px 4px 6px;
}
#tabs6 img {
padding:0 4px 0 0;
vertical-align:middle;
}
#tabs6 a span {
float:none;
}
#tabs6 a:hover span {
color:#FFFFFF;
}
#tabs6 a:hover {
background-position:0 -42px;
}
#tabs6 a:hover span {
background-position:100% -42px;
}
#ajax_in_progress {
background:none repeat scroll 0 0 #333333;
color:#FFFFFF;
font-size:18pt;
font-weight:bold;
left:0;
padding:3px;
position:fixed;
text-align:center;
top:0;
width:100%;
}
to edit img tags:
img[title="exact title"] {
height: 0 !important;
width: 0 !important;
/* these numbers match the new image's dimensions */
padding-left: 125px !important;
padding-top: 25px !important;
background: url(http://example.com/your/image/here) no-repeat !important;
}
You can replace the [title=""] with any other attribute the element has. obviously if another element has the same attribute, it will change as well
Edit: New info added :D
NOTE:
If you are embedding images into your style, do this instead:
go to the image, and download it to your desktop
in the Stylish editor, go insert>Data URI
find the image and click OK
This will insert the data of the image, making the loading of a page faster, as it does not have to download the image.
Show Posts
.