MyFreeCams Profile Help!

[AmberCutie]

Ok, first off, I don't know why so many new girls feel the MFC profile is so important to the point where they freak out and search out people to pay to help them. The built in MFC profile editor is simple and easy to use, and you DON'T need some elaborate CSS design to set up your MFC profile. Just answer the questions in the "edit profile" section of your admin pages, or leave them blank if you don't want them to appear, and use the "customize profile" link in your admin pages to change the appearance as you desire. You don't HAVE to have a fancy designed profile to let your viewers know what you're all about. The most important aspect of your MFC career is being ON cam and entertaining, not so much what's on your profile...

BUT, if you do want something fancy for some reason, let this thread be the place that you ask questions and find help for it.

Attention all MFC profile editors! Post a reply here if you have advice, services for hire, or helpful links for HTML and css design.

A few girls have gone to this site for basic help with HTML and CSS - http://www.w3schools.com/

I am going to direct all new models to this thread for info since we see at least 1 per week popping up asking for desperate "HELP!" on their MFC profiles.

Take it away, folks!

 

[SweetWitch]

Can I use this method for multiple div elements?

 

[Dan N]

Can I use this method for multiple div elements?

Yes but remember that each div element should have its unique id or class with its own attributes and css values.
--- exception is when you use a class to style-up a bunch of similar IDs ---
Example:
-if you have a store section with some css styles and inside the store section you have 12 items, you can use the same class(es) for all.
The CSS:

.item-wrapper{display:inline-block;width:33.33%;height:auto;text-align:center;margin:0 auto;padding:0px 0px 12px;}
.item-wrapper img{display:block;width:100%;height:auto;margin:0 auto 12px;}
.item-title{display:block;width:96%;padding:4px 11px;text-align:left;font-weight:bold;}
.item-tip{display:block;width:96%;text-align:center;padding:5px 11px;}

The HTML code inside the store section should look like this:

<div class="item-wrapper">
  <img src="full-url-path-of-preview-image" alt="Item thumbnail/>
<div class="item-title">Item Name</div>
<div class="item-tip"><a href="#">300 tokens</a></div>
</div>

<div class="item-wrapper">
  <img src="full-url-path-of-preview-image" alt="Item thumbnail/>
<div class="item-title">Item Name</div>
<div class="item-tip"><a href="#">300 tokens</a></div>
</div>

.....

multiple times

Note: this is a rough basic example of a handwritten markup code.
Bottom line, one css to multiple elements

 

[theaterdream]

Awesome, Dan. Thank you so much for the help!

It will be a while coming. She's deciding what she wants, and I'm blowing the cobwebs off. It is coming back to me, but more than anything, I need to make sure I am writing clean, mistake free code.

I don't think I'll need any HTML 5 to do what I'm wanting to do; mostly I'll be paying attention to any elements that might have been removed, and replaced with new elements. Many of the things that have been removed were already being controlled via CSS.

Nope, no external CSS, no @import ...

Indeed some HTML5 tags are not accepted by MFC core platform but not something to worry about.
<aside> , <section> , <video>, <nav> and few others will not work...
From my point of view those tags are not a problem. Successfully you can use CSS3, custom class and id elements for styling stuff.
Reflect, border radius, animations, text shadow, box shadow, mask, shapes and almost all CSS3 will work nicely with MFC.
Self-hosted fonts (Google webfont library works)
Note: tho most updated browsers are able to render the majority of html css markup it is not a bad idea to use browser prefix to CSS elements when available....some users might use old and non-updated browser versions. If you are familiar with CSS grid layout, it is a good suggestion to use it --- awesome for responsiveness of the page/layout
Good luck and let me know what you did when time comes.

 

[meterstick]

How do you make a new thread on this side??

 

[theaterdream]

Ok guys, this is all somewhat new to me. I've designed several sites before, but with those, obviously, I was writing all my own code from the ground up. This is such a nightmare, even with simplified CSS and using Chrome to inspect elements, because I'm having to go in, and hunt and peck my way through it.

The main div ID is profile. Since we're using the 'about me' section to design within, I'm basically wanting to hide everything else. As I can see, I'm needing to set the following IDs to display: none:

header_bar, profile_header, profile_comments, profile_friends, and footer_bar

This leaves me the following div id to work within:

profile_about_me

This inherits padding of 5 px of internal padding, and 5 px of external margin from the class profile_section_content.

Should I eliminate that padding, I should have a flush div to work within after I've eliminated all the individual div ids still contained within, such as username_container, gender_container, bodytype_container, etc.

Here's the dummy profile I am working from.

http://profiles.myfreecams.com/smoothNshiny

I'll eliminate the margin, which will get me pretty close to flush with the top of the page.

If you look at the CSS, you will see that except for the header and footer DIVs, I am listing the elements individually. This is just easier for me to read. Once I have everything down, I'll combine elements.

Am I basically going about this the right way, or is there something I've overlooking that's going to trip me up?

Thanks. I won't need a lot of hand holding, but this is just such a pain. It's like dealing with Myspace's wonky nested tables again. I'm having flashbacks!

 

[Dan N]

Ok guys, this is all somewhat new to me. I've designed several sites before, but with those, obviously, I was writing all my own code from the ground up. This is such a nightmare, even with simplified CSS and using Chrome to inspect elements, because I'm having to go in, and hunt and peck my way through it.

The main div ID is profile. Since we're using the 'about me' section to design within, I'm basically wanting to hide everything else. As I can see, I'm needing to set the following IDs to display: none:

header_bar, profile_header, profile_comments, profile_friends, and footer_bar

This leaves me the following div id to work within:

profile_about_me

This inherits padding of 5 px of internal padding, and 5 px of external margin from the class profile_section_content.

Should I eliminate that padding, I should have a flush div to work within after I've eliminated all the individual div ids still contained within, such as username_container, gender_container, bodytype_container, etc.

Here's the dummy profile I am working from.

http://profiles.myfreecams.com/smoothNshiny

I'll eliminate the margin, which will get me pretty close to flush with the top of the page.

If you look at the CSS, you will see that except for the header and footer DIVs, I am listing the elements individually. This is just easier for me to read. Once I have everything down, I'll combine elements.

Am I basically going about this the right way, or is there something I've overlooking that's going to trip me up?

Thanks. I won't need a lot of hand holding, but this is just such a pain. It's like dealing with Myspace's wonky nested tables again. I'm having flashbacks!

You could remove the padding but I don't understand what you want to achieve.
If you want to move all the About Me content at the very top of the browser page, you can play with body margin-top:-40px; its much more easier.
.profile_section_content {padding:0px;}
.content {padding:0px;}
Removes padding from all elements which uses those two classes.
Also you can try working with margin on .content class.
It is relative because I don't know what design you have in mind... concept of the layout and such.
btw you can use a reset like body,html,.profile_section_content,.heading {margin:0;padding:0;}
And give the necessary style attributes to the elements you design within About Me...

 

[theaterdream]

Thank you, Dan. I have an overall design layout and aesthetic in my mind, but as far as something tangible to show you yet, nothing. Right now my primary goal is/was to learn out to properly block out everything on the page, creating just one empty "div" where I could put everything. I'm just basically tinkering around under the hood, learning what goes where right now. I'm waiting on her to have her new pictures taken, because what I see will directly impact the visual style.

The body margin will be eliminated.

Much appreciated. Once I get a little more heavily into Photoshop, I'll get a clearer idea. I'm very visual in my design. I'll do my coding, and cross browser checking. Some things never change!

You could remove the padding but I don't understand what you want to achieve.
If you want to move all the About Me content at the very top of the browser page, you can play with body margin-top:-40px; its much more easier.
.profile_section_content {padding:0px;}
.content {padding:0px;}
Removes padding from all elements which uses those two classes.
Also you can try working with margin on .content class.
It is relative because I don't know what design you have in mind... concept of the layout and such.
btw you can use a reset like body,html,.profile_section_content,.heading {margin:0;padding:0;}
And give the necessary style attributes to the elements you design within About Me...

 

[Dan N]

Thank you, Dan. I have an overall design layout and aesthetic in my mind, but as far as something tangible to show you yet, nothing. Right now my primary goal is/was to learn out to properly block out everything on the page, creating just one empty "div" where I could put everything. I'm just basically tinkering around under the hood, learning what goes where right now. I'm waiting on her to have her new pictures taken, because what I see will directly impact the visual style.

The body margin will be eliminated.

Much appreciated. Once I get a little more heavily into Photoshop, I'll get a clearer idea. I'm very visual in my design. I'll do my coding, and cross browser checking. Some things never change!

MyFreeCams CSS Cheat Sheet --- this could be helpful, it is a bit old but I do work with it when is necessary.

To "disable" all elements but keep the About Me box, comment section you could use this css

#header_bar,#footer_bar,#about_me_label,#profile_main_photo,#profile_header_container,#profile_schedule,#profile_friends,#average_rating_container > div:nth-child(1),.label,.heading {
  display:none;
}

#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 {
  display:none;
}
.profile_section_background {
  display:none;
}

#photo_gallery_previews {
  display:none;
}
#no_profile_avatar {
  display:none;
}
#wall_poster_avatar,#wall_poster_username {
  display:none;
}

Makes the About Me / Bio box visible

#about_me_container,#about_me_value {visibility:visible!important;}

 

[TUSHAR JANI]

I like my profile page and I haven't even used the "css-thingy" to design it. It looks clean, but also very cute with the roses and stuff in the background

wow you have really very nice back ground can you sujjest me how i put this type of back grong on my page

 

[theaterdream]

Thank you, Dan.

 

[Dan N]

This method has never been used before . Using a YouTube video as background - header.
For experienced MFC profile coders / developers
The HTML markup

<div class="col-12 clte_header header-filter no">
  <div class="fullscreen-bg">
        <iframe src="https://www.youtube.com/embed/fAKI30i7iEE?controls=0&showinfo=0&rel=0&autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe></div>
  </div>

The CSS markup code

.col-12 {width: 100%;}
[class*="col-"] {float: left;padding: 15px;border: 0px solid #ccc;}
[class*="no"] {float: left;padding: 0;}

This is currently used on my MFC profile so I will explain both markups as they are used.
the CSS stuff first

.col-12 {width: 100%;}
[class*="col-"] {float: left;padding: 15px;border: 0px solid #ccc;}
[class*="no"] {float: left;padding: 0;}
.header-filter {position: relative!important;}.header-filter:after {position: absolute;z-index: 1;width: 101%!important;height: 100%;display: block;left: -1%;top: 0;content: "";background-color:rgba(0,0,0,0.2);}
.fullscreen-bg {position: relative!important;top: 0;right: 0;bottom: 0;left: -1%;overflow: hidden;z-index: -100;width: 102%!important;height: 660px;text-align:center;background-color:#000;padding:10px 10px;}.fullscreen-bg__video {position: relative!important;top: 0;left: -1%;width: 102%!important;height: 660px;overflow: hidden;padding:10px 10px;}.fullscreen-bg iframe,.fullscreen-bg embade{display:block;width:101%!important;height:auto;min-height:650px!important;margin:0 auto;padding:10px 10px;}

col-12 is part of the grid layout
no class removes the padding and float attributes used for col-12
clte_header - this is an additional class optional if I want to use a simple image instead of a video as background

.clte_header img{display:block;width:100%;height:auto;margin:0 auto;text-align:center;}.clte_header{margin:0 auto -80px auto;}

header-filter - class used to add a semi-transparent layer on top of the background video

.header-filter {position: relative!important;}.header-filter:after {position: absolute;z-index: 1;width: 101%!important;height: 100%;display: block;left: -1%;top: 0;content: "";background-color:rgba(0,0,0,0.2);}

That was only the wrapper and the top mask... now let's play with the video code.
The HTML is posted above, now the CSS markup

.fullscreen-bg {position: relative!important;top: 0;right: 0;bottom: 0;left: -1%;overflow: hidden;z-index: -100;width: 102%!important;height: 660px;text-align:center;background-color:#000;padding:10px 10px;}.fullscreen-bg__video {position: relative!important;top: 0;left: -1%;width: 102%!important;height: 660px;overflow: hidden;padding:10px 10px;}.fullscreen-bg iframe,.fullscreen-bg embade{display:block;width:101%!important;height:auto;min-height:650px!important;margin:0 auto;padding:10px 10px;}

iframe and embade are the generic default elements so in the .fullscreen-bg all embaded or iframe elements defined by iframe/embade tags will have the defined values.
Btw, i didn't added the responsive CSS

Youtube video parametrers [link]
controls=0 - no buttons displayed
showinfo=0 - removes the video title
rel=0 - disables the related videos when the video is done plaing
autoplay=1 - obvious, the video starts automatically when the page is loaded
loop=1 - for some reason the video doesn't loop but this is the necessary markup
modestbranding=1 - remove YouTube Branding


I know its a lot to "digest" but for awesome and original results with "wow" effect brain-storming is a must for creative MFC profile designers.

 

[crimson_lion]

Hey everyone!

I've been helping a few people out with their profile, and I've come across a weird issue.

whenever they add some CSS that is suppose to create a menu or a video bar, it instead just displays the HTML code. Whenever they change the CSS and try to fix it, it ends up just creating an entirely white profile, with just the text and HTML being displayed.

Has anyone else encountered this issue? Is it some issue with the CSS itself, or is it some bug within MFC that need to be address?


Any advice would be greatly appreciated!

Also, I should say this issue seems to only affect profiles that just start the "Advance CSS", as I have tested the code on my profile without any trouble.

Thank you in advance

 

[Dan N]

Did you inspect the code for missing closed tags?
It's a weird behavior indeed but yet... I'm guessing here because I don't have a live example with this issue for further inspection of the markup

 

[crimson_lion]

There is another page that had this issue, but for some strange reason the custom CSS works in it, but it seems to overwrite whatever was already there. I'll send you the profile.

EDIT:

Okay, so I'm still, so I can't send any messages.

Here is the link to the blank profile, but in this case the custom CSS is the only thing working: http://profiles.myfreecams.com/hideko

 

[Dan N]

There is another page that had this issue, but for some strange reason the custom CSS works in it, but it seems to overwrite whatever was already there. I'll send you the profile.

EDIT:

Okay, so I'm still, so I can't send any messages.

Here is the link to the blank profile, but in this case the custom CSS is the only thing working: http://profiles.myfreecams.com/hideko

A few tips. To force an element to override other preexisting elements you should add the custom CSS at the very end. There is a structure. Let's say we have 200 lines of CSS (an example)
In the css we have classes or ids if the same class exists in the CSS markup 3 times the browser will render the last one and complete the attributes with other too if necessary... I don't know how to better explain.

css here.... bla bla bla
.my_class{font-size:20px; color:green;text-shadow:0 1px 0 #333;}
css here bla bla bla bla bla bla
css here bla bla bla bla bla bla
css here bla bla bla bla bla bla
.my_class{font-size:20px; color:red;text-decoration:underline}
css here bla bla bla bla bla bla
css here bla bla bla bla bla bla
css here bla bla bla bla bla bla
css here bla bla bla bla bla bla
css here bla bla bla bla bla bla
css here bla bla bla bla bla bla
.my_class{font-size:15px;text-decoration:none}
css here bla bla bla bla bla bla
css here bla bla bla bla bla bla
css here bla bla bla bla bla bla

The browser will use this css to render via HTML related
.my_class{font-size:15px;color:red;text-decoration:none;text-shadow:0 1px 0 #333;}

Bottom line is, make sure your custom CSS is the last to give instructions to browser and if necessary use to force a class using !important ... hopefully you are familiar with !important rule

From your link I can't find something wrong ... I don't know what is suppose to render and it doesn't
Best of luck

 

[crimson_lion]

Yes, I agree that the code will be called at the end and I have used !important in the past, but this is the error that I see present in the CSS.

If you open up the Inspect in Chrome or Mozilla, and look at the class for ".profile_section_content .heading", you will see the following key info for the background color and font color:

.profile_section_content .heading {
....
background-color:#BCEC76;
color:#FFFFFF;
...
}

But if you look back at the page itself, it just shows the default with the background being white and the font being black for all the headers.

There is no other piece of code that is causing this issue, and it seems to be some error occurring. Is there some other code happening on MFC in the background that is acting as a default and causing this issue?


Also, I tested using important in Chrome Inspector, and it has no effect. Please test yourself to confirm.

 

[Dan N]

Yes, I agree that the code will be called at the end and I have used !important in the past, but this is the error that I see present in the CSS.

If you open up the Inspect in Chrome or Mozilla, and look at the class for ".profile_section_content .heading", you will see the following key info for the background color and font color:

.profile_section_content .heading {
....
background-color:#BCEC76;
color:#FFFFFF;
...
}

But if you look back at the page itself, it just shows the default with the background being white and the font being black for all the headers.

There is no other piece of code that is causing this issue, and it seems to be some error occurring. Is there some other code happening on MFC in the background that is acting as a default and causing this issue?


Also, I tested using important in Chrome Inspector, and it has no effect. Please test yourself to confirm.

There are two different classes.

.profile_section_content .heading {
   padding:5px;
   background-color:#BCEC76;
   color:#FFFFFF;
   font-family:Verdana;
   font-weight:normal;
   font-style:normal;
   font-size:14px;
   -webkit-border-radius:0;
   -moz-border-radius:0;
   border-radius:0;
   -webkit-box-shadow:0 0 0 #777777;
   -moz-box-shadow:0 0 0 #777777;
   box-shadow:0 0 0 #777777;
   -webkit-text-shadow:0 0 0 #777777;
   -moz-text-shadow:0 0 0 #777777;
   text-shadow:0 0 0 #777777;
}

and the second one

.profile_section .heading { 
margin-bottom: 15px;
padding: 5px;
font-size: 17px; 
font-weight: bold;
}

The second one is not displayed here http://profiles.myfreecams.com/hideko/css
look in the dev mode the console > elements > css from MFC fallback css (the global one)
to force the change add the second class too, with your own css attributes

Furthermore, in your css you use 2 background colors for the body element... remove one

body {
   background-color:#ffffff;
   background-color:#9AC956;
   color:#666666;
   font-family:Verdana;
   font-weight:normal;
   font-style:normal;
   font-size:12px;
}

the above topic can be helpful to get familiar with the other class/id elements
https://www.ambercutie.com/forums/threads/myfreecams-profile-help.17582/page-12#post-832957

 

[TUSHAR JANI]

dan thanks for reply me
but i face one other problems on chaturbate i dont know why site band my account any sujjession by you how i removed band from my account on chaturbate which step i need too take for removed my band

 

[crimson_lion]

There are two different classes.

.profile_section_content .heading {
   padding:5px;
   background-color:#BCEC76;
   color:#FFFFFF;
   font-family:Verdana;
   font-weight:normal;
   font-style:normal;
   font-size:14px;
   -webkit-border-radius:0;
   -moz-border-radius:0;
   border-radius:0;
   -webkit-box-shadow:0 0 0 #777777;
   -moz-box-shadow:0 0 0 #777777;
   box-shadow:0 0 0 #777777;
   -webkit-text-shadow:0 0 0 #777777;
   -moz-text-shadow:0 0 0 #777777;
   text-shadow:0 0 0 #777777;
}

and the second one

.profile_section .heading {
margin-bottom: 15px;
padding: 5px;
font-size: 17px;
font-weight: bold;
}

The second one is not displayed here http://profiles.myfreecams.com/hideko/css
look in the dev mode the console > elements > css from MFC fallback css (the global one)
to force the change add the second class too, with your own css attributes

Furthermore, in your css you use 2 background colors for the body element... remove one

body {
   background-color:#ffffff;
   background-color:#9AC956;
   color:#666666;
   font-family:Verdana;
   font-weight:normal;
   font-style:normal;
   font-size:12px;
}

the above topic can be helpful to get familiar with the other class/id elements
https://www.ambercutie.com/forums/threads/myfreecams-profile-help.17582/page-12#post-832957

Okay, so I tried working on another profile and now it's having the same issues as the others. Have tested this on on a test profile, and everything works without any issues.

Here are the profiles:
-Error profile: http://profiles.myfreecams.com/HappySun21

-Test Profile: http://profiles.myfreecams.com/one_4_you

You mentioned that there is some default CSS happening? I'm not sure what you mean, but it seems like this is some other issue.

Thoughts?

 

[Dan N]

Okay, so I tried working on another profile and now it's having the same issues as the others. Have tested this on on a test profile, and everything works without any issues.

Here are the profiles:
-Error profile: http://profiles.myfreecams.com/HappySun21

-Test Profile: http://profiles.myfreecams.com/one_4_you

You mentioned that there is some default CSS happening? I'm not sure what you mean, but it seems like this is some other issue.

Thoughts?

Lol.. if I am going to give you the answers I loose my job kidding... ok...
Let's take a look... first of all there are 2 types of CSS the user input and the fallback (reset one provided by MyFreeCams core platform) .
I'd suggest getting familiar with all the class and id names and add to your CSS the necessary ones.
You will encounter this issue again and again every time you add your css because MFC will also read theirs.
Make sure you didn't edited the profile design via MyFreeCams editor and add the missing classes or id to your custom edited CSS.
I will not mention again about CSS priority but if a class is missing from your edited CSS the browser will take it from default MFC core.

 

[KarenHarper]

Anyone who wants to give a go at designing their profile themselves may find this website, courtesy of PokerBabe, helpful: http://myfreemfcprofilehelp.blogspot.com/?zx=2b0c813b9a87174d I used it for my own and enjoy the buttons and backgrounds they have available.

Thanks so much for the thread, I've got some great tips so far, especially from this link.. I'm so rubbish at this kind of stuff usually, but I've already sorted out some paragraphs which may not sound like much, but it does make my page look better. I've even got the link to my manyvids page which looks good. I just need to find the link to have my twitter and Instagram next to it.

 

[KarenHarper]

Hi guys, I think I'm doing something wrong. I'm trying to get the button on my page for people to go to my twitter page. The link does work (I've tried both suggested on these two posts) but its just coming up as a line. I want the twitter symbol, like what I've got for my manyvids link.

Replace the html in your "about me" section with this code:

<div class="link-amazon">
<a href="http://amzn.com/w/RDM1OH6PTPPL" target="_blank">Amazon Wishlist</a>
</div>
<div class="link-twitter">
<a href="https://twitter.com/@sammi_sins" target="_blank">Twitter</a>
</div>

<div id="faqsec" class="frame">

<div style="text-align:center;">

<br><img src="https://DL.dropbox.com/s/1balwu4odggzvf3/prowork.png?dl=0" alt=""><br><div style="width:700px;height:700px;line-height:3em;overflow:scroll;padding:5px;background-color:#FFFFFF;color:#AC58FA;border:4px double #00BFFF;">
<img src="https://DL.dropbox.com/s/f87aj9ib2jgfqp7/newprofilenewvids.jpg?dl=0" alt=""></div>

<br><div style="width:700px;height:700px;line-height:3em;overflow:scroll;padding:5px;color:#008000;border:4px double #00BFFF;">
<img src="https://DL.dropbox.com/s/n79cfy1h2y642fr/oldschoolvideolistmfc.png?dl=0" alt=""></div>

<br><div style="width:700px;height:300px;line-height:3em;overflow:scroll;padding:5px;background-color:#FFFFFF;color:#008000;border:4px double #00BFFF;">
<img src="https://DL.dropbox.com/s/1daw42ux4xh41cw/newinterracialmfc.jpg?dl=0" alt=""></div>

<br><div style="width:700px;height:250px;line-height:3em;overflow:scroll;padding:5px;background-color:#FFFFFF;color:#008000;border:4px double #00BFFF;">
<img src="https://DL.dropbox.com/s/n2vq03io7t6ywc0/Othervidsmfcnew.png?dl=0" alt=""></div>

</div>

<img src="https://DL.dropbox.com/s/2jsuvg0edclnfwd/Kart%20krew.jpg?dl=0" alt=""><br><img src="https://DL.dropbox.com/s/z1sgoy2rjdf3xnw/MFCtip.jpg?dl=0" alt=""><br><br></div>

Then copy n' paste this code to your custom css

textover:hover {
  width:300px;
  height:300px;
  background:url https://DL.dropbox.com/s/j54hx8tu1c3njly/test1.jpg?dl=0 no-repeat;
}

a:link,a:active,a:hover {
  color:#;
}

a:visited {
  color:#;
}

body {
  background-color:#ffffff;
  background-color:#f7f9f5;
  color:#000000;
  font-family:'Times New Roman';
  font-weight:normal;
  font-style:normal;
  font-size:12px;
}

.profile_section_content {
  color:#000000;
  border:0 none #;
  padding:5px;
  margin:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 0 0 #777777;
  -moz-box-shadow:0 0 0 #777777;
  box-shadow:0 0 0 #777777;
}

.profile_section_background {
  background-color:transparent;
  background-color:#FFFFFF;
  filter:alpha(opacity=100);
  opacity:1;
}

.img_radius_shadow {
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  -webkit-box-shadow:0 0 0 #777777;
  -moz-box-shadow:0 0 0 #777777;
  box-shadow:0 0 0 #777777;
}

.profile_section_content .heading {
  padding:5px;
  background-color:#000000;
  color:#FFFFFF;
  font-family:'Tahoma';
  font-weight:normal;
  font-style:normal;
  font-size:12px;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  -webkit-box-shadow:0 0 0 #777777;
  -moz-box-shadow:0 0 0 #777777;
  box-shadow:0 0 0 #777777;
  -webkit-text-shadow:0 0 0 #777777;
  -moz-text-shadow:0 0 0 #777777;
  text-shadow:0 0 0 #777777;
}

.content {
  padding:5px;
}

#profile_schedule .heading {
  display:none;
}

#profile_main_photo,.flagCounter,#username_container,#marital_status_container,#gender_container,#body_type_container,#height_container,#ethnicity_container,#cam_score_container,#hair_container,#eyes_container,#weight_container,#age_container,#country_container,#sexual_preference_container,#smoke_container,#drink_container,#occupation_container,#school_container,#favorite_food_container,#pets_container,#automobile_container,#tags_container,#profile_about_me .label,#profile_about_me > .heading {
  display:none;
}

#profile_interests_content {
  display:none;
}

.wall_post_time {
  font-size:9px;
  display:none;
}

#header_bar {
  display:none;
}

#footer_bar {
  display:none;
}

div#profile_header.profile_section {
  display:none;
}

body {
  width:1024px!important;
  margin:auto!important;
}

#faqsec {
  display:block;
  width:780px;
  height:4450px;
  float:left;
  margin-top:5px;
  margin-left:110px;
  margin-right:-2px;
  padding:5px;
  overflow:auto;
  font-size:15px;
  color:#fff;
  text-shadow:0 1px 0 #ccc;
  font-family:Century Gothic;
  text-align:center;
  text-shadow:1px 2px 3px #000000,-1px 2px 1px #000000,-1px -2px 1px #000000;
}

.link-twitter a {
  display:block;
  width:101px;
  height:93px;
  float:r;
  float:right;
  background:transparent url(http://2.bp.blogspot.com/-HY9M0ySIUtA/VTWi-kmREjI/AAAAAAAAH0I/jsC3O5dZkZc/s1600/bird12.png) no-repeat;
  position:relative;
  margin:415px 0 0 -5px;
  margin-top:12px;
  margin-right:330px;
  text-indent:-3000px;
}

.link-twitter a:hover {
  background-position:0 -93px;
}

.link-amazon a {
  display:block;
  width:101px;
  height:93px;
  float:left;
  background:transparent url(http://1.bp.blogspot.com/-tPpUvTRqb5Y/VTWi-rG_soI/AAAAAAAAH0E/tsIrs4OZ0r8/s1600/amazon12.png) no-repeat;
  position:relative;
  margin:215px 0 0 185px;
  margin-top:1px;
  margin-left:369px;
  text-indent:-3000px;
}

.link-amazon a:hover {
  background-position:0 -93px;
}

.photo_gallery_image {
  border:0;
}

.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #33CCFF;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}

A short tut on how to add "share" function to MFC profile page
The tutorial on my blog uses the extended version (use of CSS) but for obvious reasons I will post only the links for the buttons

<!--- Apsense --->
<a class="apsense" href="http://www.apsense.com/share?url=http://profiles.myfreecams.com/YOUR_NAME_HERE">Apsense</a>

<!--- Twitter --->
<a class="twitter" href="http://twitter.com/share?url=http://profiles.myfreecams.com/YOUR_NAME_HERE&text=Show%20your%20support%20to%20this%20@awesome%20camgirl%20and%20RT" target="_blank">Twitter</a>

<!--- Facebook --->
<a class="facebook" href="http://www.facebook.com/sharer.php?u=http://profiles.myfreecams.com/YOUR_NAME_HERE" target="_blank">Facebook</a>

<!--- Tumblr --->
<a class="tumblr" href="https://www.tumblr.com/widgets/share/tool?shareSource=legacy&canonicalUrl=&url=http://profiles.myfreecams.com/YOUR_NAME_HERE" target="_blank">Tumblr</a>

<!--- Stumble --->
<a class="stumble" href="http://www.stumbleupon.com/badge?url=http%3A%2F%2Fprofiles.myfreecams.com%2FYOUR_NAME_HERE&fresh=1&nsfw=1&title=Check%20out%20this%20awesome%20MyFreeCams%20profile%page" target="_blank">Stumble</a>

<!--- Pinterest --->
<a class="pinterest" href="https://www.pinterest.com/pin/create/button/?url=http://profiles.myfreecams.com/YOUR_NAME_HERE&media=http://2.bp.blogspot.com/-tG_ZVnPTVVE/VZrHrH8gIiI/AAAAAAAAEL8/D22NfUVdX2w/s1600/model_avatar.jpg&description=Custom%20MyFreeCams%20profiles%3A%20Dxpro" target="_blank">Pinterest</a>

<!--- Google Plus --->
<a class="googleplus" href="https://plus.google.com/share?url=http://profiles.myfreecams.com/YOUR_NAME_HERE" target="_blank">Google Plus</a>

A few suggestions:
The Pinterest link/button supports media (image) which can be replaced in the markup code (the link code)
Personally I do not recommend G+ because they might block the url.
Stumble requires NFSW which I've already added but they ask it anyway.
Replace the name of the links with graphics and that's it.
Note: You may want to remove the class for each button (I used a custom class for the buttons to look different / CSS version) here

 

[Aprilxxo]

I've searched through this and other threads and can't seem to find this question.

How would I delete the profile pictures that show up on the top left of everyone's profile. I'm hoping removing it will center the rest of my profile instead of being the default to the right.

 

[AmberCutie]

I've searched through this and other threads and can't seem to find this question.

How would I delete the profile pictures that show up on the top left of everyone's profile. I'm hoping removing it will center the rest of my profile instead of being the default to the right.

There are albums named Main Photo and Recent Photos in your Manage Photos page. I think if you make those empty (delete or move any photos out of them) those sections won't show up. I'm not positive though, just give it a try.

 

[Dan N]

I've searched through this and other threads and can't seem to find this question.

How would I delete the profile pictures that show up on the top left of everyone's profile. I'm hoping removing it will center the rest of my profile instead of being the default to the right.

Hi guys, I think I'm doing something wrong. I'm trying to get the button on my page for people to go to my twitter page. The link does work (I've tried both suggested on these two posts) but its just coming up as a line. I want the twitter symbol, like what I've got for my manyvids link.

Twitter icon

<a class="twitter" href="http://twitter.com/share?url=http://profiles.myfreecams.com/KarenHarperUK&amp;text=Show%20your%20support%20to%20this%20@awesome%20camgirl%20and%20RT" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/cssmfc/xniteproductions/master/assets/images/icons/clte_twt_02.png" width="120"/></a>

you can change the width="120" with a smaller value if you want to make the twitter image smaller
it will display this

 

[KarenHarper]

Thank you very much for the link, its working

Twitter icon

<a class="twitter" href="http://twitter.com/share?url=http://profiles.myfreecams.com/KarenHarperUK&amp;text=Show%20your%20support%20to%20this%20@awesome%20camgirl%20and%20RT" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/cssmfc/xniteproductions/master/assets/images/icons/clte_twt_02.png" width="120"/></a>

you can change the width="120" with a smaller value if you want to make the twitter image smaller
it will display this

 

[Ooh La La]

Hello there!

Does anybody know how to make responsive tabs like in THIS and THIS profile?

Please help

 

[Dan N]

Hello there!

Does anybody know how to make responsive tabs like in THIS and THIS profile?

Please help

Yes, you will need to use additional CSS.
Unfortunately I don't have the slightest idea how is your navigation (menu) coded so I can't provide you with the copy/paste code, instead I will add the generic one so you may have an idea on how it works.

@media only screen and (max-width: 500px) {.menu a:link, .menu a:visited{display:block;text-align:center;}.menu a:hover{display:block;text-align:center;}}

where menu is the class used to wrap all the links

 

[Ooh La La]

Yes, you will need to use additional CSS.
Unfortunately I don't have the slightest idea how is your navigation (menu) coded so I can't provide you with the copy/paste code, instead I will add the generic one so you may have an idea on how it works.

@media only screen and (max-width: 500px) {.menu a:link, .menu a:visited{display:block;text-align:center;}.menu a:hover{display:block;text-align:center;}}

where menu is the class used to wrap all the links

First of all, thank you so much for your effort!

I used your code !
So I replaced .menu with .mymenu but it did nothing, I can still scroll down.
What am I doing wrong?

 

[Ooh La La]

Yes, you will need to use additional CSS.
Unfortunately I don't have the slightest idea how is your navigation (menu) coded so I can't provide you with the copy/paste code, instead I will add the generic one so you may have an idea on how it works.

@media only screen and (max-width: 500px) {.menu a:link, .menu a:visited{display:block;text-align:center;}.menu a:hover{display:block;text-align:center;}}

where menu is the class used to wrap all the links

First of all, thank you so much for your effort!

I used your code !
So I replaced .menu with .mymenu but it did nothing, I can still scroll down.
What am I doing wrong?