Xanga Skin Help, a few questions Options

[talcumpowder]

Okay, I've cleaned it. Now, just move the blog layer and whatnot.

<!-- begin code provided by createblog.com --><br /><img src="http://img116.imageshack.us/img116/9897/flowerskinwithnavyy5po.gif" width="460" height="760" border="0" alt="" usemap="#flowermap"><br /><map name="flowermap"><br /><area shape="rect" alt="" coords="349,326,421,337" href="http://www.xanga.com/guestbook.aspx?user=testpage1015"><br /><area shape="rect" alt="" coords="261,326,349,337" href="http://www.xanga.com/private/subs.aspx"><br /><area shape="rect" alt="" coords="200,326,261,336" href="http://www.xanga.com/Private/SubscribeTo.aspx?user=testpage1015"><br /><area shape="rect" alt="" coords="162,326,192,336" href="http://www.xanga.com/claf"><br /><area shape="rect" alt="" coords="128,326,162,337" href="http://www.xanga.com/profile.aspx?user=testpage1015"><br /><area shape="rect" alt="" coords="60,326,120,338" href="http://www.xanga.com/logout.aspx"><br /><area shape="rect" alt="" coords="19,326,60,339" href="http://www.xanga.com/signin.aspx"><br /></map><br /><br /><style type="text/css"><br />/* flower skin - By jeng*/<br />.#rblEprops{display:none;}<br />#pnlEnabled table, #htmleditor, #lblTimeZone,<br />/* width of the comment page */<br />{width:245px;}<br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer <br />{display: none;} <br />body <br />{background-color: #ffffff;<br />scrollbar-arrow-color: #ffffff;<br />scrollbar-track-color: #000000;<br />scrollbar-shadow-color: #ffffff;<br />scrollbar-face-color: #000000;<br />scrollbar-highlight-color: #ffffff;<br />scrollbar-darkshadow-color: #000000;<br />scrollbar-3dlight-color: #ffffff;}<br />/* edits the date */<br />div.blogheader, .caption <br />{background-image: url();<br />background-repeat:no-repeat;<br />background-position:center;<br />font-family: arial;<br />text-transform:none;<br />font-size:14px;<br />line-height:1px;<br />font-weight:normal;<br />color:##66CC00;<br />letter-spacing:2px;<br />background-color:none;<br />text-align:center;<br />border:1px solid #000000;}<br />.blogbody b, .standard b, p b, strong {<br />/* edits bolded text in your entry */<br />font-weight: bold;<br />color: #66CC00;}<br />input, select, textarea, iframe.htmleditor, .textfield, .button {<br />/* this edits the buttons, dropdowns, etc. */<br />border: 1px solid #000000;<br />font:normal 12px arial;<br />background-color: none;<br />font-color:#66CC00;}<br /> table.footer TD {<br />/* this makes the footer at the bottom centered */<br />/* leave it alone unless you know what to do*/<br />text-align: center;}<br />body <br />table.left th {<br />/* on your menu module, this edits the title part of it */<br />/* like BLOGRINGS, POSTING CALENDAR, etc */<br />background-image: url();<br />background-color:none;<br />color: #66cc00;<br />font: bold 12pt arial;<br />text-transform: none;<br />text-align:center;<br />border: #000000 1px solid;}<br />table.left { <br />/* this edits the menu module */<br />width:180px;<br />color:000000;<br />background-color:#COLOR CODE;<br />BORDER: #000000 1px solid;}<br />font,td,p,xmp<br />{color:#66cc00;<br />font-face: arial;<br />font-weight:normal;<br />font-size:12pt;<br />text-align:justify;}<br />table.blogbody tr td { <br />/* this edits the left margin of blog */ <br />width:0px; <br />padding-left: 0px;} <br />table.blogbody {<br />/* this edits the other the place where the  blog is */<br />background-color:transparent;<br />family-font: arial;<br />BORDER: #000000 1px solid;<br />width:10px;} /* <-- The width for this should be around 5-15 pixels less then the width for your blog's div layer. */ <br />a:link<br />{line-height: #pt; <br />font-family: arial;<br />font-weight:normal; <br />color:#66CC00; <br />text-transform:none;<br />font-size:12pt; <br />cursor:crosshair;}<br />a:active<br />{font-family: arial; <br />color:#66CC00E; <br />text-transform:none;<br />font-size:12pt; <br />cursor:crosshair;}<br />a:visited<br />{font-family: arial; <br />color:#66CC00; <br />text-transform:none;<br />text-decoration:strikeout;<br />font-size:12pt;<br />cursor: crosshair;}<br />A:hover {font-family:arial;<br />color:#66CC00;<br />text-transform: uppercase; <br />cursor: crosshair; <br />font-weight:bold;<br />font-size:#pt}<br /></style><br /><br /><div style="overflow: auto; width: 250px; height: 300px; margin-top: 100px; margin-left: 100px;"> <br /><!-- end code provided by createblog.com -->

[Jeng]

thanks reili! but uhm..what do you mean by moving the blog layer?

[talcumpowder]

The layer that moves the blog, blog layer. o-0 Scroll all the way down, it's the very last thing in the code.

[Jeng]

i tried, but the blog isnt on my skin.

EDIT//and how do i fix the skin to be still?

[talcumpowder]

[ http://www.xanga.com/nyah_tests ]
Works fine. o-0 If you mean it isn't on the image, of course it isn't. You probably need a negative top-margin, start with like... -1000 and move it until you've got it in the right spot.

[Jeng]

also, how do you make the skin fixed in the background so when i scroll it doesnt go on to the white and the skin goes forever down.

[talcumpowder]

[ http://foxy.blewmyallowanceonmanga.net/indexx.php ]
^ Like that? Or... What? Because the image shouldn't move. And if you move the blog to the correct spot, the page shouldn't overflow, like here.
[ http://ribbons.blewmyallowanceonmanga.net/ ]

[Jeng]

like a scrollbar inside the skin scrolling the blogs down..or if thats not possible then ill go with the first one.see on the test xanga of mine.. HERE, how/where in the code can you fix the width of the blog

<!-- begin code provided by createblog.com --><br /><!-- begin code provided by createblog.com --><br /><img src="http://img116.imageshack.us/img116/9897/flowerskinwithnavyy5po.gif" width="460" height="760" border="0" alt="" usemap="#flowermap"><br /><map name="flowermap"><br /><area shape="rect" alt="" coords="349,326,421,337" href="http://www.xanga.com/guestbook.aspx?user=testpage1015"><br /><area shape="rect" alt="" coords="261,326,349,337" href="http://www.xanga.com/private/subs.aspx"><br /><area shape="rect" alt="" coords="200,326,261,336" href="http://www.xanga.com/Private/SubscribeTo.aspx?user=testpage1015"><br /><area shape="rect" alt="" coords="162,326,192,336" href="http://www.xanga.com/claf"><br /><area shape="rect" alt="" coords="128,326,162,337" href="http://www.xanga.com/profile.aspx?user=testpage1015"><br /><area shape="rect" alt="" coords="60,326,120,338" href="http://www.xanga.com/logout.aspx"><br /><area shape="rect" alt="" coords="19,326,60,339" href="http://www.xanga.com/signin.aspx"><br /></map><br /><br /><style type="text/css"><br />/* flower skin - By jeng*/<br />.#rblEprops{display:none;}<br />#pnlEnabled table, #htmleditor, #lblTimeZone,<br />/* width of the comment page */<br />{width:245px;}<br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer <br />{display: none;} <br />body <br />{background-color: #ffffff;<br />scrollbar-arrow-color: #ffffff;<br />scrollbar-track-color: #000000;<br />scrollbar-shadow-color: #ffffff;<br />scrollbar-face-color: #000000;<br />scrollbar-highlight-color: #ffffff;<br />scrollbar-darkshadow-color: #000000;<br />scrollbar-3dlight-color: #ffffff;}<br />/* edits the date */<br />div.blogheader, .caption <br />{background-image: url();<br />background-repeat:no-repeat;<br />background-position:center;<br />font-family: arial;<br />text-transform:none;<br />font-size:14px;<br />line-height:13px;<br />font-weight:normal;<br />color:#66CC00;<br />letter-spacing:2px;<br />background-color:none;<br />text-align:center;<br />border:1px solid #000000;}<br />.blogbody b, .standard b, p b, strong {<br />/* edits bolded text in your entry */<br />font-weight: bold;<br />color: #66CC00;}<br />input, select, textarea, iframe.htmleditor, .textfield, .button {<br />/* this edits the buttons, dropdowns, etc. */<br />border: 1px solid #000000;<br />font:normal 12px arial;<br />background-color: none;<br />font-color:#66CC00;}<br /> table.footer TD {<br />/* this makes the footer at the bottom centered */<br />/* leave it alone unless you know what to do*/<br />text-align: center;}<br />body <br />table.left th {<br />/* on your menu module, this edits the title part of it */<br />/* like BLOGRINGS, POSTING CALENDAR, etc */<br />background-image: url();<br />background-color:none;<br />color: #66cc00;<br />font: bold 12pt arial;<br />text-transform: none;<br />text-align:center;<br />border: #000000 1px solid;}<br />table.left { <br />/* this edits the menu module */<br />width:180px;<br />color:000000;<br />background-color:#COLOR CODE;<br />BORDER: #000000 1px solid;}<br />font,td,p,xmp<br />{color:#66cc00;<br />font-face: arial;<br />font-weight:normal;<br />font-size:12pt;<br />text-align:justify;}<br />table.blogbody tr td { <br />/* this edits the left margin of blog */ <br />width:0px; <br />padding-left: 0px;} <br />table.blogbody {<br />/* this edits the other the place where the  blog is */<br />background-color:transparent;<br />family-font: arial;<br />BORDER: #000000 1px solid;<br />width:15px;} /* <-- The width for this should be around 5-15 pixels less then the width for your blog's div layer. */ <br />a:link<br />{line-height: #pt; <br />font-family: arial;<br />font-weight:normal; <br />color:#66CC00; <br />text-transform:none;<br />font-size:12pt; <br />cursor:crosshair;}<br />a:active<br />{font-family: arial; <br />color:#66CC00E; <br />text-transform:none;<br />font-size:12pt; <br />cursor:crosshair;}<br />a:visited<br />{font-family: arial; <br />color:#66CC00; <br />text-transform:none;<br />text-decoration:strikeout;<br />font-size:12pt;<br />cursor: crosshair;}<br />A:hover {font-family:arial;<br />color:#66CC00;<br />text-transform: uppercase; <br />cursor: crosshair; <br />font-weight:bold;<br />font-size:#pt}<br /></style><br /><br /><div style="overflow: auto; width: 582px; height: 465px; margin-top: -380px; margin-left: -195px;"> <br /><!-- end code provided by createblog.com --><br /><!-- end code provided by createblog.com -->

[talcumpowder]

CODE

<div style="overflow: auto; width: 582px; height: 465px; margin-top: -380px; margin-left: -195px;">

This need to be larger than this.

CODE

table.blogbody {
/* this edits the other the place where the  blog is */
background-color:transparent;
family-font: arial;
BORDER: #000000 1px solid;
width:15px;} /* <-- The width for this should be around 5-15 pixels less then the width for your blog's div layer. */

[Jeng]

<div style="overflow: auto; width: 582px; height: 465px; margin-top: -380px; margin-left: -195px;">

i changed the numbers for that, so now it probably placed where i want it to be on the skin..

[talcumpowder]

And...? Can this be closed now or what?

[Jeng]

no not yet. how do i make the skin to be like a scrollbar inside the skin scrolling the blogs down..or if thats not possible then..like [ http://foxy.blewmyallowanceonmanga.net/indexx.php ]

EDITT// or make the skin go longer till the bottom of the internet window

[talcumpowder]

It does scroll your blog with a seperate scrollbar, that's what I'm confused about.
For the other, you just use overflow: visable; height: 100%; instead of overflow: auto; height: 100px; and that's pretty much the only difference in coding.

[Jeng]

the only place in my code i see where overflow is is the bottom

<!-- begin code provided by createblog.com --><br /><div style="overflow: auto; width: 585px; height: 465px; margin-top: -380px; margin-left: -200px;"> <br /><!-- end code provided by createblog.com -->

is that the place where i would change it?

[talcumpowder]

Yeah... That's pretty much the only section of your code I've been talking about this whole time.

[Jeng]

hmm maybe that, but see like [HERE] you said it was a pixel stretch,

Reapeat-y, so it goes down the page. Cut off the very bottom pixel and use it for your background, set as reapeat-y and then... Congrasts, you've created a pixel streatch.

is it that im trying to get help on..if that..how would you cut off the bottom pixel?

[talcumpowder]

..... o-0 Select the very bottom pixel and make it into a new image. Still, your image isn't really set up for that. Your image would look better if the blog area was set to scroll.
Why? Because you have a section of the image that's a lighter color and that would be where you blog would go. It'd look better.

[Jeng]

okay ill go with that, so when i add more blog entries, will there be a scrollbar scrolling my entries inside the skin..or do i have to insert a code for it..or do i just change and use [overflow: visable; height: 100%;]?

editt// my test page for xanga,my blogs are scrolling off the skin ;x..
1-what do i do to make it not scroll?
questions:
2-for making a layout,the separate left custom modules with the navigation, do i just make a separarte column for the left modules and a separate area for the blog? and
3-then do i just use the xanga codes to make the layout?

[talcumpowder]

I told you, to not scroll you use overflow: visable; height: 100%;. It's overflow: auto; height: 100px; for scrolling.
Seperate div layer, yeah. And you position that before the blog area. Put it before your stylesheet and after you image.
Um, you kinda need to use xanga codes to make a xanga layout, yes.

[Jeng]

hmm questions i think..i may have more when making a layout...
1st Question so on photoshop [program im using to make them], i just make a basic layout, 1 column for left modules, and another for the blog area, so..no need for imagemap right? just upload the picture and use that url in here

<!-- begin code provided by createblog.com --><br /><!-- begin code provided by createblog.com --><br /><img src="IMAGE URL GOES HERE"><br /><!-- end code provided by createblog.com --><br /><!-- begin code provided by createblog.com --><br /><br /><div style="overflow: auto; width: ###px; height: ###px; margin-top: ###px; margin-left: ###px;"> <br /><br /><!-- end code provided by createblog.com --><br /><!-- end code provided by createblog.com -->

If you made another box on your image for something else (about me's, different navigation style, etc..) then just plug in that same div code. And put your text under, but don't forget to end the div! An example is supplied below

example

<!-- begin code provided by createblog.com --><br /><div style="overflow: auto; width: ###px; height: ###px; margin-top: ###px; margin-left: ###px;"><b>About Me</b><br>Name: John Smith<br>Age: 20<br>Birthday: January 1<br>Hobbies: Farting<Br>Expertise: Computer Programming</div><br /><!-- end code provided by createblog.com -->

Just make sure that your blog div layer is after your div that's for all your other stuff!

<<2nd QUESTION so all the things i want to add to the left module [using that example] i just place the blog code after all the codes i want in the left modules?..
a lot of stuff in this post but it helps;x

[talcumpowder]

I wouldn't call it a "basic" layout. But yes, although I add in an image map sometimes.
As for the second thing, it works well like this.

<!-- begin code provided by createblog.com --><br /><img src="URL"><br /><br /><div style="overflow: auto; width: ###px; height: ###px; margin-top: ###px; margin-left: ###px;"><br />This is the content of the sidebar, yo!<br /></div><br /><br /><style type="text/css"><br />Hi, I'm a stylesheet.<br /></style><br /><br /><div style="overflow: auto; width: ###px; height: ###px; margin-top: ###px; margin-left: ###px;"><br /><!-- end code provided by createblog.com -->

Or that's the easiest order to do it, I think. It tells you the order to fix things in and it's fairly easy to remember. -shrug-

[Jeng]

eh ;x what goes..here...

<!-- begin code provided by createblog.com --><br /><style type="text/css"><br />Hi, I'm a stylesheet.<br /></style><br /><!-- end code provided by createblog.com -->

where it says Hi, I'm a stylesheet.?
what kind of stuff or say do i put in there?

[talcumpowder]

Your stylesheet. Maybe I should have actually made it a stylesheet, but I figured the style tags would tell you what to do with it.

[Jeng]

not familiar what to do what a style sheet since its my first skin im making.so the question is..what kind of stuff do i put in there..aka my style sheet is my what...my imagemap code one? bleh thanks for helping me through all this everyone..so what do i put in the stylesheet?

Reili,

Maybe I should have actually made it a stylesheet

could you possbily do that so it could help me.

**thanks to everybody for all the help up there in this topic.

[hi-C]

The image map is not a style sheet. Hmmm, how to explain this...a style sheet defines the various settings in your page; it tells what it's going to look like. Think of it the outline of a paper, it organizes and tells what's going to appear in the main content. Style sheets are created by defining the properties of various classes; if you think about it as an outline, it defines the topics you're going to write about in your paper. Does that make sense?

See this topic on stylesheets: http://www.createblog.com/forums/index.php...1&hl=stylesheet