AIM~ deejaysence
xanga s/n~deejaysence
Full Version: Css design
Ok now I have all my coding I want and have my Xanga how I want it to look. How the heck do I make a skin and put all the indevidualized codes n scripts into a css? CAN SOME1 HELP?
AIM~ deejaysence
xanga s/n~deejaysence
AIM~ deejaysence
xanga s/n~deejaysence
let me get this straight... you want to make a .css file? you'll need something like frontpage or dreamweaver. then code the css.
Maybe I am the one confizzled... hmm Maybe it is not css what I want I dunno all of the terms used. I guess what I mean is put it all into a skin foormat thing. so it is all 1 nice and neat code. Instead of all the choppy codes I have. Does that make any sense? 
this is wat i did for my first skin::
go take a look at someone's skin that they have created using a css style sheet. then, experiment around with it, putting in ur own stuff into it.
go take a look at someone's skin that they have created using a css style sheet. then, experiment around with it, putting in ur own stuff into it.
what exactly is the problem 
QUOTE(deejaysence @ 01-30-2004, 09:21 AM)
Maybe I am the one confizzled... hmm Maybe it is not css what I want I dunno all of the terms used. I guess what I mean is put it all into a skin foormat thing. so it is all 1 nice and neat code. Instead of all the choppy codes I have. Does that make any sense?
oh so, u want to combine all your css under one code? so its one long big code?
ha, i had the same problem, i didnt know how to format all my code into something to submit. thats probably why it hasnt made it to the skin page
The Css scripting skins are done w/o manipulating Xanga's own Look/feel modifiers. Because you add your CSS into the custom headres box which comes AFTER xanga generates its own css for all the tables and junk. So you are essentially overriding xanga's css w/ your own when you insert junk into the header.
If you want to submit your "skin" you're just suppose to c/p wahtever you have in the Custom Header box and teh Webstats box. If you have nothing there or no design modifiers then its probably not a good idea to submit it. And usually the best looks skins HAVE to use CSS because the look/feel section for xanga is very limited in its editing capabilities.
hope that helps
If you want to submit your "skin" you're just suppose to c/p wahtever you have in the Custom Header box and teh Webstats box. If you have nothing there or no design modifiers then its probably not a good idea to submit it. And usually the best looks skins HAVE to use CSS because the look/feel section for xanga is very limited in its editing capabilities.
hope that helps
later when itg ets fixed, u can go to www.blogring and go to themes than css format it tells u what u can do with it. 
here's one example of a CSS skin I made:
this came from the basic CSS format blogring gave with a few additions. there are more tags you can add when you become familiar with CSS.
*note you can only string together CSS styles. scripts and other html formats must be separate.
CSS can get pretty long so I suggest linking it. use Dreamweaver or Frontpage [I prefer to use Notepad since it's simple and fast] and save it as a txt file. Upload it to a site and rename it into filename.CSS and use this to link it:
most free sites allow you to save CSS. I use geocities to upload my CSS. Hope this helps
CODE
<!-- begin code provided by createblog.com -->
body {
background-color: #ffffff;
background-image: URL(none);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: middle left;
scrollbar-Arrow-Color: beige;
scrollbar-Track-Color: #FFFFFF;
scrollbar-Shadow-Color: #FFFFFF;
scrollbar-Face-Color: #beige;
scrollbar-Highlight-Color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-3dLight-Color: #FFFFFF;
}
table.navigation, table.footer {
/* hides xanga's top navi and the footer*/
/* remove this tag if you want them to be seen */
display: none;}
.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p, .content {
/* edits main text */
font:normal 12px palatino;
line-height: 12px;
color: #424242;;
text-align:justify;
}
b {
/* edits bold text */
font:normal 12px palatino;
line-height: 12px;
color: #000000;;
text-align:justify;
font-weight: bold;
}
table.blogbody tr td {
/* entry margins */
width:0px;
padding-left: 0px;
padding-bottom: 3px;
padding-top: 5px;
}
table.footer TD {
/* edits the footer */
text-align: center;
}
div.blogheader, .caption {
/* edit the dates */
background-image: URL(http://img19.photobucket.com/albums/v58/DoodleFlip/bellandy/datehead.jpg);
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;
font-family:arial;
text-transform:uppercase;
font-size:14px;
line-height:14px;
border: 2px solid #336699;
border-width: 1px 1px 1px 1px;
color:#336699;
background-color: #none;
text-align: left;
padding-top: 10px;
width:405px;
}
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edit the links */
font:normal 11px palatino;
line-height:11px;
color: #555555;
text-decoration: strong;
background-color: #none;
}
a:visited, a.footernav:visited, {
/* edit visited links */
font:normal 11px palatino;
line-height:11px;
color: #555555;
text-decoration: strong;
background-color: #none;
}
a:hover {
font:normal 11px arial;
line-height:11px;
color:#444444;
background-color:#none;
text-decoration: line-through;
cursor: crosshair;
}
input, select, textarea, .textfield, .button {
/* this edits buttons, drop down menus etc. */
border: 1px solid #000000;
font:normal 11px arial #ffffff;
background-color: #ffffff;
letter-spacing:0px;
}
table.blogbody {
/* edits your blog or entry space */
width:405px;
border: 1px solid #ffffff;
border-width: 0px 0px 0px 0px;
}
table.left {
/* this edits the menu modules as a whole */
border: 0px solid #000000;
width:135px;
background-color: none;
}
table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-image: URL(http://img19.photobucket.com/albums/v58/DoodleFlip/bellandy/datehead.jpg);
background-attachment: fixed;
background-position: top left;
background-repeat: no-repeat;
background-color: #none;
width:135px;
font: bold 16px palatino;
line-height: 16px;
text-transform: capitalize;
color: #336699;
border: 1px solid #000000;
border-width: 1px 1px 1px 1px;
text-align: center;
}
table.left TD {
/* on your menu module, this edits the body part of it */
background-color: none;
color: #424242;
border: 1px solid #DFD8DF;
font:normal 11px palatino;
line-height: 12px;
border-width: 0px 0px 0px 0px
width:135px;
}
blockquote {
/* format text when using blockquotes */
background-color: #222222;
border: 1px #ffffff solid;
padding: 10px;
margin: 20px;
text-align: justify;
font-size: 8pt;
letter-spacing: 1px;
font-family: verdana;
}
#pnlEnabled table, #htmleditor, #lblTimeZone{
/* make this the same width as the blogbody */
/* unless you know what to do */
width: 400px;
}
.#rblEprops{display: none;}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
/* width of the comment page I suggest miking it the same width as the blogbody*/
{width: 400px;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 540px;
}
hr {
/* edit the horizontal divider*/
color: #666666;
)
<!-- end code provided by createblog.com -->
body {
background-color: #ffffff;
background-image: URL(none);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: middle left;
scrollbar-Arrow-Color: beige;
scrollbar-Track-Color: #FFFFFF;
scrollbar-Shadow-Color: #FFFFFF;
scrollbar-Face-Color: #beige;
scrollbar-Highlight-Color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-3dLight-Color: #FFFFFF;
}
table.navigation, table.footer {
/* hides xanga's top navi and the footer*/
/* remove this tag if you want them to be seen */
display: none;}
.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p, .content {
/* edits main text */
font:normal 12px palatino;
line-height: 12px;
color: #424242;;
text-align:justify;
}
b {
/* edits bold text */
font:normal 12px palatino;
line-height: 12px;
color: #000000;;
text-align:justify;
font-weight: bold;
}
table.blogbody tr td {
/* entry margins */
width:0px;
padding-left: 0px;
padding-bottom: 3px;
padding-top: 5px;
}
table.footer TD {
/* edits the footer */
text-align: center;
}
div.blogheader, .caption {
/* edit the dates */
background-image: URL(http://img19.photobucket.com/albums/v58/DoodleFlip/bellandy/datehead.jpg);
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;
font-family:arial;
text-transform:uppercase;
font-size:14px;
line-height:14px;
border: 2px solid #336699;
border-width: 1px 1px 1px 1px;
color:#336699;
background-color: #none;
text-align: left;
padding-top: 10px;
width:405px;
}
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edit the links */
font:normal 11px palatino;
line-height:11px;
color: #555555;
text-decoration: strong;
background-color: #none;
}
a:visited, a.footernav:visited, {
/* edit visited links */
font:normal 11px palatino;
line-height:11px;
color: #555555;
text-decoration: strong;
background-color: #none;
}
a:hover {
font:normal 11px arial;
line-height:11px;
color:#444444;
background-color:#none;
text-decoration: line-through;
cursor: crosshair;
}
input, select, textarea, .textfield, .button {
/* this edits buttons, drop down menus etc. */
border: 1px solid #000000;
font:normal 11px arial #ffffff;
background-color: #ffffff;
letter-spacing:0px;
}
table.blogbody {
/* edits your blog or entry space */
width:405px;
border: 1px solid #ffffff;
border-width: 0px 0px 0px 0px;
}
table.left {
/* this edits the menu modules as a whole */
border: 0px solid #000000;
width:135px;
background-color: none;
}
table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-image: URL(http://img19.photobucket.com/albums/v58/DoodleFlip/bellandy/datehead.jpg);
background-attachment: fixed;
background-position: top left;
background-repeat: no-repeat;
background-color: #none;
width:135px;
font: bold 16px palatino;
line-height: 16px;
text-transform: capitalize;
color: #336699;
border: 1px solid #000000;
border-width: 1px 1px 1px 1px;
text-align: center;
}
table.left TD {
/* on your menu module, this edits the body part of it */
background-color: none;
color: #424242;
border: 1px solid #DFD8DF;
font:normal 11px palatino;
line-height: 12px;
border-width: 0px 0px 0px 0px
width:135px;
}
blockquote {
/* format text when using blockquotes */
background-color: #222222;
border: 1px #ffffff solid;
padding: 10px;
margin: 20px;
text-align: justify;
font-size: 8pt;
letter-spacing: 1px;
font-family: verdana;
}
#pnlEnabled table, #htmleditor, #lblTimeZone{
/* make this the same width as the blogbody */
/* unless you know what to do */
width: 400px;
}
.#rblEprops{display: none;}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
/* width of the comment page I suggest miking it the same width as the blogbody*/
{width: 400px;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 540px;
}
hr {
/* edit the horizontal divider*/
color: #666666;
)
<!-- end code provided by createblog.com -->
this came from the basic CSS format blogring gave with a few additions. there are more tags you can add when you become familiar with CSS.
*note you can only string together CSS styles. scripts and other html formats must be separate.
CSS can get pretty long so I suggest linking it. use Dreamweaver or Frontpage [I prefer to use Notepad since it's simple and fast] and save it as a txt file. Upload it to a site and rename it into filename.CSS and use this to link it:
CODE
<!-- begin code provided by createblog.com -->
<link rel="stylesheet" type="text/CSS" href="http://www.sitename/filename.CSS">
<!-- end code provided by createblog.com -->
<link rel="stylesheet" type="text/CSS" href="http://www.sitename/filename.CSS">
<!-- end code provided by createblog.com -->
most free sites allow you to save CSS. I use geocities to upload my CSS. Hope this helps
i didn't do my xanga w/ much css.. but i made a couple of sites w/ them.... quick help= http://www.lissaexplains.com/css3.shtml after that there are ways to change it and such but there are the basics.
lol, I used to steal peoples css codes, but then I found out how to make em'
yeah.... ppl don't like it when u steal their codes... i figured that out the hard way 
QUOTE(Smallbubba89 @ Feb 6 2004, 9:20 PM)
CODE
<!-- begin code provided by createblog.com -->
body {
background-color: #ffffff;
background-image: URL(none);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: middle left;
scrollbar-Arrow-Color: beige;
scrollbar-Track-Color: #FFFFFF;
scrollbar-Shadow-Color: #FFFFFF;
scrollbar-Face-Color: #beige;
scrollbar-Highlight-Color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-3dLight-Color: #FFFFFF;
}
table.navigation, table.footer {
/* hides xanga's top navi and the footer*/
/* remove this tag if you want them to be seen */
display: none;}
.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p, .content {
/* edits main text */
font:normal 12px palatino;
line-height: 12px;
color: #424242;;
text-align:justify;
}
b {
/* edits bold text */
font:normal 12px palatino;
line-height: 12px;
color: #000000;;
text-align:justify;
font-weight: bold;
}
table.blogbody tr td {
/* entry margins */
width:0px;
padding-left: 0px;
padding-bottom: 3px;
padding-top: 5px;
}
table.footer TD {
/* edits the footer */
text-align: center;
}
div.blogheader, .caption {
/* edit the dates */
background-image: URL(http://img19.photobucket.com/albums/v58/DoodleFlip/bellandy/datehead.jpg);
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;
font-family:arial;
text-transform:uppercase;
font-size:14px;
line-height:14px;
border: 2px solid #336699;
border-width: 1px 1px 1px 1px;
color:#336699;
background-color: #none;
text-align: left;
padding-top: 10px;
width:405px;
}
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edit the links */
font:normal 11px palatino;
line-height:11px;
color: #555555;
text-decoration: strong;
background-color: #none;
}
a:visited, a.footernav:visited, {
/* edit visited links */
font:normal 11px palatino;
line-height:11px;
color: #555555;
text-decoration: strong;
background-color: #none;
}
a:hover {
font:normal 11px arial;
line-height:11px;
color:#444444;
background-color:#none;
text-decoration: line-through;
cursor: crosshair;
}
input, select, textarea, .textfield, .button {
/* this edits buttons, drop down menus etc. */
border: 1px solid #000000;
font:normal 11px arial #ffffff;
background-color: #ffffff;
letter-spacing:0px;
}
table.blogbody {
/* edits your blog or entry space */
width:405px;
border: 1px solid #ffffff;
border-width: 0px 0px 0px 0px;
}
table.left {
/* this edits the menu modules as a whole */
border: 0px solid #000000;
width:135px;
background-color: none;
}
table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-image: URL(http://img19.photobucket.com/albums/v58/DoodleFlip/bellandy/datehead.jpg);
background-attachment: fixed;
background-position: top left;
background-repeat: no-repeat;
background-color: #none;
width:135px;
font: bold 16px palatino;
line-height: 16px;
text-transform: capitalize;
color: #336699;
border: 1px solid #000000;
border-width: 1px 1px 1px 1px;
text-align: center;
}
table.left TD {
/* on your menu module, this edits the body part of it */
background-color: none;
color: #424242;
border: 1px solid #DFD8DF;
font:normal 11px palatino;
line-height: 12px;
border-width: 0px 0px 0px 0px
width:135px;
}
blockquote {
/* format text when using blockquotes */
background-color: #222222;
border: 1px #ffffff solid;
padding: 10px;
margin: 20px;
text-align: justify;
font-size: 8pt;
letter-spacing: 1px;
font-family: verdana;
}
#pnlEnabled table, #htmleditor, #lblTimeZone{
/* make this the same width as the blogbody */
/* unless you know what to do */
width: 400px;
}
.#rblEprops{display: none;}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
/* width of the comment page I suggest miking it the same width as the blogbody*/
{width: 400px;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 540px;
}
hr {
/* edit the horizontal divider*/
color: #666666;
)
<!-- end code provided by createblog.com -->
body {
background-color: #ffffff;
background-image: URL(none);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: middle left;
scrollbar-Arrow-Color: beige;
scrollbar-Track-Color: #FFFFFF;
scrollbar-Shadow-Color: #FFFFFF;
scrollbar-Face-Color: #beige;
scrollbar-Highlight-Color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-3dLight-Color: #FFFFFF;
}
table.navigation, table.footer {
/* hides xanga's top navi and the footer*/
/* remove this tag if you want them to be seen */
display: none;}
.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p, .content {
/* edits main text */
font:normal 12px palatino;
line-height: 12px;
color: #424242;;
text-align:justify;
}
b {
/* edits bold text */
font:normal 12px palatino;
line-height: 12px;
color: #000000;;
text-align:justify;
font-weight: bold;
}
table.blogbody tr td {
/* entry margins */
width:0px;
padding-left: 0px;
padding-bottom: 3px;
padding-top: 5px;
}
table.footer TD {
/* edits the footer */
text-align: center;
}
div.blogheader, .caption {
/* edit the dates */
background-image: URL(http://img19.photobucket.com/albums/v58/DoodleFlip/bellandy/datehead.jpg);
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;
font-family:arial;
text-transform:uppercase;
font-size:14px;
line-height:14px;
border: 2px solid #336699;
border-width: 1px 1px 1px 1px;
color:#336699;
background-color: #none;
text-align: left;
padding-top: 10px;
width:405px;
}
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edit the links */
font:normal 11px palatino;
line-height:11px;
color: #555555;
text-decoration: strong;
background-color: #none;
}
a:visited, a.footernav:visited, {
/* edit visited links */
font:normal 11px palatino;
line-height:11px;
color: #555555;
text-decoration: strong;
background-color: #none;
}
a:hover {
font:normal 11px arial;
line-height:11px;
color:#444444;
background-color:#none;
text-decoration: line-through;
cursor: crosshair;
}
input, select, textarea, .textfield, .button {
/* this edits buttons, drop down menus etc. */
border: 1px solid #000000;
font:normal 11px arial #ffffff;
background-color: #ffffff;
letter-spacing:0px;
}
table.blogbody {
/* edits your blog or entry space */
width:405px;
border: 1px solid #ffffff;
border-width: 0px 0px 0px 0px;
}
table.left {
/* this edits the menu modules as a whole */
border: 0px solid #000000;
width:135px;
background-color: none;
}
table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-image: URL(http://img19.photobucket.com/albums/v58/DoodleFlip/bellandy/datehead.jpg);
background-attachment: fixed;
background-position: top left;
background-repeat: no-repeat;
background-color: #none;
width:135px;
font: bold 16px palatino;
line-height: 16px;
text-transform: capitalize;
color: #336699;
border: 1px solid #000000;
border-width: 1px 1px 1px 1px;
text-align: center;
}
table.left TD {
/* on your menu module, this edits the body part of it */
background-color: none;
color: #424242;
border: 1px solid #DFD8DF;
font:normal 11px palatino;
line-height: 12px;
border-width: 0px 0px 0px 0px
width:135px;
}
blockquote {
/* format text when using blockquotes */
background-color: #222222;
border: 1px #ffffff solid;
padding: 10px;
margin: 20px;
text-align: justify;
font-size: 8pt;
letter-spacing: 1px;
font-family: verdana;
}
#pnlEnabled table, #htmleditor, #lblTimeZone{
/* make this the same width as the blogbody */
/* unless you know what to do */
width: 400px;
}
.#rblEprops{display: none;}
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
/* width of the comment page I suggest miking it the same width as the blogbody*/
{width: 400px;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 540px;
}
hr {
/* edit the horizontal divider*/
color: #666666;
)
<!-- end code provided by createblog.com -->
this came from the basic CSS format blogring gave with a few additions. there are more tags you can add when you become familiar with CSS.
*note you can only string together CSS styles. scripts and other html formats must be separate.
CSS can get pretty long so I suggest linking it. use Dreamweaver or Frontpage [I prefer to use Notepad since it's simple and fast] and save it as a txt file. Upload it to a site and rename it into filename.CSS and use this to link it:
CODE
<!-- begin code provided by createblog.com -->
<link rel="stylesheet" type="text/CSS" href="http://www.sitename/filename.CSS">
<!-- end code provided by createblog.com -->
<link rel="stylesheet" type="text/CSS" href="http://www.sitename/filename.CSS">
<!-- end code provided by createblog.com -->
most free sites allow you to save CSS. I use geocities to upload my CSS. Hope this helps
oh yeah...that'll work... just copy/paste that and edit it.
heres a tip.. save a copy of your xanga page onto your hard drive. after you're done, then edit it on your computer. then, take the css that YOU PUT IN.. NOT THE WHOLE SOURCE and copy into a notepad file. save the file as "layout.css".. then upload to geocities or something and you're done. use <link rel="stylesheet" type="text/css" href="http://www.url.com/folder/layout.css"> to make it.. that saves you the trouble of having to write all the <style> stuff.. when you write the css take out all the <style> tags
you did not just say confizzled
I started CSS by taking an original Xanga skin, pulling it into dreamweaver and tweaking the color codes *so I could tell easily which part I was editing*
People dont mind so much when you use their codes...so as long as you give credit where credit is due.
People dont mind so much when you use their codes...so as long as you give credit where credit is due.
just take the code apart and do it by sections i mean tweakin them
im lost :-/
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.