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
[001]
Wanting to create your own fancy Ernya Profile? Well this guide should give you everything you need to create your dream profile. This guide will cover (hopefully) everything you need to know about creating your profile.
Have a suggestion on what to add into the guide? Post it here!
Remember: Ctrl + F is your friend here! Use it to search for each post using the code provided. Each code has brackets around it, so don't forget those when searching!
Page One - Intro and Sections
Welcome/Navigation - Welcomes you to this guide, as well as gives you our navigation for this thread. - [001]
An Introduction to CSS - Don't know what CSS is? Check this out first! - [002]
The Sections - Get a visual on the sections of our Ernya profiles. - [003]
Copy and Paste - Copy some common codes that are frequently asked for. - [004]
Page Body - Customize the full body of your profile. - [005]
Stats and Info - Customize your avatar, stats and contact buttons. - [006]
About - Customize your about section. - [007]
Comments - Customize your comments section. - [008]
Buddy List - Customize your buddy list. - [009]
Wishlist - Customize your wishlist. - [010]
Sticker Box - Customize the box that holds your stickers. - [011]
Footer - Customize the drop-down footer of your profile. - [012]
Squad Chat - Customize the squad, friend and notification chat/update feature. - [013]
YouTube Media - Adding music through YouTube videos to your profile. - [014]
Custom Sections - Create custom sections via the about me section. - [015]
Page Two - Properties and Links
Backgrounds - Learn the usage of backgrounds. - [016]
Borders - Learn the usage of borders. - [017]
Text - Learn the usage of text effects. - [018]
Links - Learn the usage of link effects. - [019]
Positions - Learn the usage of position codes. - [020]
Other Properties - Other properties such as opacity, padding, etc. - [021]
Font List - A list of fonts that are good for all browsers. - [022]
Reserved - Reserved posts for additional content. - [023] through [027]
Profile Shell - Use this premade profile to customize your own! - [028]
Helpful Resources - Free resources for you to use when coding and graphic making. - [029]
Other Links - Other helpful links for you to check out. - [030]
Wanting to create your own fancy Ernya Profile? Well this guide should give you everything you need to create your dream profile. This guide will cover (hopefully) everything you need to know about creating your profile.
Have a suggestion on what to add into the guide? Post it here!
Remember: Ctrl + F is your friend here! Use it to search for each post using the code provided. Each code has brackets around it, so don't forget those when searching!
Page One - Intro and Sections
Welcome/Navigation - Welcomes you to this guide, as well as gives you our navigation for this thread. - [001]
An Introduction to CSS - Don't know what CSS is? Check this out first! - [002]
The Sections - Get a visual on the sections of our Ernya profiles. - [003]
Copy and Paste - Copy some common codes that are frequently asked for. - [004]
Page Body - Customize the full body of your profile. - [005]
Stats and Info - Customize your avatar, stats and contact buttons. - [006]
About - Customize your about section. - [007]
Comments - Customize your comments section. - [008]
Buddy List - Customize your buddy list. - [009]
Wishlist - Customize your wishlist. - [010]
Sticker Box - Customize the box that holds your stickers. - [011]
Footer - Customize the drop-down footer of your profile. - [012]
Squad Chat - Customize the squad, friend and notification chat/update feature. - [013]
YouTube Media - Adding music through YouTube videos to your profile. - [014]
Custom Sections - Create custom sections via the about me section. - [015]
Page Two - Properties and Links
Backgrounds - Learn the usage of backgrounds. - [016]
Borders - Learn the usage of borders. - [017]
Text - Learn the usage of text effects. - [018]
Links - Learn the usage of link effects. - [019]
Positions - Learn the usage of position codes. - [020]
Other Properties - Other properties such as opacity, padding, etc. - [021]
Font List - A list of fonts that are good for all browsers. - [022]
Reserved - Reserved posts for additional content. - [023] through [027]
Profile Shell - Use this premade profile to customize your own! - [028]
Helpful Resources - Free resources for you to use when coding and graphic making. - [029]
Other Links - Other helpful links for you to check out. - [030]
QuoteLast edited by Sam on Sun Mar 18, 2012 4:20 pm; edited 4 times in total
[002]
Now, what is CSS exactly? CSS, or Cascading Style Sheet, is used to add style to a web page. As used here, "style" is defined as the changing of a position, look or function of a section.
Now there are many different parts to CSS coding. We will use a background color to the body of the page as an example.
body {background-color: #ffffff;}
There are 2 main parts: selectors and declarations.
The selector, in this case, is "body", while the declaration is "{background: #ffffff;}". Declarations should always be opened with a "{" and closed with a "}".
Declarations, then, are divided into "properties" and "values". The property, in the case above, would be "background-color", while the value is "#ffffff". Properties should always have a ":" after them, while values should have a ";" after them.
Selectors can also be combined. To do this you would put a comma after every selector. An example would be "body, #wrp {}".
You can also place more than one declaration in the brackets. If you wanted to add a background and border to the same selector you would use the following: "#wrp {background-color: #ffffff; border: #000000 1px solid;}". As always, every declaration must end with a ";".
Now, what is CSS exactly? CSS, or Cascading Style Sheet, is used to add style to a web page. As used here, "style" is defined as the changing of a position, look or function of a section.
Now there are many different parts to CSS coding. We will use a background color to the body of the page as an example.
body {background-color: #ffffff;}
There are 2 main parts: selectors and declarations.
The selector, in this case, is "body", while the declaration is "{background: #ffffff;}". Declarations should always be opened with a "{" and closed with a "}".
Declarations, then, are divided into "properties" and "values". The property, in the case above, would be "background-color", while the value is "#ffffff". Properties should always have a ":" after them, while values should have a ";" after them.
Selectors can also be combined. To do this you would put a comma after every selector. An example would be "body, #wrp {}".
You can also place more than one declaration in the brackets. If you wanted to add a background and border to the same selector you would use the following: "#wrp {background-color: #ffffff; border: #000000 1px solid;}". As always, every declaration must end with a ";".
[003]
Never customized an Ernya profile before? Well, before we get into customizing things we should go over what your profile actually contains. To get to your profile you can click your avatar at the top right of the page.
A profile is a page on Ernya that you can make your own. You can have anything on them, as long as it follows the rules. Do you like the color purple? Let's throw in a purple background! Make artwork? We can display it in your About Me section. There is virtually no limits to making your profile the way you'd like it to be.
As you can see from above we have many sections to our profiles. These sections can be decorated, and moved, with CSS. Throughout this profile we will refer to this image to help you understand where we are on your profile page.
Never customized an Ernya profile before? Well, before we get into customizing things we should go over what your profile actually contains. To get to your profile you can click your avatar at the top right of the page.
A profile is a page on Ernya that you can make your own. You can have anything on them, as long as it follows the rules. Do you like the color purple? Let's throw in a purple background! Make artwork? We can display it in your About Me section. There is virtually no limits to making your profile the way you'd like it to be.
As you can see from above we have many sections to our profiles. These sections can be decorated, and moved, with CSS. Throughout this profile we will refer to this image to help you understand where we are on your profile page.
[004]
#helper-wrap {background: transparent;} - Removes the Sylfee background/banner.
#board {display: none;} - Removes navigation tabs, currency bar, etc.
#ft {display: none;} - Removes the drop-down footer and footer links.
h1 {display: none;} - Removes the invisible homepage link at the top left of the header.
h3 {display: none;} - Removes all title headers from your profile.
.wR {background: transparent;} - Removes the button caps from the "add to buddy list, trade, etc" buttons.
#wrp {background: transparent; border: none;} - Makes the white background/blue border of Ernya's content wrap transparent.
#helper-wrap {background: transparent;} - Removes the Sylfee background/banner.
#board {display: none;} - Removes navigation tabs, currency bar, etc.
#ft {display: none;} - Removes the drop-down footer and footer links.
h1 {display: none;} - Removes the invisible homepage link at the top left of the header.
h3 {display: none;} - Removes all title headers from your profile.
.wR {background: transparent;} - Removes the button caps from the "add to buddy list, trade, etc" buttons.
#wrp {background: transparent; border: none;} - Makes the white background/blue border of Ernya's content wrap transparent.
[005]
The body is everything that is inside the red borders. Here are some selectors you may use to style your page body:
body - The basic code for the body of the page.
#doc - All content excluding the #helper-wrap and body backgrounds.
#helper-wrap - The graphic header with clouds.
#wrp - The content wrap of your profile.
#board - All navigation links, currency bars, etc.
#nav - Your site navigation buttons.
#nav .home a - The "Home" button.
#nav .games a - The "Games" button.
#nav .trade a - The "Trade" button.
#nav .forum a - The "Forum" button.
#nav .donate a - The "Donate" button.
#nav .shops a - The "Shops" button.
#nav .inv a - The "Inventory" button.
#nav .inbox a - The "Inbox" button.
#hd #reward - The fortune marble.
#av - The avatar of the person viewing your profile.
.currency - The currency bars.
#forum .pt - The "News" image.
#bc li a - The "Sticker Hall", "Settings" and "Username (Log out)" links.
h1 - The Ernya link in the top left corner of your header.
h3 - The headers of every section.
The body is everything that is inside the red borders. Here are some selectors you may use to style your page body:
body - The basic code for the body of the page.
#doc - All content excluding the #helper-wrap and body backgrounds.
#helper-wrap - The graphic header with clouds.
#wrp - The content wrap of your profile.
#board - All navigation links, currency bars, etc.
#nav - Your site navigation buttons.
#nav .home a - The "Home" button.
#nav .games a - The "Games" button.
#nav .trade a - The "Trade" button.
#nav .forum a - The "Forum" button.
#nav .donate a - The "Donate" button.
#nav .shops a - The "Shops" button.
#nav .inv a - The "Inventory" button.
#nav .inbox a - The "Inbox" button.
#hd #reward - The fortune marble.
#av - The avatar of the person viewing your profile.
.currency - The currency bars.
#forum .pt - The "News" image.
#bc li a - The "Sticker Hall", "Settings" and "Username (Log out)" links.
h1 - The Ernya link in the top left corner of your header.
h3 - The headers of every section.
[006]
Next comes your stats and info. This is everything inside the pink border.
.sb.lft h3 - Your username header.
.sb.lft - Your avatar.
.content.lft - Your stats, username header and contact buttons.
.content ul - Your stats individually.
.content ul li - Each individual line of your stats.
.content a strong - The link to view all your posts.
ul.z - Your buttons as a whole.
.z a, a.z - Your buttons individually.
Next comes your stats and info. This is everything inside the pink border.
.sb.lft h3 - Your username header.
.sb.lft - Your avatar.
.content.lft - Your stats, username header and contact buttons.
.content ul - Your stats individually.
.content ul li - Each individual line of your stats.
.content a strong - The link to view all your posts.
ul.z - Your buttons as a whole.
.z a, a.z - Your buttons individually.
[008]
Your comments section is everything inside the dark blue border.
.comments - Your Comments Section.
.comments h3 - "Leave 'Username' a Comment" header.
.comments .poster - The avatar thumbnail of those who post a comment.
.comments .comment - A single comment.
ul.comments li.bubble.comment span.tail - The tail on the comment box.
.comment ul - The date, time and name of those who comment.
.pages - Your page numbers.
.pages li a - A page link.
.current a - The current page number link.
.post_msg - Used for moving your comment text box.
.post_msg textarea - Used for styling your comment text box.
.submit a - Your submit button.
Your comments section is everything inside the dark blue border.
.comments - Your Comments Section.
.comments h3 - "Leave 'Username' a Comment" header.
.comments .poster - The avatar thumbnail of those who post a comment.
.comments .comment - A single comment.
ul.comments li.bubble.comment span.tail - The tail on the comment box.
.comment ul - The date, time and name of those who comment.
.pages - Your page numbers.
.pages li a - A page link.
.current a - The current page number link.
.post_msg - Used for moving your comment text box.
.post_msg textarea - Used for styling your comment text box.
.submit a - Your submit button.
[009]
Your Buddy List is everything inside the green border.
.bCarousel - Your Buddy List.
.bCarousel .wrapper - The slider that holds your buddies.
.bCarousel ul a img - The avatar of your buddy.
.bCarousel a.back - Your back arrow.
.bCarousel a.forward - Your forward arrow.
Your Buddy List is everything inside the green border.
.bCarousel - Your Buddy List.
.bCarousel .wrapper - The slider that holds your buddies.
.bCarousel ul a img - The avatar of your buddy.
.bCarousel a.back - Your back arrow.
.bCarousel a.forward - Your forward arrow.
[011]
Your sticker box is everything inside the purple border.
#sticker-box - Your sticker display box.
#sticker-header - The header of your sticker box.
#sticker-header-inner - The turned-over tab on the right of your sticker box header.
#sticker-header-inner p - "____'s Stickers Collection".
.sticker-list - The box containing your stickers.
.sticker-list ul - The stickers themselves.
Your sticker box is everything inside the purple border.
#sticker-box - Your sticker display box.
#sticker-header - The header of your sticker box.
#sticker-header-inner - The turned-over tab on the right of your sticker box header.
#sticker-header-inner p - "____'s Stickers Collection".
.sticker-list - The box containing your stickers.
.sticker-list ul - The stickers themselves.
[012]
Your footer is everything inside the orange border.
.footer-controller - The background of your pull-down footer link.
.footer-controller a - The link of the pull-down footer.
.footer-links-wrap - The footer itself.
.footer-section - The left and right sections of your footer.
.footer-row - The left-to-right rows of your footer sections.
.footer-column - Single footer sections.
.footer-row ul a - The basic links of your footer.
.shop-links ul li a - Shop Links.
.donation-preview a - The donation items and countdowns.
.donation-preview a span - The donation item names.
.footer-column .limited-links a em - The donation item countdowns.
Your footer is everything inside the orange border.
.footer-controller - The background of your pull-down footer link.
.footer-controller a - The link of the pull-down footer.
.footer-links-wrap - The footer itself.
.footer-section - The left and right sections of your footer.
.footer-row - The left-to-right rows of your footer sections.
.footer-column - Single footer sections.
.footer-row ul a - The basic links of your footer.
.shop-links ul li a - Shop Links.
.donation-preview a - The donation items and countdowns.
.donation-preview a span - The donation item names.
.footer-column .limited-links a em - The donation item countdowns.
[013]
Your footer is everything inside the dark red border.
#cw-title - Your squad chat box.
div#cw ul - The background behind your squad buttons.
div#cw-title ul li a - Inactive buttons.
div#cw-title li em - The number box of all buttons. (Inactive and active)
div#cw-title ul li.ui-state-active a - Active squad button.
div#cw-title .cw-friends.ui-state-active - Active friends button.
div#cw-title .cw-friends.ui-state-active - Active notifications button.
div#cw-controls - The controls on the right side when closed. (+ button and ^ button)
div#cw-controls a.toggle1.expand:active - The "+" button when closed
div#cw-controls a.toggle1:active - The "-" button when expanded.
div#cw.compact div#cw-controls a.toggle2:active - The "^" button when up
div#cw-controls a.toggle2:active - The "v" button when down.
div.cw-black-box - The black upper box of the squad chat.
div.cw-friendlist .col h4 - The "Online" and "Offline" headers.
.online group - The users who are online.
.offline group - The users who are offline.
div#cw .right .cw-margin ul - The gold stats on the right side.
#cw .cw-action-buttons - The "Invite/Change Squad Leader/Expel/Disband Squad" bar.
#cw .cw-action-buttons a - Each individual link. (Invite/Change Squad Leader/etc.)
div#cw .right .cw-margin - The chat box.
div#cw-footer textarea - The text area for your chat box.
div.cw-chatview .bottom-fade - The bottom fade background of your chat box.
Your footer is everything inside the dark red border.
#cw-title - Your squad chat box.
div#cw ul - The background behind your squad buttons.
div#cw-title ul li a - Inactive buttons.
div#cw-title li em - The number box of all buttons. (Inactive and active)
div#cw-title ul li.ui-state-active a - Active squad button.
div#cw-title .cw-friends.ui-state-active - Active friends button.
div#cw-title .cw-friends.ui-state-active - Active notifications button.
div#cw-controls - The controls on the right side when closed. (+ button and ^ button)
div#cw-controls a.toggle1.expand:active - The "+" button when closed
div#cw-controls a.toggle1:active - The "-" button when expanded.
div#cw.compact div#cw-controls a.toggle2:active - The "^" button when up
div#cw-controls a.toggle2:active - The "v" button when down.
div.cw-black-box - The black upper box of the squad chat.
div.cw-friendlist .col h4 - The "Online" and "Offline" headers.
.online group - The users who are online.
.offline group - The users who are offline.
div#cw .right .cw-margin ul - The gold stats on the right side.
#cw .cw-action-buttons - The "Invite/Change Squad Leader/Expel/Disband Squad" bar.
#cw .cw-action-buttons a - Each individual link. (Invite/Change Squad Leader/etc.)
div#cw .right .cw-margin - The chat box.
div#cw-footer textarea - The text area for your chat box.
div.cw-chatview .bottom-fade - The bottom fade background of your chat box.
[014]
Yep, you probably want to add music to your about section, don't you? Well for now we can only add YouTube videos. I'm not sure if playlists work quite yet. To add a YouTube video to your about section just put the URL of the video in [youtube]URL HERE[/youtube] tags.
.about object {margin-top: -1500px; margin-left: -1500px; position: absolute;} - Makes the YouTube video for music hidden.
.about embed, .about object {height: 25px; width: 29px;} - Makes your YouTube video just the single play/pause button. This only works with select browsers.
The following are things to add to the end of your YouTube video URL. The following is what you'd do to use the "&autoplay=1" code.
&autoplay=1 - Autoplays your YouTube video. Add this to the end of the URL of the video. Warning: Autoplaying in profiles is sometimes frowned upon, and this is not allowed in the forums.
&loop=1 - Continuously loops your YouTube video. Add this to the end of the URL of the video.
&rel=0 - Removes the "related videos" links at the end of the video.
&color1=XXXXXX - Changes the color of the border of your video. Change the X's to a hexadecimal code without a #.
&color2=XXXXXX - Changes the color of the background of your video. Change the X's to a hexadecimal code without a #.
Yep, you probably want to add music to your about section, don't you? Well for now we can only add YouTube videos. I'm not sure if playlists work quite yet. To add a YouTube video to your about section just put the URL of the video in [youtube]URL HERE[/youtube] tags.
.about object {margin-top: -1500px; margin-left: -1500px; position: absolute;} - Makes the YouTube video for music hidden.
.about embed, .about object {height: 25px; width: 29px;} - Makes your YouTube video just the single play/pause button. This only works with select browsers.
The following are things to add to the end of your YouTube video URL. The following is what you'd do to use the "&autoplay=1" code.
Example wrote:[youtube]http://www.youtube.com/watch?v=RANDOMCODEHERE&autoplay=1[/youtube]
&autoplay=1 - Autoplays your YouTube video. Add this to the end of the URL of the video. Warning: Autoplaying in profiles is sometimes frowned upon, and this is not allowed in the forums.
&loop=1 - Continuously loops your YouTube video. Add this to the end of the URL of the video.
&rel=0 - Removes the "related videos" links at the end of the video.
&color1=XXXXXX - Changes the color of the border of your video. Change the X's to a hexadecimal code without a #.
&color2=XXXXXX - Changes the color of the background of your video. Change the X's to a hexadecimal code without a #.
[015]
Custom sections are a little tricky when you first start making them. We use the about section to make as many as you want. You can have any amount of them, but it's tough to keep track of them sometimes.
We use unordered/ordered lists to create custom sections. Unordered lists use just normal [list][/list] tags in the about me section, and then uses .about ul {} in the Custom CSS box. Ordered lists use [list=1][/list=1] tags in the about me section, and then uses .about ol {} in the Custom CSS box. I usually use ordered lists to start, and then if I want to make it fancier I'd put unordered list in an ordered list.
Now, let's try it. First start by putting this into your about me section.
Ok, we now have the start of the custom section. But maybe we want 2 sections, not one? We add another list!
Alright. We're ready. Now let's style it with CSS. Start with the first section.
Alright, there's our first section code. Style it how you'd like. Don't worry about the second section, we'll get to that.
Next create another one of the same code but now, since we want to use the 2nd custom section, we will add another "ol".
Then you may style it the way you want. And, voila! We have 2 custom sections.
Custom sections are a little tricky when you first start making them. We use the about section to make as many as you want. You can have any amount of them, but it's tough to keep track of them sometimes.
We use unordered/ordered lists to create custom sections. Unordered lists use just normal [list][/list] tags in the about me section, and then uses .about ul {} in the Custom CSS box. Ordered lists use [list=1][/list=1] tags in the about me section, and then uses .about ol {} in the Custom CSS box. I usually use ordered lists to start, and then if I want to make it fancier I'd put unordered list in an ordered list.
Now, let's try it. First start by putting this into your about me section.
Code:[list=1]First Section Here
[/list]
Ok, we now have the start of the custom section. But maybe we want 2 sections, not one? We add another list!
Code:[list=1]First Section Here
[list=1]Second Section Here
[/list][/list]
Alright. We're ready. Now let's style it with CSS. Start with the first section.
Code:.about ol {declarations here}
Alright, there's our first section code. Style it how you'd like. Don't worry about the second section, we'll get to that.
Next create another one of the same code but now, since we want to use the 2nd custom section, we will add another "ol".
Code:.about ol ol {declarations here}
Then you may style it the way you want. And, voila! We have 2 custom sections.
Users browsing this topic: and 1 guests