Voltra Profile Help Thread - New Profile Template!

Prodigy

Friend PM Trade

Hello there! Welcome to the Voltra Profile Help thread. This is a place for everyone to share tips and tricks about coding, profile making, graphic creation, and anything else! Check out some of the valuable resources below. If you're having troubles, need a question answered, or have a trick you want to share with us please feel free to ping me so I can add it to this thread!

Prodigy

Friend PM Trade

Time to start your profile adventure!

Profiles on Voltra Online are surprisingly easy to customize compared to other avatar sites. Within our profile settings area you can set a background color for both the page and the content area. This is an easy way to add a spin on your profile without knowing any coding.

However, lots of people prefer to move sections around, add images or links, etc. in order to make your profile truly yours. This guide is here for you to explore the world of HTML, CSS, and graphic making while also allowing you to show off your creative endeavors!

Prodigy

Friend PM Trade

LEARN HTML AND CSS
HTML | CSS
Don't know HTML or CSS? Check out w3schools! They're an awesome resource that walks you through how to do the basics of each coding language.

BEST WAY TO FIND CSS SELECTORS
Firebug for Firefox | Developer Tools for Chrome | Web Inspector for Safari
All of these wonderful tools will help you find those pesky CSS selectors! Selectors are the HTML "names" you target in order to apply CSS. These can be things like "body", ".voltie_avatar", or "#content".

In order to effectively use these tools, right click on the area of the page you want to style and click "inspect element". A popup will then appear for you to be able to see the elements within the page, along with the CSS that's already styling the page. You can also use this tool to add in your own CSS as a sort of "test preview". When you refresh it will go away, so it's just a way to preview what your CSS could look like.

FIND HEX CODES AND OTHER COLOR VALUES
HTML Color Codes | Color Blender | Pick Colors From Image
| Palette Generator From Image
Need to find a color for your background or text? Check out HTML Color Codes! They have an easy-to-use color picker that gives you all necessary values.

MESS WITH CSS
Speech Bubble Generator
Sometimes we just want to fiddle around with CSS to see what we can do! These are some useful links that can help you create new shapes and effects.

GET COOL FONTS
DaFont | Google Fonts
At times, the basic Roboto font just won't do for what we want to style. Instead of sticking with the basic sans-serif, try switching it up with a custom font!

Prodigy

Friend PM Trade

Can't figure out how to do something? Here's some common or useful CSS tricks that might help you out!

EFFECTS
:hover - Add this to any selector in order to give it a hover effect!
transition: 0.5s - This CSS declaration is an easy way to make hover effects fade or move smoothly.

COLORS
rgba(255,255,255,0.5) - Want to give your background transparency without effecting the text? Use RGBA! The first three numbers are the RGB color value while the last number is the opacity (from 0-1).

PSUEDO-CLASSES
Add any of these to the end of an element! They'll help you select specific elements or sets of elements.
:first-child - Selects every element that is the first child of its parent
:last-child - Selects every element that is the last child of its parent
:nth-child(#) - Selects every element that is the "#" child of its parent
:nth-last-child(#) - Selects every element that is the "#" child of its parent, starting from the last child

PSUEDO-ELEMENTS
Add these to any element to add content or select portions of an element!
::before - Insert content before an element
::after - Insert content after an element
::first-letter - Select the first letter of an element
::first-line - Select the first line of an element

Prodigy

Friend PM Trade

Utilizing these tools can be intimidating at first. There's so much to look at, what should you focus on?! Here's a basic tutorial on how to use the tool to help you with your profile building. Here I'm using Google Chrome's Inspect tool, but it should work similarly in other browsers!

STEP ONE
Right click on something and click "inspect element". Here I'm checking out my profile's "home" button within the top header menu.

STEP TWO
Once you inspect something, a pop-up should come up. It could be an actual pop-up window or at the bottom or side of your screen. I like to keep mine at the right side of my screen so I can easily check screen sizes by enlarging the window.

I've highlighted each of the important areas you'll want to focus on. This is by no means all of what these tools can do but it's just the things that you'll use the most as a beginner!

RED SECTION
The red section is what you selected within the HTML of the page. Here, you can see the "Home" button is within an unordered list. ("ul" tag with "li" elements containing "a" link elements) The "li", or list item, has an ID of #home, so this could be useful for defining your CSS.

PURPLE SECTION
The purple section is super helpful when you're not quite sure what HTML path to use in your CSS. This is basically a map to the element you're looking for. Here, it's saying that the "Home" button is located in the following path: #voltra body #structure #navbar div #main_nav ul li#home a
This can be useful in times when you have multiple of the same elements through a page but only want to target a certain group of them. For example, say I want to change all the main navigation list item links to the color purple but not any other links in the page. Then I could use "#main_nav ul li#home a" as the CSS selector.

BLUE SECTION
This little button is particularly helpful when working with hover states. Click this button and you can select if the current actively-inspected element should be displayed like when you hover over it. It makes it easy when testing CSS so you don't have to keep hovering over it again and again!

GREEN SECTION
The green section is super important. This is where you can see all calculated CSS that is affecting the element you're inspecting. What's awesome is that you can also input your own CSS here too! When you refresh it will go away, so it's just meant for testing or previewing a change, but it can be helpful when trying to figure out just how many pixels you want to move something by!

ORANGE SECTION
The last section is helpful when you're trying to figure out what is affecting the shape of whatever section you're inspecting. It will show any "position" declarations, such as "top/bottom/left/right", as well as margins, borders, and padding.

Prodigy

Friend PM Trade

If you haven't got the hang of CSS quite yet all of this can get really overwhelming! This is a quick run-through of the different elements and selectors that can be utilized within your profile. There are many more than just these, so if you're interested in learning more grab one of the developer tools we talked about earlier!

GENERAL PAGE BODY
body - Used for the general background of the page
h1, h2, h3, h4, h5, h6 - The header tags for throughout the page
#content - The background for the content wrapper/container

SITE NAVIGATION MENU
.navbar-inverse - The navigation bar background
.navbar-inverse .nav li a - The navigation links

HEADER
header.min - The header background
#header_stats .col-inner - The header user stat/personal link box
.currency_volts - The text displaying your volt count
.currency_ohms - The text displaying your ohm count
.dropdown button - The drop-down menus for notifications, trades, and friends
.label-danger - The notification counter
#user_card - Your avatar
#user_links ul li a - The profile/message/settings links
#header_navigation h3 - The "Explore Voltra's City" header
#header_navigation ul li a - The market and sewers links

AVATAR
.voltie_info - The avatar container
.voltie_info h2 - Your username header
.voltie_pronouns - The pronoun subheader
.voltie_actions a - The topic/post counter links

VIDEO
.voltie_video - The video container
.voltie_video h3 - The video header

ABOUT
.voltie_bio - The about container
.voltie_bio h3 - The about header

COMMENTS
.voltie_comments - The comments container
.voltie_comments h3 - The comments header
.voltie_comments img - The user avatars
.voltie_comments a - The username links
a.comment_delete - The "delete" button
.voltie_comments ul li p - The comment boxes
.voltie_comments ul li p:before - The comment "quote" triangle
.comments_load_more - The "load more" button
.voltie_comments textarea - The comment submission text box
.voltie_comments input[type=submit] - The submit button

LIKES/DISLIKES/HOBBIES
.voltie_likes - The likes container
.voltie_dislikes - The dislikes container
.voltie_hobbies - The hobbies container
.voltie_likes h3 - The likes header
.voltie_dislikes h3 - The dislikes header
.voltie_hobbies h3 - The hobbies header

FRIENDS
.voltie_friends - The friends container
.voltie_friends h3 - The friends header
.voltie_friends a img - The user avatars

FOOTER
footer - The footer background
footer h6 - The footer headers
.sitebio - The site "about" text
footer a - The links within the footer
.footer-col p i - The envelope icons
.footer-ul li a - The "a map around Voltra" links

FOOTER
.copyright - The copyright background
.copyright a - The copyright links

Prodigy

Friend PM Trade

Want to change up and customize your profile but don't know where to start? I've put together a simple CSS template for you to edit as you wish! The sections have been segmented out and color-blocked to easily distinguish between each area.

However, this profile is only for personal use. Please do not use this code with intent to redistribute or sell. Please do not remove the disclaimer at the top of the code.

/*PROFILE TEMPLATE CREATED BY PRODIGY FOR PERSONAL USE*/

/*You may change anything you'd like within the code below*/

/*This code cannot be redistributed and can only be used on your personal profile*/

/*Do not remove these copyright comments*/

/*START EDITING HERE*/

/*-----Page Body/Background-----*/

body {background: #fff; background-image: none;}

/*-----Overall Styling------*/

h1, h2, h3, h4, h5, h6 {text-transform: uppercase; letter-spacing: 1px;}

/*-----Site Navigation Menu-----*/

.navbar-inverse {background-color: #f26b6b !important; background-image: none !important; border: none !important;}

.navbar-inverse .nav li a {background: #fe9797; color: #000; text-shadow: none;}

.navbar-inverse .nav li a:hover {background: #cd3b3b; color: #fff; text-shadow: none;}

/*-----Header-----*/

header.min {background: #e78ebc !important;}

#header_stats .col-inner {background: #cf699e !important;}

#user_stats p, div.currency_volts {color: #fff !important;}

.dropdown button {background: #e78ebc !important; border: none; text-shadow: none;}

#user_card {background: #e78ebc !important; border: none !important; box-shadow: none !important;}

#user_links ul li a {color: #fff !important;}

#user_links ul li:hover {background: #e78ebc !important;}

.label-danger {background: #cf699e !important;}

#header_navigation h3 {color: #fff !important; text-shadow: none !important;}

#header_navigation ul li a {background: #fff !important; color: #cf699e !important; border: none !important;}

#header_navigation ul li a:hover {color: #fff !important; background: #cf699e !important;}

/*-----Content Container-----*/

#content {background: #ddd; border: 0px; box-shadow: none;}

.content_navigation li a {background: #ddd; border: #000 1px solid;; color: #000;}

.content_navigation li a:hover {background: #000; color: #ddd; border-color: #000;}

/*-----Avatar-----*/

.voltie_info {background: #d08ae4 !important; border: none !important;}

.voltie_info h2 {background: transparent !important; color: #fff !important;}

.voltie_pronouns {background: #e9b0f9 !important;}

.voltie_actions a {background: #e9b0f9 !important; color: #fff;}

.voltie_actions a:hover {background: #fff !important; color: #e9b0f9;}

/*-----Video-----*/

.voltie_video {background: #8278e3 !important; border: none !important; color: #fff;}

.voltie_video h3 {background: transparent !important; color: #fff !important;}

/*-----About-----*/

.voltie_bio {background: #76d3e1 !important; border: none !important; color: #fff;}

.voltie_bio h3 {background: transparent !important; color: #fff !important;}

/*-----Comments-----*/

.voltie_comments {background: #7bce6e !important; border: none !important; color: #fff;}

.voltie_comments h3 {background: transparent !important; color: #fff !important;}

.voltie_comments img {background: #a2ea96;}

.voltie_comments a {color: #5aa24f; font-weight: bold;}

a.comment_delete {color: #5aa24f !important;}

.voltie_comments ul li p {background: #a2ea96 !important; border: #5aa24f 1px solid !important; color: #000;}

.voltie_comments ul li p:before {border-right-color: #5aa24f !important;}

.comments_load_more, .voltie_comments input[type=submit] {background: #a2ea96 !important; text-shadow: none; border: none; box-shadow: none;}

.comments_load_more:hover, .voltie_comments input[type=submit]:hover {background: #fff !important; color: #a2ea96 !important;}

.voltie_comments textarea {background: #a2ea96; border: none; color: #000; box-shadow: none;}

/*-----Likes, Dislikes, and Hobbies-----*/

.voltie_likes, .voltie_dislikes, .voltie_hobbies {background: #f4e06f !important; border: none !important; color: #fff;}

.voltie_likes h3, .voltie_dislikes h3, .voltie_hobbies h3 {background: transparent !important; color: #fff !important;}

/*-----Friends-----*/

.voltie_friends {background: #f3b879 !important; border: none !important; color: #fff;}

.voltie_friends h3 {background: transparent !important; color: #fff !important;}

.voltie_friends a img {background: #fbd3a7;}

/*-----Footer-----*/

footer {background: #e78ebc; border: none;}

.sitebio {text-shadow: none !important;}

footer a {color: #fff !important; border: none !important;}

.footer-col p i {color: #cf699e !important;}

.footer-ul li a {background: #cf699e;}

.footer-ul li a:hover {color: #cf699e !important; background: #fff;}

footer h6 {color: #fff !important;}

/*-----Copyright------*/

.copyright {background: #f26b6b;}

Forums Voltra Discussion Voltra Profile Help Thread - New Profile Template!

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

Prodigy

You must be logged in to post