so could anyone tell me a place where's there's a tutorial that's ez to understand thx!!
Full Version: SKins
i read all those tutorials about how to make one but i still don't know how!! i tried to make one and it didn't work so could anyone tell me a place where's there's a tutorial that's ez to understand thx!!
so could anyone tell me a place where's there's a tutorial that's ez to understand thx!!
ummm this is how i explain-_-;;
install adobe photoshop (any version) or paint shop pro (any version)
after installing it, open up a new document file
get ur brush skills around the layout, u can also put pictures u want to put, and some text around the layout. dont forget to type in like the navigations. example: home | xanga | add me | log out blah blah blah
btw u can download brushes at some sites^^;;;; like those swirly ones and like the stars one for example heh... if u cant find those sites, ask the members who knows about layouts hehe... try echoica.net? cause thats all i have in mind.
and have macromedia fireworks mx and macromedia dreamweaver mx programs.
open up the file at fireworks mx... open up the file on which u created to make a layout. and after u opened it. look at ur right side... there will be buttons to click on. go look around till you find the word "hotspot tool" the picture shown as like a square...heh and then......after u click that you... go to ur navigations and with ur hotspot tool make a square around your navigations...and there will be like alt=..blah blah stuff like that and link:... for example ur layout says SWEET HOME...the link would say: http://xanga.com/private/home.aspx heh..and the alt would be alt=Home ...that's all................................and then after you done with squaring ur navigation bars.... go to file >>>export... and after you clicked ok...go to..
go to macromedia dreamweaver mx... and open up like you know like for example: dasdasdsad.<b>jpg</b> sdada.<b>bmp</b> asdweea.<b>gif</b> find your file but that says for example asdefd.<b>htm</b> open that...and click on your whole layout...and go up till you find the edit or view place i think??? and find the word copy/paste html...after u find that go open up ur word pad or word document and paste the codes there....then..........................
use the div codes which is...
<center><div id="image" style="align: center;filter: chroma(color=#FFFFFF) allowTransparency;">
<div id="content" style="margin-left: 435px; margin-top: -300px; width: 350px; height: 270px; overflow: auto;">
for example:
<center><div id="image" style="align: center;filter: chroma(color=#FFFFFF) allowTransparency;">
<img name="om1" src="om1.jpg" width="595" height="510" border="0" usemap="#m_om1" alt=""><map name="m_om1">
<area shape="rect" coords="553,251,595,264" href="http://www.xanga.com/CLAF/default.asp" target="_self" title="Look and Feel" alt="Look and Feel" >
<area shape="rect" coords="493,252,547,267" href="http://www.xanga.com/Private/subs.aspx" target="_self" title="Subscriptions" alt="Subscriptions" >
<area shape="rect" coords="427,252,485,267" href="http://www.xanga.com/Private/SubscribeTo.aspx?user=anqel_susan" title="Subscribe to" alt="Subscribe to" >
<area shape="rect" coords="357,250,419,265" href="http://www.xanga.com/login.aspx" target="_self" title="Sign in" alt="Sign in" >
<area shape="rect" coords="300,250,348,265" href="http://www.xanga.com/logout.asp" target="_self" title="Log out" alt="Log out" >
<area shape="rect" coords="221,252,294,266" href="http://www.xanga.com/private/home.aspx" target="_self" title="My privacy" alt="My privacy" >
</map>
<div id="content" style="margin-left: 435px; margin-top: -300px; width: 350px; height: 270px; overflow: auto;">
it supposed to look like that.....those codes i just insert is from doing the copy/paste html at dreamweaver mx ^^;;;; hehehe anyways... then...
copy and paste this code i just showed u with the div layer code... go to your xanga and paste this codes there... in your "put your own header html" and then.... you need a css stylesheets to finish it... you know wat that is right?...it looks like this:
then... press preview not done!! cause u never know u might've done something wrong-_-;;;; but if u think it's ok then press saved changes^^;;
if you want someone to fix your blog to your layout..let me knOW and i'll fix it for yoU!! ok that's all whew-_-;;
install adobe photoshop (any version) or paint shop pro (any version)
after installing it, open up a new document file
get ur brush skills around the layout, u can also put pictures u want to put, and some text around the layout. dont forget to type in like the navigations. example: home | xanga | add me | log out blah blah blah
btw u can download brushes at some sites^^;;;; like those swirly ones and like the stars one for example heh... if u cant find those sites, ask the members who knows about layouts hehe... try echoica.net? cause thats all i have in mind.
and have macromedia fireworks mx and macromedia dreamweaver mx programs.
open up the file at fireworks mx... open up the file on which u created to make a layout. and after u opened it. look at ur right side... there will be buttons to click on. go look around till you find the word "hotspot tool" the picture shown as like a square...heh and then......after u click that you... go to ur navigations and with ur hotspot tool make a square around your navigations...and there will be like alt=..blah blah stuff like that and link:... for example ur layout says SWEET HOME...the link would say: http://xanga.com/private/home.aspx heh..and the alt would be alt=Home ...that's all................................and then after you done with squaring ur navigation bars.... go to file >>>export... and after you clicked ok...go to..
go to macromedia dreamweaver mx... and open up like you know like for example: dasdasdsad.<b>jpg</b> sdada.<b>bmp</b> asdweea.<b>gif</b> find your file but that says for example asdefd.<b>htm</b> open that...and click on your whole layout...and go up till you find the edit or view place i think??? and find the word copy/paste html...after u find that go open up ur word pad or word document and paste the codes there....then..........................
use the div codes which is...
<center><div id="image" style="align: center;filter: chroma(color=#FFFFFF) allowTransparency;">
<div id="content" style="margin-left: 435px; margin-top: -300px; width: 350px; height: 270px; overflow: auto;">
for example:
<center><div id="image" style="align: center;filter: chroma(color=#FFFFFF) allowTransparency;">
<img name="om1" src="om1.jpg" width="595" height="510" border="0" usemap="#m_om1" alt=""><map name="m_om1">
<area shape="rect" coords="553,251,595,264" href="http://www.xanga.com/CLAF/default.asp" target="_self" title="Look and Feel" alt="Look and Feel" >
<area shape="rect" coords="493,252,547,267" href="http://www.xanga.com/Private/subs.aspx" target="_self" title="Subscriptions" alt="Subscriptions" >
<area shape="rect" coords="427,252,485,267" href="http://www.xanga.com/Private/SubscribeTo.aspx?user=anqel_susan" title="Subscribe to" alt="Subscribe to" >
<area shape="rect" coords="357,250,419,265" href="http://www.xanga.com/login.aspx" target="_self" title="Sign in" alt="Sign in" >
<area shape="rect" coords="300,250,348,265" href="http://www.xanga.com/logout.asp" target="_self" title="Log out" alt="Log out" >
<area shape="rect" coords="221,252,294,266" href="http://www.xanga.com/private/home.aspx" target="_self" title="My privacy" alt="My privacy" >
</map>
<div id="content" style="margin-left: 435px; margin-top: -300px; width: 350px; height: 270px; overflow: auto;">
it supposed to look like that.....those codes i just insert is from doing the copy/paste html at dreamweaver mx ^^;;;; hehehe anyways... then...
copy and paste this code i just showed u with the div layer code... go to your xanga and paste this codes there... in your "put your own header html" and then.... you need a css stylesheets to finish it... you know wat that is right?...it looks like this:
CODE
<!-- begin code provided by createblog.com -->
<style type="text/css">
body {
background-color: #000000;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-shadow-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-3dlight-color: #000000;
}
.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {
/* edits main text */
font:normal 11px arial;
line-height:10px;
color:white;
letter-spacing:1px;
text-align:justify;
}
table.footer TD {
/* this makes the footer at the bottom centered */
/* leave it alone unless you know what to do*/
text-align: center;
}
div.blogheader, .caption {
/* edits the dates */
font-family:arial;
text-transform:lowercase;
font-size:16px;
line-height:10px;
font-weight:bold;
color:#ffffff;
letter-spacing:3px;
background-color: #000000;
text-align: left;
}
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edits all links */
color:#cccccc;
letter-spacing:-1px;
font-weight: bold;
}
a:visited, a.footernav:visited, {
/* edits the links that the user has visited */
color:#cccccc;
letter-spacing:-1px;
font-weight: bold;
}
a:hover {
/* edits when user mouseovers the links */
color:#ffffff;
letter-spacing:-1px;
cursor: ne-resize;
font-weight: bold;
text-transform: uppercase;
}
input, select, textarea, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
border: 1px solid #cccccc;
font:normal 11px arial;
background-color: #000000;
letter-spacing:1px;
color: #ffffff;
}
table.left {
/* this edits the menu module */
border: 1px solid #cccccc;
width:160px;
background-color: #000000;
}
table.blogbody {
/* this edits the other the place where the blog is */
border: 1px solid cccccc;
background-color: #000000;
width:400px;
}
table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-image: url(http://url.com/to/the/site/image.gif);
background-color: #000000;
font: bold 11px arial;
text-transform: uppercase;
color: #ffffff;
border: none;
}
table.left TD {
/* on your menu module, this edits the body part of it */
background-image: url(http://url.com/to/the/site/image.gif);
background-color: #000000;
border: none;
}
table.search TD, table.search, table.announcements {
/* border of search bar (if you have it) */
background-color: #000000;
border: 1px solid #cccccc;
}
table.search TD, table.announcements TH {
/* this should be left alone */
/* unless you know what to do */
border: 1px solid #cccccc;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 500px;
}
hr {
/* horizontal divider */
border: 1px solid #cccccc;
}
</style>
<style type="text/css">
b, strong {
/* edits bolded text in your entry */
color: #cccccc;
font-size: 9pt;
letter-spacing:-1px;
}
</style>
<!-- end code provided by createblog.com -->
<style type="text/css">
body {
background-color: #000000;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-shadow-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-3dlight-color: #000000;
}
.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {
/* edits main text */
font:normal 11px arial;
line-height:10px;
color:white;
letter-spacing:1px;
text-align:justify;
}
table.footer TD {
/* this makes the footer at the bottom centered */
/* leave it alone unless you know what to do*/
text-align: center;
}
div.blogheader, .caption {
/* edits the dates */
font-family:arial;
text-transform:lowercase;
font-size:16px;
line-height:10px;
font-weight:bold;
color:#ffffff;
letter-spacing:3px;
background-color: #000000;
text-align: left;
}
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edits all links */
color:#cccccc;
letter-spacing:-1px;
font-weight: bold;
}
a:visited, a.footernav:visited, {
/* edits the links that the user has visited */
color:#cccccc;
letter-spacing:-1px;
font-weight: bold;
}
a:hover {
/* edits when user mouseovers the links */
color:#ffffff;
letter-spacing:-1px;
cursor: ne-resize;
font-weight: bold;
text-transform: uppercase;
}
input, select, textarea, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
border: 1px solid #cccccc;
font:normal 11px arial;
background-color: #000000;
letter-spacing:1px;
color: #ffffff;
}
table.left {
/* this edits the menu module */
border: 1px solid #cccccc;
width:160px;
background-color: #000000;
}
table.blogbody {
/* this edits the other the place where the blog is */
border: 1px solid cccccc;
background-color: #000000;
width:400px;
}
table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-image: url(http://url.com/to/the/site/image.gif);
background-color: #000000;
font: bold 11px arial;
text-transform: uppercase;
color: #ffffff;
border: none;
}
table.left TD {
/* on your menu module, this edits the body part of it */
background-image: url(http://url.com/to/the/site/image.gif);
background-color: #000000;
border: none;
}
table.search TD, table.search, table.announcements {
/* border of search bar (if you have it) */
background-color: #000000;
border: 1px solid #cccccc;
}
table.search TD, table.announcements TH {
/* this should be left alone */
/* unless you know what to do */
border: 1px solid #cccccc;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 500px;
}
hr {
/* horizontal divider */
border: 1px solid #cccccc;
}
</style>
<style type="text/css">
b, strong {
/* edits bolded text in your entry */
color: #cccccc;
font-size: 9pt;
letter-spacing:-1px;
}
</style>
<!-- end code provided by createblog.com -->
then... press preview not done!! cause u never know u might've done something wrong-_-;;;; but if u think it's ok then press saved changes^^;;
if you want someone to fix your blog to your layout..let me knOW and i'll fix it for yoU!! ok that's all whew-_-;;
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.