Want to know how to make a scroll box? Want to know how to edit your banners and backgrounds?

Everyone can post thier codes and questions about code here.

If you use code from this forum, make sure to credit the person who gave it to you and share the love with the creators. Don't take code from here and share it on other sites without permission of the writer.

Views: 5654

Reply to This

Replies to This Discussion

You can use http://blog.skemaholicsanonymous.com/NingGen/ningGen.php to make some pretty nice profile layouts without needing too much code knowledge

To float your profile to the right you need to enter:

.xg_1col, .xg_2col, .xg_3col, .xg_4col{
float: right;
}

In the advanced code section  (may not work with all default themes)

Putting HTML <center></center> tags around content in your bio will center it to the middle of the textbox

A simple scrollbox is made by putting 

<div id="scrollbox"></div>

Around the content you want to be in the scrollbox in your bio and then:

#scrollbox {
overflow:auto;
width:500px;
height:400px;
border: none;
background-color: transparent;
text-align:center;
}

In the advanced layout section (the height can be edited as you wish to make the box different sizes)

If I take Seren's code and properly format it

This piece of codes stops the default site name and tagline from appearing on your profile:

#xg_sitename, #xg_sitedesc /*This covers up the sitename text*/{display: none; }

This piece of code styles the "header" portion of your profile, you can edit the height of it by changing the height part of the code to whatever number your wish, however changing the width may uncenter your banner.

#xg_masthead /*Top Image*/{ margin: 0px; display: block; height: 520px; width: 975px !important; background: url(http://i62.tinypic.com/35318bo.jpg) top center no-repeat scroll transparent; border-left: none; border-right: none; border-top: none; padding: 0px !important; }

This part of the code applies your background, it makes the background automatically resize to the size of your computer, the "fixed" means it will scroll with the page

body /*Background*/{ background:#000000 url(http://www.youth-restored.com/wp-content/uploads/2013/03/black-back...) center left no-repeat fixed ; color:#FFFFFF; font-family: Lucida sans unicode, sans-serif; background-size: 100%;

Aligning gifs, you just need to put the images back to back like <img src="linktoimg" /><img src="linktosecondimage" /><img src="linktothirdimage" /> ect (will depend on the size of the gifs and the space you're trying to put them in)

Code to change your scrollbar

The color can be changed by changing the #e1a5a3 to a different hex color http://www.colorpicker.com/

::-webkit-scrollbar-thumb:vertical {
background-color: #e1a5a3;
height: 10px;
border: 2px solid #FFFFFF;
}
::-webkit-scrollbar-thumb:horizontal {
background-color: #e1a5a3;
height: 7px!important;
border: 2px solid #FFFFFF;
}
::-webkit-scrollbar {
background-color: transparent;
height: 2px;
width: 8px;
}

Your Url code needs quotation marks around it url('link')

I have a thing you could all add to make profiles much prettier (if you think it needs to be prettier, some are extremely pretty xD). I have had this little piece of tech for a while now, and I am willing to give it away :P

<div align="center"><div style="font-family: Palatino; font-size: 10pt; text-align: justify; color: #e91c6b; padding: 10px; width: 450px;">

I know I am being captain obvious right now, but for anyone that doesn't know, the width decides how long the actual thing is gonna be, since its centered AND justified at the same time. Have fun! x)

I figured this would be a little helpfful to those who don't know how to put a song on their profile and have it auto-play, as ive helped several people now, I figured just sharing it here would be easier. 

But, anywhoooo xP

This site shows you how to code a youtube song to autoplay on your profile 

CLICK HERE TO SEE HOW

Your favorite broody Aspect 

-Ery

A lot of people have asked me for the code that extends the middle column to the right column, so here it is below:

#column2{
display: none;
}

#column1{
width: 1050px;
margin-left: -10px;
}

#xg_layout_column_2{
width: 805px;
}

.xg_3col {
width: 1050px
}

.xg_2col .xg_reset img {
max-width: 840px !important
}

A lot of people ask me for my layout codes and unfortunately, I don't share them because people have stolen my codes in the past and used them on other sites without credit. Below are some basics of major elements of my layouts which I am willing to share for those willing to try and work on making their own layouts. 

How to section your profile vertically 

How does it look?

How to do it

HTML:

<div id="leftbox">
</div>

<div id="rightbox">
</div>

CSS: 

#leftbox {
width: 50%;
height: 503px;
float: left;
}

#rightbox {
width: 50%;
height: 503px;
float: left;
}

You can change the height and the % to be different values to make one box smaller or larger 

How to section your profile horizontally

How does it look?

HTML: 

<div id="titlebox">
</div>

<div id="middlebox">
</div>

<div id="bottombox">
</div>

CSS:

#titlebox {
width: 100%;
height: 100px;
}

#middlebox {
width: 100%;
height: 290px;
}

#bottombox {
width: 100%;
height: 290px;
}

Then combine the two

How does it look?

HTML:

Top Section split into two columns

<div id="titlebox">

<div id="leftimgbox">

</div>

<div id="rightquotebox">

</div>

</div>

Bottom section split into two columns

<div id="middlebox">

<div id="leftbasicinfobox">

</div>

<div id="rightbiobox">

</div>

</div>

CSS: 

#titlebox {
width: 100%;
height: 100px;
}

#middlebox {
width: 100%;
height: 290px;
}

#leftimgbox {
width: 70%;
height: 100px;
float: left;
}

#rightquotebox {
width: 30%;
height: 100px;
float: left;
}

#leftbasicinfobox {
width: 25%;
height: 290px;
float: left;
}

#rightbiobox {
width: 75%;
height: 290px;
float: left;
overflow: auto;
}

Adding overflow auto will make the div in question a scrollbox as long as the content you put into it exceeds the height of the area.

Reply to Discussion

RSS

© 2024   Created by ✓ Ophelia Dreyvalian ~Admin~.   Powered by

Badges  |  Report an Issue  |  Terms of Service