View topic - The Official Ernya Profile Guide - Updated 3/18
- Home
- Ernyan Community Discussion
- Profile CSS Customization Discussion
- The Official Ernya Profile Guide - Updated 3/18
[016]
background: url(IMG URL HERE) #xxxxxx; - Sets the full background of a section.
background-color: #xxxxxx; - Sets the background color of a section.
background-image: url(); - Sets the background image of a section.
background-repeat: no-repeat/repeat/repeat-x/repeat-y; - Sets whether or not to repeat the background image and how to repeat it.
background-position: left top/left center/left bottom/right top/right center/right bottom/center top/center center/center bottom; - Sets a background position.
background-attachment: fixed/scroll; - Sets whether the background will scroll with the page or if it will stay in a fixed position on the page.
background: url(IMG URL HERE) #xxxxxx; - Sets the full background of a section.
background-color: #xxxxxx; - Sets the background color of a section.
background-image: url(); - Sets the background image of a section.
background-repeat: no-repeat/repeat/repeat-x/repeat-y; - Sets whether or not to repeat the background image and how to repeat it.
background-position: left top/left center/left bottom/right top/right center/right bottom/center top/center center/center bottom; - Sets a background position.
background-attachment: fixed/scroll; - Sets whether the background will scroll with the page or if it will stay in a fixed position on the page.
Quote[017]
border: #xxxxxx _px solid/dashed/dotted/dashed/double/groove/ridge/inset/outset/none; - Sets the full border of a section.
border-left: #xxxxxx _px solid/dashed/dotted/dashed/double/groove/ridge/inset/outset/none; - Sets the left-side border of a section.
border-right: #xxxxxx _px solid/dashed/dotted/dashed/double/groove/ridge/inset/outset/none; - Sets the right-side border of a section.
border-top: #xxxxxx _px solid/dashed/dotted/dashed/double/groove/ridge/inset/outset/none; - Sets the top border of a section.
border-bottom: #xxxxxx _px solid/dashed/dotted/dashed/double/groove/ridge/inset/outset/none; - Sets the bottom border of a section.
border-radius: _px _px _px _px; -moz-border-radius _px _px _px _px; - Creates rounded corners of a section.
border: #xxxxxx _px solid/dashed/dotted/dashed/double/groove/ridge/inset/outset/none; - Sets the full border of a section.
border-left: #xxxxxx _px solid/dashed/dotted/dashed/double/groove/ridge/inset/outset/none; - Sets the left-side border of a section.
border-right: #xxxxxx _px solid/dashed/dotted/dashed/double/groove/ridge/inset/outset/none; - Sets the right-side border of a section.
border-top: #xxxxxx _px solid/dashed/dotted/dashed/double/groove/ridge/inset/outset/none; - Sets the top border of a section.
border-bottom: #xxxxxx _px solid/dashed/dotted/dashed/double/groove/ridge/inset/outset/none; - Sets the bottom border of a section.
border-radius: _px _px _px _px; -moz-border-radius _px _px _px _px; - Creates rounded corners of a section.
[018]
color: #xxxxxx; - Sets text color.
font-family: FONT NAME; - Sets font of the text.
font-size: _pt; - Sets font size of the text.
font-weight: bold/normal; - Sets font weight of the text.
text-decoration: underline/overline/line-though/blink; - Sets a text decoration.
text-transform: lowercase/uppercase/capitalize; - Sets a text transform of capitalization.
text-align: left/right/center/justify; - Sets the alignment of the text.
line-height: _px; - Sets the height of the text line.
letter-spacing: _px; - Sets the spacing of the characters.
word-spacing: _px; - Sets the spacing of the words.
text-shadow: #xxxxxx _px _px _px; - Creates a shadow behind the text.
text-indent: _px; Indents the first line of the text from the left.
color: #xxxxxx; - Sets text color.
font-family: FONT NAME; - Sets font of the text.
font-size: _pt; - Sets font size of the text.
font-weight: bold/normal; - Sets font weight of the text.
text-decoration: underline/overline/line-though/blink; - Sets a text decoration.
text-transform: lowercase/uppercase/capitalize; - Sets a text transform of capitalization.
text-align: left/right/center/justify; - Sets the alignment of the text.
line-height: _px; - Sets the height of the text line.
letter-spacing: _px; - Sets the spacing of the characters.
word-spacing: _px; - Sets the spacing of the words.
text-shadow: #xxxxxx _px _px _px; - Creates a shadow behind the text.
text-indent: _px; Indents the first line of the text from the left.
[019]
display: inline-block; padding-left: _px; padding-right: _px; padding-top: _px; padding-bottom: _px; - Creates a horizontal menu with varying widths and heights.
display: inline-block; width: _px; height: _px; - Creates a horizontal menu with the same widths and heights.
display: block; height: _px; - Creates a vertical menu stretching across the whole section.
To customize the hover of a link use the following code. (Also works with sections. Just add ":hover" after the selector.
a:hover {}
To customize a visited link use the following code.
a:visited {}
To customize an active link use the following code.
a:active {}
display: inline-block; padding-left: _px; padding-right: _px; padding-top: _px; padding-bottom: _px; - Creates a horizontal menu with varying widths and heights.
display: inline-block; width: _px; height: _px; - Creates a horizontal menu with the same widths and heights.
display: block; height: _px; - Creates a vertical menu stretching across the whole section.
To customize the hover of a link use the following code. (Also works with sections. Just add ":hover" after the selector.
a:hover {}
To customize a visited link use the following code.
a:visited {}
To customize an active link use the following code.
a:active {}
Last edited by Sam on Mon Dec 19, 2011 9:40 pm; edited 1 time in total
[020]
position: absolute; - Section can move at will, though may disrupt other sections.
margin-top: _px; - Moves the section up and down when in position: static;. Allows negative numbers.
margin-left: _px; - Moves the section left and right when in position: static;. Allows negative numbers.
top: _px; - Moves the section up and down when in position: absolute;. Allows negative numbers.
left: _px; - Moves the section left and right when in position: absolute;. Allows negative numbers.
display: none; - Will basically delete the section. Be careful though, some sections will also delete other sections!
display: inline; - The basic setting and is often used for links. It will also make no change to how things are spaced.
display: block; - Will make links along the lines of what your add/pm/trade links look like. This will create a new line for this element as well.
visibility: hidden; - Hides a section without disturbing other sections.
z-index: number here; - Adjusts the layering of elements.
position: absolute; - Section can move at will, though may disrupt other sections.
margin-top: _px; - Moves the section up and down when in position: static;. Allows negative numbers.
margin-left: _px; - Moves the section left and right when in position: static;. Allows negative numbers.
top: _px; - Moves the section up and down when in position: absolute;. Allows negative numbers.
left: _px; - Moves the section left and right when in position: absolute;. Allows negative numbers.
display: none; - Will basically delete the section. Be careful though, some sections will also delete other sections!
display: inline; - The basic setting and is often used for links. It will also make no change to how things are spaced.
display: block; - Will make links along the lines of what your add/pm/trade links look like. This will create a new line for this element as well.
visibility: hidden; - Hides a section without disturbing other sections.
z-index: number here; - Adjusts the layering of elements.
Last edited by Sam on Fri Feb 24, 2012 12:03 am; edited 2 times in total
[021]
width: _px; - Defines a width to a section.
height: _px; - Defines a height to a section.
padding: _px _px _px _px; - Sets a padding (empty space between the actual content and the edge of the section) to a section. In order for the pixels it is top, right, bottom, left.
padding-top/right/bottom/left: _px; - Sets a padding to a specific side.
cursor: default/crosshair/pointer/text/progress/wait/help/move/n-resize/ne-resize/nw-resize/s-resize/w-resize/e-resize/url(); - Defines a cursor for a specific section or the whole page. You can view them all here.
overflow: hidden; - Cuts off anything that goes past your specified widths/heights.
overflow: auto; - Adds a scrollbar when content goes beyond your height/width.
overflow: scroll; - Adds a scrollbar to a section at all times.
width: _px; - Defines a width to a section.
height: _px; - Defines a height to a section.
padding: _px _px _px _px; - Sets a padding (empty space between the actual content and the edge of the section) to a section. In order for the pixels it is top, right, bottom, left.
padding-top/right/bottom/left: _px; - Sets a padding to a specific side.
cursor: default/crosshair/pointer/text/progress/wait/help/move/n-resize/ne-resize/nw-resize/s-resize/w-resize/e-resize/url(); - Defines a cursor for a specific section or the whole page. You can view them all here.
overflow: hidden; - Cuts off anything that goes past your specified widths/heights.
overflow: auto; - Adds a scrollbar when content goes beyond your height/width.
overflow: scroll; - Adds a scrollbar to a section at all times.
Last edited by Sam on Mon Dec 19, 2011 9:42 pm; edited 1 time in total
[022]
Fonts are fun to customize. Here's a list of fonts that are good to use no matter what browser you have, along with a few special fonts. Remember that if you use a font that has spaces in its name you must use "" around the name.
You can also use multiple fonts to ensure that the font you want is used by the browser. You can do this by using , after the font and listing a new one. A good thing to do as well is using serif and sans-serif as your last font choice to default to the browser's basic font if no font choice matches.
Serif Fonts - Fonts that have "serifs", or "tails" at the beginning/end of characters.
Sans-Serif Fonts - Fonts without serifs.
Monospace Fonts - Fonts where each character occupies the same width.
Ernya Fonts - Fonts that Prezrok has installed into the Ernya themes. May not work in all browsers!
Fonts are fun to customize. Here's a list of fonts that are good to use no matter what browser you have, along with a few special fonts. Remember that if you use a font that has spaces in its name you must use "" around the name.
You can also use multiple fonts to ensure that the font you want is used by the browser. You can do this by using , after the font and listing a new one. A good thing to do as well is using serif and sans-serif as your last font choice to default to the browser's basic font if no font choice matches.
Serif Fonts - Fonts that have "serifs", or "tails" at the beginning/end of characters.
Sans-Serif Fonts - Fonts without serifs.
Monospace Fonts - Fonts where each character occupies the same width.
Ernya Fonts - Fonts that Prezrok has installed into the Ernya themes. May not work in all browsers!
Last edited by Sam on Sun Mar 18, 2012 4:18 pm; edited 1 time in total
[028]
Feel free to use this profile to create your own! This profile is not for making a profit off of, distributing, etc.
Live Preview
Feel free to use this profile to create your own! This profile is not for making a profit off of, distributing, etc.
Live Preview
- Show Spoiler
-
Code:/*Codes © Sam 2010*/
/*You may only use this for your own personal use!*/
/*Please refer to my guide to create your profile*/
/*REMOVED CONTENT*/
#helper-wrap, .wR, #btm, #sticker-header-inner, #sticker-header, .sticker-list ul {background: transparent;}
#board, #av, ul.comments li.bubble.comment span.tail, #ft li, #hd #reward, .zR {display: none;}
/*PRE-MOVED CONTENT*/
#wrp {margin-top: -150px;}
.content.lft {margin-top: 29px; margin-left: -10px;}
.bCarousel .arrow {margin-top: 3px;}
/*CHANGED TEXT*/
.post_msg textarea {font-family: Arial,sans-serif;}
#sticker-header-inner p {color: #000000;}
/*CHANGED BACKGROUNDS*/
/*Buttons*/
ul.w a {background: #bbbbbb;}
body {background: #dddddd;}
.bCarousel ul li a img {background: #ffffff;}
.post_msg textarea, .bCarousel .wrapper, .about, .comments .comment, .content.lft, .pd, #sticker-box {background: #eeeeee;}
/*CHANGED BORDERS*/
.bCarousel ul li a img, #wishlist li img, #sticker-header, .sticker-list ul, .sticker-list {border: none;}
#wrp {border: #333333 10px solid !important;}
ul.w a, .about, .comments .comment, .post_msg textarea, .content.lft, .bCarousel .wrapper, .pd, #sticker-box {border: #333333 2px solid;}
.comments .poster {border: #333333 2px solid; padding: 0px;}
#wrp, ul.w a, .content.lft, .content.lft a, .comments .poster, .bCarousel ul li, #wishlist li img, .about, .bCarousel .wrapper, .bCarousel ul li a img, #sticker-box {-moz-border-radius:10px 10px 10px 10px;}
/*CHANGED LINKS*/
.content a, .submit a {background: #bbbbbb; border: #333333 2px solid; color: #333333; padding: 2px;}
.content a:hover, .submit a:hover {background: #bbbbbb; border: #333333 2px solid; color: #ffffff; padding: 2px;}
.pages li a {background: #bbbbbb; border: #333333 2px solid; color: #333333;}
.pages li a:hover {background: #bbbbbb; border: #333333 2px solid; color: #ffffff;}
.current a {background: #bbbbbb; border: #333333 2px solid !important; color: #ffffff !important;}
/*CHANGED SIZES*/
.comments .comment {width: 330px;}
.submit a {height: auto;}
.bCarousel {height: 75px;}
/*HEADER CHANGES*/
h3 {color: #cd0000; border-bottom: #1600FF 2px solid;}
/*MISC*/
.about, .content.lft, #wrp {padding: 5px;}
[029]
Here are some resources that may help you with your profile making.
Graphic Programs
GIMP - Free
Inkscape - Free
Paint.NET - Free
Adobe Photoshop CS5 - Free Trial
Corel - Free Trial
Paint Shop Pro - Free Trial
Image Hosts
Photobucket
Imageshack
TinyPic
Online Resources
w3schools - Learn anything and everything about CSS here
Hex Hub - Hundreds of hexadecimal color codes.
Ernya Resources
Editable Navigation Bar - By Verse
Free Profile Threads
Tailored Schematics in League
Yet Another Free Profile Dropoff
Se7en's Pre-made Profiles
Don't Touch Me There! Free Profiles
Handmade Freebies
Submit a Resource
PM me with the following form if you'd like to add a resource!
Here are some resources that may help you with your profile making.
Graphic Programs
GIMP - Free
Inkscape - Free
Paint.NET - Free
Adobe Photoshop CS5 - Free Trial
Corel - Free Trial
Paint Shop Pro - Free Trial
Image Hosts
Photobucket
Imageshack
TinyPic
Online Resources
w3schools - Learn anything and everything about CSS here
Hex Hub - Hundreds of hexadecimal color codes.
Ernya Resources
Editable Navigation Bar - By Verse
Free Profile Threads
Tailored Schematics in League
Yet Another Free Profile Dropoff
Se7en's Pre-made Profiles
Don't Touch Me There! Free Profiles
Handmade Freebies
Submit a Resource
PM me with the following form if you'd like to add a resource!
- Show Spoiler
-
Code:[b]Type of Resource:[/b]
[b]Resource Name:[/b]
[b]Resource URL:[/b]
[030]
Guide Link
Other Links
Want your profile shop listed here? PM me with your button! Must be 88x31 pixels or 200x40 pixels in dimensions.
Guide Link
- Show Spoiler
-
Code:[url=http://www.ernya.com/-t174284.html][img]http://i1202.photobucket.com/albums/bb374/SamAtErnyaThreads/Guide/Button.png[/img][/url]
Other Links
Want your profile shop listed here? PM me with your button! Must be 88x31 pixels or 200x40 pixels in dimensions.
Users browsing this topic: and 1 guests