Info about making skins??
I was thinking about making a skin for the site but I don't know what images are required to make a complete skin. I was checking out the source for the site page and it seems to me like I need to create a main banner, and a background piece to go along beside it (for resizing the page beyond the banner size), a generic button background and a bottom image for the page. Are there any other pieces that are needed for a skin?? Also what size should the banner and buttons be... I have a couple ideas for some cool skins so if anyone could let me know what images are required I'll do one up.
slash ProDanceCulture
on August 24th, 2005
/ post 277
i'm posting here power user stylesheet orange.css with some explanations.
check td.* elements, as the can have any properties as td.leftbutton or td.mainlogo, such as bg picture also, so any cell can have graphical bg. but if you've checked code you should know much already. so if you wanna try and do something - i could try to make like a virtual skin workshop, meaning you upload a css file to a temp skin visible by you only. and you can edit it and reupload to see how everything fits. upload pics too, that is also important.. a good php task for me, cause i'm running out of ideas to take care of.. also our designer promised to give birth to another couple of skins soon. hopefully...
body {
font-family: "tahoma", "arial", "helvetica", "sans-serif";
font-size: 8pt;
background-color: #FB8F2F;
color: #350059;
margin-top: 0px;
margin-bottom: 0px;
checkbox-back-color : #AD4E01;
scrollbar-arrow-color : #F76F01;
scrollbar-face-color : #AD4E01;
scrollbar-highlight-color : #F77309;
scrollbar-3dlight-color : #EE6B01;
scrollbar-shadow-color : #CE7002;
scrollbar-darkshadow-color : #DD7700;
scrollbar-track-color : #E26703;
}
table { //main kind of table, basically you're looking for any colors
border-collapse: collapse;
border: none;
background-color: #FFB980;
}
table.main{
width: *;
cellspacing: 10;
cellpadding: 0;
}
table.bottom {
background: transparent;
}
h1 {
font-size: 12pt;
}
h2 {
font-size: 10pt;
margin-bottom: 6px;
}
p {
font-size: 8pt;
}
p.sub {
margin-bottom: 4pt;
}
td {
font-size: 8pt;
border: solid #874102 1px;
}
td.embedded {
border: none;
padding: 0px;
text-align: left;
}
td.embeddedpoll {
border: none;
padding: 0px;
text-align: left;
background-color: #FB8F2F;
}
td.toppanel { //info panel, bg pic long and small height,
background-image: url(/pic/def/orange_panel.gif);
padding: 1px;
text-align: left;
width: 100%;
valign: TOP;
}
td.bottom {
border: none;
}
td.heading {
font-weight: bold;
}
td.text {
padding: 10pt;
text-align: left;
}
font.colred {
color: #830449; //color of uploaded, seeding and not_connectable on toppanel.
}
font.colblue {
color: #015110; //color of downloaded, leeching and conn there.
}
td.comment { //torrent comment table
background-color: #FFDCC0;
padding: 10pt;
font-size: 8pt;
text-align: left;
}
td.colhead { //column headline
font-weight: bold;
color: #FFDCC0;
background-color: #9B5401;
}
td.colheadlink { //same but html link as in sortable stats
font-weight: bold;
color: #FFDCC0;
background-color: #9B5401;
}
td.rowhead {
font-weight: bold;
text-align: right;
vertical-align: top;
}
font.colred {
color: #830449;
}
font.colblue {
color: #015110;
}
td.title {
font-size: 18pt;
}
td.navigation {
font-weight: bold;
font-size: 10pt;
border: 1px;
}
td.leftbutton { //left buttons take size of background picture, not smaller than 80x15, i think.
text-align: right;
font-weight: bold;
font-size: 8pt;
border: no;
background-image: url(/pic/def/orange_button.gif);
}
font.button {
color: #000000;
}
td.clear {
padding: 0px;
border: 0px;
background: transparent;
}
td.mainlogo {
padding: 0px;
border: 0px;
width: 810;
height: 98;
align: center;
background-image: url(pic/def/logo.gif); //top logo
}
td.bottomlogo { //bottom logo if you want one
padding: 0px;
border: 0px;
width: 00;
height: 0;
align: center;
}
td.linktext {
padding: 10pt;
text-align: left;
border: solid #44A6B3 1px;
}
form {
margin-top: 0;
margin-bottom: 0;
}
.sublink {
font-style: italic;
font-size: 7pt;
font-weight: normal;
}
font.gray
{
color: #AD4E01;
text-decoration: underline;
}
a:link, a:visited {
text-decoration: none;
color: #273572;
/*font-weight: bold;*/
}
a:hover {
text-decoration: underline;
color: #111111;
}
a.index {
font-weight: bold;
}
a.biglink {
font-weight: bold;
font-size: 12pt;
}
a.altlink:link, a.altlink:visited{
font-weight: bold;
color: #0214C7;
text-decoration: none;
}
a.altlink:hover {
text-decoration: underline;
}
.important {
font-weight: bold;
font-size: 8pt;
}
.red {
color: #ee0000;
}
.yellow {
color: #997700;
}
.green {
color: #000000;
}
input, select, textarea {
font-family: "tahoma", "arial", "helvetica", "sans-serif";
font-size: 8pt;
}
.btn {
width: 75px;
height: 23px;
}
.small {
font-size: 7pt;
}
.big {
font-size: 10pt;
}
li {
margin-top: 6pt;
margin-bottom: 6pt;
}
ul {
margin-left: 16pt;
margin-top: 0px;
margin-bottom: 0px;
}
img.border
{
border-style: solid;
border-color: #000000;
border-width: 1px;
}
textarea {
font-family: "verdana", "arial", "helvetica", "sans-serif";
font-size: 8pt;
background-color: #FFDCC0;
color: #CA0CF9;
border: 1px solid #000000;
border-collapse: collapse;
}
select {
background-color:#000000;
color: #F76F01;
border: 1px solid #000000;
border-collapse: collapse;
}
input.checkbox {
background-color:#000000;
color: #F76F01;
border: 1px solid #000000;
border-collapse: collapse;
}
input { background-color: #F76F01;
font-size: 12px;
color: black;
border: 1px solid #000000;
border-collapse: collapse;
}
so...
check td.* elements, as the can have any properties as td.leftbutton or td.mainlogo, such as bg picture also, so any cell can have graphical bg. but if you've checked code you should know much already. so if you wanna try and do something - i could try to make like a virtual skin workshop, meaning you upload a css file to a temp skin visible by you only. and you can edit it and reupload to see how everything fits. upload pics too, that is also important.. a good php task for me, cause i'm running out of ideas to take care of.. also our designer promised to give birth to another couple of skins soon. hopefully...
body {
font-family: "tahoma", "arial", "helvetica", "sans-serif";
font-size: 8pt;
background-color: #FB8F2F;
color: #350059;
margin-top: 0px;
margin-bottom: 0px;
checkbox-back-color : #AD4E01;
scrollbar-arrow-color : #F76F01;
scrollbar-face-color : #AD4E01;
scrollbar-highlight-color : #F77309;
scrollbar-3dlight-color : #EE6B01;
scrollbar-shadow-color : #CE7002;
scrollbar-darkshadow-color : #DD7700;
scrollbar-track-color : #E26703;
}
table { //main kind of table, basically you're looking for any colors
border-collapse: collapse;
border: none;
background-color: #FFB980;
}
table.main{
width: *;
cellspacing: 10;
cellpadding: 0;
}
table.bottom {
background: transparent;
}
h1 {
font-size: 12pt;
}
h2 {
font-size: 10pt;
margin-bottom: 6px;
}
p {
font-size: 8pt;
}
p.sub {
margin-bottom: 4pt;
}
td {
font-size: 8pt;
border: solid #874102 1px;
}
td.embedded {
border: none;
padding: 0px;
text-align: left;
}
td.embeddedpoll {
border: none;
padding: 0px;
text-align: left;
background-color: #FB8F2F;
}
td.toppanel { //info panel, bg pic long and small height,
background-image: url(/pic/def/orange_panel.gif);
padding: 1px;
text-align: left;
width: 100%;
valign: TOP;
}
td.bottom {
border: none;
}
td.heading {
font-weight: bold;
}
td.text {
padding: 10pt;
text-align: left;
}
font.colred {
color: #830449; //color of uploaded, seeding and not_connectable on toppanel.
}
font.colblue {
color: #015110; //color of downloaded, leeching and conn there.
}
td.comment { //torrent comment table
background-color: #FFDCC0;
padding: 10pt;
font-size: 8pt;
text-align: left;
}
td.colhead { //column headline
font-weight: bold;
color: #FFDCC0;
background-color: #9B5401;
}
td.colheadlink { //same but html link as in sortable stats
font-weight: bold;
color: #FFDCC0;
background-color: #9B5401;
}
td.rowhead {
font-weight: bold;
text-align: right;
vertical-align: top;
}
font.colred {
color: #830449;
}
font.colblue {
color: #015110;
}
td.title {
font-size: 18pt;
}
td.navigation {
font-weight: bold;
font-size: 10pt;
border: 1px;
}
td.leftbutton { //left buttons take size of background picture, not smaller than 80x15, i think.
text-align: right;
font-weight: bold;
font-size: 8pt;
border: no;
background-image: url(/pic/def/orange_button.gif);
}
font.button {
color: #000000;
}
td.clear {
padding: 0px;
border: 0px;
background: transparent;
}
td.mainlogo {
padding: 0px;
border: 0px;
width: 810;
height: 98;
align: center;
background-image: url(pic/def/logo.gif); //top logo
}
td.bottomlogo { //bottom logo if you want one
padding: 0px;
border: 0px;
width: 00;
height: 0;
align: center;
}
td.linktext {
padding: 10pt;
text-align: left;
border: solid #44A6B3 1px;
}
form {
margin-top: 0;
margin-bottom: 0;
}
.sublink {
font-style: italic;
font-size: 7pt;
font-weight: normal;
}
font.gray
{
color: #AD4E01;
text-decoration: underline;
}
a:link, a:visited {
text-decoration: none;
color: #273572;
/*font-weight: bold;*/
}
a:hover {
text-decoration: underline;
color: #111111;
}
a.index {
font-weight: bold;
}
a.biglink {
font-weight: bold;
font-size: 12pt;
}
a.altlink:link, a.altlink:visited{
font-weight: bold;
color: #0214C7;
text-decoration: none;
}
a.altlink:hover {
text-decoration: underline;
}
.important {
font-weight: bold;
font-size: 8pt;
}
.red {
color: #ee0000;
}
.yellow {
color: #997700;
}
.green {
color: #000000;
}
input, select, textarea {
font-family: "tahoma", "arial", "helvetica", "sans-serif";
font-size: 8pt;
}
.btn {
width: 75px;
height: 23px;
}
.small {
font-size: 7pt;
}
.big {
font-size: 10pt;
}
li {
margin-top: 6pt;
margin-bottom: 6pt;
}
ul {
margin-left: 16pt;
margin-top: 0px;
margin-bottom: 0px;
}
img.border
{
border-style: solid;
border-color: #000000;
border-width: 1px;
}
textarea {
font-family: "verdana", "arial", "helvetica", "sans-serif";
font-size: 8pt;
background-color: #FFDCC0;
color: #CA0CF9;
border: 1px solid #000000;
border-collapse: collapse;
}
select {
background-color:#000000;
color: #F76F01;
border: 1px solid #000000;
border-collapse: collapse;
}
input.checkbox {
background-color:#000000;
color: #F76F01;
border: 1px solid #000000;
border-collapse: collapse;
}
input { background-color: #F76F01;
font-size: 12px;
color: black;
border: 1px solid #000000;
border-collapse: collapse;
}
so...
I don't really have much web design experience but I do have programming and some skinning experience though. So I checked out your stylesheet you posted and I understand how it is put together but I don't know how to up a temp skin only visible by me to view the layout. If you could help me out with this part I think I could easily make a pretty nice skin out of the images I made so far.
thanks
thanks
slash ProDanceCulture
on August 27th, 2005
/ post 283
just give me a few days. the school starts 29th, and i have a fulltime job, and also some spyware is locking my access to the website (had to use proxy), so in a couple of days i'll do that. and it is easily done, completely same way as you implement torrent upload to the website - same a skin upload, and it will only be yours, so each user will be able to have 1 skin to work at. all right, gtg. !
That would be great, whenever you get a chance. Thanks
you cannot post in this forum.
click here to to create a user account to participate in our forum.
click here to to create a user account to participate in our forum.
Top 20 Torrents (last 10 days)» Marsh B2B Sasha - Anjunadeep Open Air MIami [HQ] - 23-Apr-2024 » Dubfire - EG.991 (Live @ La Feria Santiago, Chile) - 10-Jun-2024 » John Digweed - Transitions 1032 (Guest Josh Wink) - 07-Jun-2024 » Richie Hawtin - Live @ Womb (Tokyo, Japan) - HQ Audio - 20-Apr-2024 » Anthony Pappa - Live From Secret Sounds Of The Underground, Hobart, Tasmania - 09-Jun-2024 » John Digweed - Live @ Alta Gracia Cordoba (Opus Audio) - 20-Jan-2024 » The Martinez Brothers - BBC Radio 1 Essential Mix - 08-Jun-2024 » Marsh B2B Sasha - Live @ Anjunadeep Open Air Miami - 23-Mar-2024 » John Digweed - Transitions 1033 (Live @ XOYO London) - 14-Jun-2024 » CJ Art - Closing after Eelke Kleijn (Smolna, Warsaw, Poland) - 17-May-2024 » Fernando Ferreyra - Oasis Sessions 003 [HQ] - June 2024 » Fernando Ferreyra - Dreamers - June 2024 » Mariano Mellino - Live At Mute with Stephan Bodzin & Mathame - Audioholics 70 [HQ] - June 2024 » ELIXIR - Live @ Kater Blau - NYE The Big Brain BBQ [HQ] - 2022 » ELIXIR - Live @ Kater Blue - Truly Blue - Heinz Hopper [HQ] - October 2023 » Bremski - Selador Sessions 265 [HQ] - June 2024 » Frankey & Sandrino - Supersonicos (Ibiza Sonica Radio) - 24-May-2024 » John `00` Fleming (Guest Drunken Kong) - JOOF Radio 055 - June 2024 » Marsh B2B Sasha DJ Set - Anjunadeep Open Air MIami [Full HD Set] 2160p - 23-Apr-2024 » LEX (RU) - Dark Progressive Deep House Dreams - 08-Jun-2024
Recent from the Forum (Be Social)» hey, lottery winners!!! post your testimonials!!! 17h 45m » Joris Voorn - A Trip to Galaxy - Up Close by Awakenings | 19.05.2024 » 909 Festival 2024 » ERIC PRYDZ LIVE @ ULTRA MIAMI 2024 MEGASTRUCTURE » Boris Brejcha Live Fan Channel » May 17th - 19th EDC Las Vegas » Torrents Recommended for REMOVAL by Staff » Happy Birthday!!! Tribalmixes is 10 years old!!! » 30 Subgenres of Techno (with examples) » Here are 3 choices for reliable site in the field of online video converters