Code MyFreeCams Profiles
Designing MyFreeCams Profiles
If you want to dive into creative process of coding and developing custom designs you'll need some tools to help you.
We recommend
CGC Editor - helps with HTML/CSS markup editing. Online basic source Editor
Adobe Dreamweaver - will help with HTML/CSS markup editing program. It is a commercial/trial downloadable program, popular among Windows users
Notepad++ - helps with HTML/CSS markup editing. It is a free downloadable program, popular among Windows users
Atom, Brackets, Komodo Edit, jEdit, Vim, TextMate, Sublime Text, BBEdit - helps with HTML/CSS markup editing. Some of this editors are free, some are commercial/trial. Editors for MAC users
IDs and CLASS - external css
MyFreeCams is using their own IDs and CLASS with external CSS style sheat. A good starting point is to know which are those IDs and CLASS, their css atributes and what exactly they do.
| CLASS and ID | FUNCTION | TWEAK |
|---|---|---|
div#profile_header.profile_section |
avatar, status, last login container | you can hide this using {display:none;} |
div#profile_main_about_holder.profile_row |
main photo, recent photos, About Me info container | can be edited |
div#profile_main_photo |
main photo, recent photo container | you can hide this using {display:none;} |
div#profile_about_me_friends.profile_section |
all content from About Me info box including friends section and rate function | can be edited |
div#profile_about_me.profile_subsection |
only About Me info box content | can be edited |
#five_things_container#profile_interests_content#for_fun_container#craziest_thing_container |
containers | can be edited, font size, style, color |
#username_label |
Username: | appears in About Me section |
#gender_label |
Gender: | result displays: Male or Female |
#body_type_label |
Body Type: | Slim/Petite, Avrage.... |
#ethnicity_label#hair_label#eyes_label#weight_label#height_label#age_label#country_label#sexual_preference_label#smoke_label#drink_label#marital_status_label#be_anywhere_container#know_me_container#photo_gallery_previews#photo_galleries#occupation_label#cam_score_label#city_label#drugs_label#school_label#favorite_food_label#pets_label#automobile_label |
all labels from About Me info section | can be edited, font style, hover effect, background color |
#username_value#gender_value#body_type_value#ethnicity_value#hair_value#eyes_value#weight_value#height_value#age_value#country_value#sexual_preference_value#smoke_value#drink_value#marital_status_value#occupation_value#cam_score_value#city_value#drugs_value#school_value#favorite_food_value#pets_value#automobile_value |
corespondend values | same as labels, css attributes can be tweaked |
#about_me_label.profile_section_content .heading |
header title About Me section | can be hidden by adding {opacity:0;} |
#profile_about_me |
container About Me section | can be edited, font-size, color, font-style, background |
#five_things_label#for_fun_label#craziest_thing_label#be_anywhere_label#know_me_label |
header titles can be hidden | you can hide this using {display:none;} |
.content |
content section | can be edited, no background image, no borders {background: none;border:0px;} |
.heading |
the Title area for all sections | hide by using {display:none;} or { opacity:0;} |
.userShow |
Premium, Registered, Model | shows the status of the page owner |
#header_bar |
shows header default MFC Links | you can hide this using {display:none;} |
#profile_header#profile_label |
shows the header content, main title/ label for the content boxes | you can hide this using {display:none;} |
.profile_section_content |
main content boxes | can be edited{background-color:rgba(0,0,0,0.7);This demo markup for container uses a black background color with opacity, no borders and white color of the font |
#profile_friends |
Friends and Rating section | can be edited |
#profile_friends_label,.profile_friends_label
#profile_friends_value,.profile_friends_value
#rate_container,#average_rating_container |
each element inside Friends and Rate section | can be edited |
#profile_photo_galleries_img#profile_photo_galleries_img:hover.photo_gallery_image.photo_gallery_image:hover |
image gallery | image gallery thumbnail and hover css styling can be applied |
#profile_photo_galleries a:link#profile_photo_galleries a:hover#profile_photo_galleries a:visited |
links css style to gallery thumbnail previews | can be edited using custom font colors |
#footer_bar |
default MFC links in footer section | you can hide this using {display:none;} |
img |
a tweak, I've added it myself because IE adds a border to some images | remove border for images in IE {border:0;} |
.photo_gallery_name |
shows the name of the gallery | can be edited |
.photo_gallery_lock |
password protected gallery, image can be replaced | can be edited |
#avatar_holder |
Avatar's container | can be edited |
.label |
title of the section | can be edited |
.value |
the content value of the label | custom css style can be applied |
.user_comment_textarea_small |
user comment type in box | when not used it shows smaller |
.user_comment_textarea_big |
user comment type in box | when used can become bigger |
div#comments |
comment section | css style can be added |
#profile_interests_content .label |
Interests and Hobbies title section | can be hidden using {display:none;} |
.wall_post_avatar |
shows the avatar in comment section | can be edited |
.wall_post_avatar img.wall_post_avatar img:hover |
css style applied when hover | if a user doesn't use an avatar on their profile when posting comments, a image can be added in css code as background image using {background: url('image-url-path') no-repeat center;} |
.wall_post_info |
shows the header of individual comments | holds commenter's Username/link |
.wall_post_info a:link.wall_post_info a:visited.wall_post_info a:hover |
links/ Username in comment section | can be edited |
.wall_post_info a:hover:after |
custom tweak, shows another element when hover | can be edited{content:'« Visit Profile';
width:110px;height:20px;margin-left:2px; |
.wall_post_time |
shows comment timestamp | can be edited or removed {display:none;} |
.wall_post_body |
box holding User's comment | can be edited using css style codes |
.header_links,.footer_links |
shows header and footer default MyFreeCams links | can be edited or removed {display:none;} |
#tags_label#tags_value |
shows tags on MyFreeCams profile | can be edited |
| Basic CSS | ||
a:linka |
global css style for links | can be edited |
a:hover |
global css style for links when pointer over element (mouseover) | can be edited |
a:visited |
link style after link is visited | can be edited |
body |
main body element of the page | can be edited |
| Custom tweaks | ||
| CSS CODE | DESCRIPTION | TWEAK EXAMPLES |
body{margin:0 auto;width:80%!important;} |
margin: 0 auto makes the layout centered width 80% defines the width of the layout (narrow-centered layout) |
body{margin:0 auto;width:90!important;} - narrow centered layoutbody{margin:0 auto;width:100%!important;} - wide centered layout |
body{margin-top:200px;} |
moves the profile layout from top with 200px | body{margin-top:300px;} - moves the profile down with 300pxbody{margin-top:400px;} - moves the profile down with 400pxbody{margin-top:5%;} - moves the profile down with 5% |
| Custom IDs and CLASS can be added |
Code Snippets
MyFreeCams is a flexible platform and use of CSS markup in external box is allowed. Please always review your markup before installing it on MyFreeCams. Make sure that both the HTML and CSS markup codes are properley formated.
Markup code
The above markup is using HTML tags with and a custom class defined by class="gr-12"
CSS properties assigned to this class are added between style tags
Editing Tips
Our suggestions for fast editing and viable markup rendering
1. Make sure your custom css has all closing tags in place.
2. If you are using images in css markup code, don't forget to upload them online before installing your custom codes on MyFreeCams.
3. For a fluid layout, consider to use resizable values as much as possible like
% rem em vh vw...4. Recommended is to test all markup codes before using them on MyFreeCams
