Replies to This Discussion

CelestialPermalink Reply by ✓ Ophelia Dreyvalian ~Admin~ on August 14, 2015 at 18:14

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

• ▶ Reply

CelestialPermalink Reply by ✓ Ophelia Dreyvalian ~Admin~ on August 14, 2015 at 18:23

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)

• ▶ Reply

CelestialPermalink Reply by ✓ Ophelia Dreyvalian ~Admin~ on August 14, 2015 at 18:26

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

• ▶ Reply

CelestialPermalink Reply by ✓ Ophelia Dreyvalian ~Admin~ on August 14, 2015 at 18:28

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)

• ▶ Reply

CelestialPermalink Reply by ✓ Ophelia Dreyvalian ~Admin~ on August 15, 2015 at 1:22

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%;

• ▶ Reply

CelestialPermalink Reply by ✓ Ophelia Dreyvalian ~Admin~ on August 17, 2015 at 1:00

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)

• ▶ Reply

CelestialPermalink Reply by ✓ Ophelia Dreyvalian ~Admin~ on August 17, 2015 at 1:03

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;
}

• ▶ Reply

CelestialPermalink Reply by ✓ Ophelia Dreyvalian ~Admin~ on August 22, 2015 at 12:20

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

• ▶ Reply

Permalink Reply by 1o2kaysh2d1zj on May 28, 2018 at 20:54

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)

• ▶ Reply

Ailward AspectPermalink Reply by ✓ Erythreus Ailward ~Admin~ on June 21, 2018 at 23:07

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

• ▶ Reply

HumanPermalink Reply by ✓ Sariah Amelie Holloway ~Admin~ on December 30, 2018 at 19:25

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
}

• ▶ Reply

HumanPermalink Reply by ✓ Sariah Amelie Holloway ~Admin~ on March 19, 2019 at 8:47

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

▶ Reply to Discussion