CSS 4 MP

Modifying SKYLINE Theme

Mar 11, '07 7:21 AM
by Maria for everyone

Category:

Other

SKYLINE THEME

Original Code just for Reference

body {
background: #222222 url(http://images.multiply.com/multiply/style/skyline/top.jpg) repeat-x scroll left top;
color: #DDDDFF;
margin: 0pt;
width: auto;
font-family: Arial,sans-serif;
}
/* TITLE */
h1#page_owner_title {
background: transparent url(http://images.multiply.com/common/dot_clear.gif) repeat scroll 0%;
border: medium none;
color: #99BBFF;
font-size: 40px;
margin: 22px 0pt 75px 10px;
padding: 2px 0pt 6px 10px;
}
h1 {
font-family: trebuchet MS,verdana,sans-serif;
font-weight: normal;
margin-bottom: 4px;
margin-top: 0px;
}
/* NAVIGATION BAR */
/*background color and border*/
div#subnav {
background: #000000 none repeat scroll 0%;
border-color: #9999FF;
border-style: solid none;
border-width: 1px medium;
height: auto;
padding: 1px 1px 1px 5px;
padding-left: 10px;
}
/* Nav Bar Links */
/* note by default is missing the a:link */
/* See also the General Links */
a.topt, a.topt:visited {
background:transparent none repeat scroll 0%;
color:#FFFFFF;
display:block;
float:left;
font-size:13px;
height:auto;
line-height:1.2em;
margin-left:5px;
margin-right:5px;
padding:2px;
text-align:center;
width:auto;
}
a.toptsel, a.toptsel:visited {
background:transparent none repeat scroll 0%;
color:#FFFFFF;
display:block;
float:left;
font-size:13px;
font-weight:bold;
height:auto;
line-height:1.2em;
margin-left:5px;
margin-right:5px;
padding:2px;
text-align:center;
width:auto;
}
/* BODY */
/* Boxes */
.itembox {
background:#000000 none repeat scroll 0%;
border: 1px solid #9999FF;
margin: 0px;
overflow: visible;
padding: 5px 10px 10px;
width: auto;
}
/* Title Boxes */
.itemboxsub {
color: #99BBFF;
font-size: 18px;
font-weight: bold;
}
.itemboxsub .cattitle {
font-size: 18px;
}
.itemboxsub td {
padding: 3px;
}
/* Post Date */
.itemsubsub {
color: #99BBFF;
font-size: 10px;
font-weight: normal;
line-height: 10px;
text-align: right;
}
/* FOOTER */
div#ownedfooter {
background-color: #000000;
border-color: #9999FF;
border-style: solid none;
border-width: 1px medium;
color: #DDDDFF;
font-size: 10px;
margin: 0pt;
padding: 2px;
text-align: center;
}
/* RIGHT RAIL */
td.rail {
border-left:1px solid #9999FF;
padding:0pt;
padding-bottom:10px;
width:139px;
}
/* Separator between user info and Google ADS */
.railsep {
background:#AABBDD none repeat scroll 0%;
height:1px;
margin:12px 0pt;
}
/* VIEWING HISTORY */
div.stats div.infobox .boxbody {
border:1px solid #D7D9DD;
}
div.stats .infobox {
background-color: #F4F6F8;
}
div.stats {
color: #666666;
}
a.select, a.select:link, a.select:visited {
background: transparent url(http://images.multiply.com/multiply/icons/clean/16x16/select.png) no-repeat scroll left top;
font-size: 13px;
font-weight: bold;
height: 16px;
padding-left: 20px;
padding-top: 1px;
}
/* GENERAL LINKS */
a, a:visited, a:link {
color: #0B5EB4;
}
a:hover {
color: #ff0000;
text-decoration: underline;
}
/* REPLY BOXES */
.replybox {
background: #FFFFFF url(http://images.multiply.com/common/misc/gray-white-fade.gif) repeat-x scroll -25px;
border-color: #DDDDDD;
border-style: solid none none;
border-width: 1px medium medium;
color: #000000;
margin: 0pt 0pt 10px;
padding: 5px;
}
.replyboxread {
background: #FFFFFF url(http://images.multiply.com/common/misc/gray-white-fade.gif) repeat-x scroll -25px;
border-color: #DDDDDD -moz-use-text-color -moz-use-text-color;
border-style: solid none none;
border-width: 1px medium medium;
color: #888888;
margin: 0pt 0pt 10px;
padding: 5px;
}
.quotet {
background: #FFFFFF url(http://images.multiply.com/common/misc/gray-white-fade-horizontal.gif) repeat-y scroll -25px;
}
/* Post Date */
.replyboxstamp {
color: #888888;
float: none;
font-size: 12px;
font-weight: normal;
margin-bottom: 5px;
padding: 0pt;
text-align: left;
}
/* Deleted Reply */
.replydeleted {
color:#999999;
margin:-5px 0pt 5px;
}
/* [view replies:] */
div.vopt span.voptlabel {
color: #DDDDFF;
}
/* links in reply boxes */
/* Links - reply function (edit and delete links) */
div.actionlinks a.mine, div.actionlinks a.mine:link, div.actionlinks a.mine:visited {
color: #B40B0B;
font-size: 13px;
margin: 0pt;
padding: 0pt 10px 0pt 0pt;
}
/* Links - replies visualisation mode */
/* See General Links */

a.vopt, a.vopt:link, a.vopt:visited {
padding: 0pt 5px;
}
a.voptsel:link, a.voptsel:visited, a.voptsel {
background-color: #222222;
border: 1px solid #9999FF;
color: #DDDDFF;
}
/* OTHER PAGES */
/* [Tags:] */
div.relatedlinks {
color:#999999;
font-size:11px;
text-align:left;
}
/* [Prev: - Next:] */
div.relatedlinks {
color:#999999;
font-size:11px;
text-align:left;
}
/* Links */
/*other pages - owner post administration*/
a.mine, a.mine:link, a.mine:visited {
background:transparent none repeat scroll 0%;
border:medium none;
color:#B40B0B;
float:left;
font-size:13px;
margin:2px 4px 0pt 0pt;
padding:1px 3px;
}
/*other pages - visitor post functions*/
div.ritemactions a, div.ritemactions a:link, div.ritemactions a:visited {
background:transparent none repeat scroll 0%;
border:medium none;
color:#0B5EB4;
float:right;
font-size:13px;
margin:0pt 0pt 0pt 4px;
padding:1px 3px;
}

Skyline Theme
Code for make all the backgrounds and borders transparent with Skyline theme
all the Text & Links References

Note:
The best way for to make a customization from a choosen customized theme is:
realize the site totally transparent, simply by using the code below in this table;
subsequently you can put new colors and borders in any box of the layout to make some change different by the transparencies
you can to change
in the background-color properties: transparent with a valid color code, such as #010101
in the background-image properties: none with url(Here_the_URL), where Here_the_URL is a valid URL
in the border-style properties: none with solid
in the border:1px none #010101 border assignements: none with solid

about the text color properties (color: #123456)
I report below all the lines where to change the text color; all text and links colors are changed to white (#ffffff) or gray (#999999, #aaaaaa, #cccccc); the hover links to red (#ff0000)

Remember to use the MAIN Section to insert the bg image, the text color and all the general set for the pages

(for other possible assignements like font-family look the CSS basilar syntax rules)

/*----------------------------------CUSTOMIZED----------*/
div.contentwrapper {
background: transparent;
}
div.bodywrap {
background: transparent;
}
/* MAIN */
body {
background-image: none;
background-repeat: no-repeat;
background-color: #444444;
background-attachment: fixed;
background-position:top right;
font-family: trebuchet MS, Geneva, Arial;
color:#ffffff;
font-size:13px;
}
/* TITLE */
h1#page_owner_title {
background: transparent url(http://images.multiply.com/common/dot_clear.gif) repeat scroll 0%;
color: #FFFFFF;
font-size: 40px;
}
h1 {
font-family: trebuchet MS,verdana,sans-serif;
}
/* NAVIGATION BAR */
/*background color and border*/
div#subnav {
background: transparent none repeat scroll 0% 50%;
border-color: #9999FF ;
border-style: none;
border-width: 1px medium;
}
/* Nav Bar Links */
a.topt, a.topt:visited, a.topt:link {
background: transparent none repeat scroll 0%;
color: #FFFFFF;
font-size: 13px;
}
a.topt:hover {
color: #FF0000;
}
a.toptsel, a.toptsel:visited, a.toptsel:link {
background: transparent none repeat scroll 0%;
color: #FFFFFF;
font-size: 13px;
}
a.toptsel:hover {
color: #aaaaaa;
}
/* BODY */
/* Boxes */
.itembox {
background: transparent none repeat scroll 0%;
border: 1px none #9999FF;
}
/* Title Boxes */
.itemboxsub {
color: #FFFFFF;
}
/* Post Date */
.itemsubsub {
color: #FFFFFF;
}
/* FOOTER */
div#ownedfooter {
background-color: transparent;
border-color: #9999FF;
border-style: none;
border-width: 1px medium;
color: #FFFFFF;
}
/* RIGHT RAIL */
/* blue vertical line */
td.rail {
border-left: 1px none #9999FF;
}
/* Separator between user info and Google ADS */
.railsep {
background:transparent none repeat scroll 0%;
border:1px solid #ffffff;
width:537px;
}
/* VIEWING HISTORY */
/* border */
div.stats div.infobox .boxbody {
border: 1px none #DDDDDD;
}
/* bg-color and bg-image */
div.stats .infobox {
background-color: transparent;
}
/* text color */
div.stats {
color: #999999;
}
/* GENERAL LINKS */
a, a:visited, a:link {
color: #ffffff;
}
a:hover {
color: #ff0000;
text-decoration: none;
}
/* REPLY BOXES */
.replybox {
background-color: transparent;
background-image: none;
border-width: 1px;
border-style: none;
border-color: #aaaaaa;
color: #ffffff;
}
.replyboxread {
background-color: transparent;
background-image: none;
border-width: 1px;
border-style: none;
border-color: #aaaaaa;
color: #cccccc;
}
.quotet {
background-color: transparent;
background-image: none;
border-width: 1px;
border-style: none;
border-color: #aaaaaa;
color: #ffffff;
}
/* post date */
.replyboxstamp {
color: #aaaaaa;
}
/* deleted reply */
.replydeleted {
color: #aaaaaa;
}
/* [view replies:] */
div.vopt span.voptlabel {
color: #aaaaaa;
}
/* Links */
/* user ID */
.replyboxstamp a, .replyboxstamp a:link, .replyboxstamp a:visited {
color: #ffffff;
}
/* Links - reply function (edit reply and delete) */
div.actionlinks a, div.actionlinks a.mine, div.actionlinks a.mine:link, div.actionlinks a.mine:visited {
color: #ffffff;
}
div.actionlinks a:hover, div.actionlinks a.mine:hover {
color: #ff0000;
}
/* Links - replies visualisation mode */
a.vopt, a.vopt:link, a.vopt:visited {
color: #ffffff;
}
a.vopt:hover {
color: #ff0000;
}
a.voptsel, a.voptsel:link, a.voptsel:visited {
background-color: #000000;
border-width: 1px;
border-style: solid;
border-color: #ff0000;
color: #ffffff;
}
/* OTHER PAGES */
/* [Tags:] */
div.relatedlinks {
color:#999999;
}
/* [Prev: - Next:] */
div.relatedlinks {
color:#999999;
}
/* Links */
/*other pages - owner post administration*/
a.mine, a.mine:link, a.mine:visited {
background:transparent none repeat scroll 0%;
border:none;
color:#ffffff;
}
/*other pages - visitor post functions*/
div.ritemactions a, div.ritemactions a:link, div.ritemactions a:visited {
background:transparent none repeat scroll 0%;
border:none;
color:#ffffff;
}

Tags: skyline, css

Prev: Removing Default Icons - ALL THEMES
Next: How to put a Widget in the Rail

reply share

44 Comments

bogwitch wrote on Mar 11, '07

Thanks a lot for this and many others....

puma1504 wrote on Mar 11, '07

bogwitch said

Thanks a lot for this and many others....

Y.E.A.H. !!!

zyannadam wrote on Mar 12, '07

finally.. thanks dear..

nonio wrote on Mar 12, '07

=o)
skyline is one of the more required
anyway the secondary pages of the site are missing for all the themes I've made;
that is all the tables view, the contact page, linear view, calendar .. and some other thing ..
probably for some of those I'll make a post for all the themes (for the table view for example)

wokkingmum wrote on Mar 16, '07

Thanks, Maria! This is what I'm looking for!!!
I think I have to title my codes too so it will be easier for me to change next time!
Thanks again!

mariatv wrote on Mar 16, '07

=o)

dianeuy07 wrote on Apr 2, '07

maria maria! wonderful! ive been working my as* off to create my own theme.. but its been a struggle.. thanks to your posts, i see some light! waaaaaaaaaah... thanks!

nonio wrote on Apr 2, '07

heiressalex wrote on Apr 14, '07

thanks so much, my site turned out great ;)

nonio wrote on Apr 14, '07

heiressalex said

thanks so much, my site turned out great ;)

:-)

melapnt wrote on May 5, '07

thank you so much

zuerain wrote on May 13, '07

tankiu...i managed to chge my template again w/o any problems! ur a genius!!

babycindy4 wrote on May 26, '07

thanks much! this is so much helpful! :)

johnandre wrote on Jun 4, '07

oh.. i'm so thankfull that i found this site... it would really help me a lot.. ahehehe... naswan!!!

karichi wrote on Jun 11, '07

wow helpful indeed! thanks! :D

stuckonubabe10573 wrote on Jun 29, '07

thanks maria,,,,thanks alot.

h12021987 wrote on Jun 30, '07

mksh jua lah

itemkurus wrote on Jul 2, '07

and for color-code we can follow this link http://www.webmonkey.com/reference/color_codes/

mousegraphics wrote on Jul 30, '07

how can i insert a new header?

inkah wrote on Aug 2, '07, edited on Aug 4, '07

Thank you Maria this one really help me create my own skytheme back round. But I have a question if I don't want my guess book and my blog transparent, which code in CSS I have to change. Thank you for your help and your time.

graceediza wrote on Aug 4, '07

Hi maria, just wanna know why is my background image not working? background-image: url(http://graceediza.multiply.com/photos/photo/2/5.jpg); is there something wrong with the sytax???? Thanks ahead.. ur posts are so helpful.

dragonflyshe wrote on Aug 6, '07

Grazie tanto!!!

barelyyummy wrote on Aug 10, '07

geez,,thanks for the tips,,

barelyyummy wrote on Aug 10, '07

can i make my blog page the same as my home page (layout, etc)?

dreamzonforever wrote on Sep 16, '07

hi maria,
I need your guidance...I would like to know whether I am heading the right direction.
1. I hv selected skyline as the theme of my website, as a base reference.
2. I hv made some minor changes to titles to test out e.g. Web main title, subtitles music, video, calendar etc.
3. Then I went to my homepage and selected "view source"
4. From the HTML source, I could see all modifications that I have made. I also saw the folowing information at the top.
type="text/css" href="http://multiply.com/style/site/56.css"
type="text/css" href="http://multiply.com/style/local/22.css"
type="text/css" href="http://multiply.com/style/custom/skyline/19.css"
5. So I went to http://multiply.com/style/custom/skyline/19.css, and the system showed the css codes similiar to that you have posted above starting with "body ..." without those Tags.
6. Should I save these codes in a text file and make any customisation e.g colour, font, background etc as I like from there onwards ?
7. After making the changes, how should I implement it ? Should I
- copy the content the content into window box which appears when I select "Custom CSS" ?
- select preview to see whether the codes work ?
- if ok select "save" so that the system able to retrieve this customisation for use from that time onwards ?

Thanks in advance...

galena1 wrote on Sep 30, '07

Thank you so much! :)

nonio wrote on Sep 30, '07

dreamz
the browser reading the html pages looks at all the css files encountered as links in the page, in the sequential order ,, and when it found in the different css a block with the same property then it will assume the last value encountered
the custom.css is the code made in the custom css box; you see it is the last link
(after u make some modify)
so any code u write it will override the code written in the other css files

the most of the interestin code is in the skyline.css , but there is somethin in the other two css files too

so u are right
copying
the code of skyline.css in custom .css it will change nothing
after you can try to edit the code you have copied in the custom box

but I think is better for u to use the code I posted in the first table here ,,,
it is an union of all the three codes just referencing ONLY the real code working (the last encountered ) for the blocks I have examinated
the only problem is that the code I found not is complete .. only the more important parts

I started examining the code at this manner .. after I discovered there are many tools as add-ons of firefox that allow u to see the code directly in the page .. its more simple

dreamzonforever wrote on Oct 2, '07

Thank you so much, nonio, u r so Wonderful !