AmberCutie's Forum
An adult community for cam models and members to discuss all the things!

TUTORIAL EASY STEP FOR "BASIC STRUCTURE" profiles

  • ** WARNING - ACF CONTAINS ADULT CONTENT **
    Only persons aged 18 or over may read or post to the forums, without regard to whether an adult actually owns the registration or parental/guardian permission. AmberCutie's Forum (ACF) is for use by adults only and contains adult content. By continuing to use this site you are confirming that you are at least 18 years of age.
Status
Not open for further replies.
djex_x

djex_x

Aug 19, 2013
51
7
21
hello all !

sry for my english, i'm learning huhu ! be tolerant :pray:

a friend told me how to tune mfc profile, she want to know how to do it
And I see that many people have trouble with it

so... TUTORIAL !!!! :mrgreen:

introdution

MFC tools are not easy for build a custom profile.

basically MFC provide a tool based on "TABLE" structure what is the semantics for tabular data... not for design a website
and mfc does not allow javascript input for security reason of course...

so... we need tricks for build a custom profile
Luckily we still have the css3 allows us to animate some stuff without breaking the head too (like menu or button etc...)

it is not clean at all

so beware, this is not a tutorial on how to code html and css properly :mrgreen:

But rather on how to bypass it all, without semantic
(hardcore mode developer bypass 20 minutes)

with the fear of consuming too much time and the little voice in your head that says :
"MFC messing you do not develop a proper tool ..."... :twocents-02cents:

I will not detail all for the simple reason that we are going to useful

For the recipe we need :

-a little patient
-Never forget to save the old css (one up) to go back if you have ...
-can be to train on a fake profile ...
-Do not get upset if it does not work .. we drink coffee and it works again ...

START !!!

first we need to have an HTML structure

I put in the fields "Favorite Books" :

Code: 
<div id='magicbox'>
	<div id='top'>
		<div id="skylog">top logo</div>
		<div id="uglytagformenu">
			<a href="#" alt="">plop</a>
			<a href="#" alt="">plop</a>
			<a href="#" alt="">plop</a>
			<a href="#" alt="">plop</a>
		</div>
	</div>
	<div id='mid'>
		<div class="foobox">
		</div>
		<div class="foobox">
		</div>
		<div class="xclean"></div>
		<div class="foobox">
		</div>
		<div class="foobox">
		</div>
		<div class="xclean"></div>
		<div class="foobox">
		</div>
		<div class="foobox">
		</div>
		<div class="xclean"></div>
	</div>
	<div id='low'>
		<div id="social">
			<a target="_blank" title="Follow me on Facebook" id="fb" class="socialview" href="#">Facebook</a>
			<a target="_blank" title="Follow me on Twitter" id="tw" class="socialview" href="#">Twitter</a>	
		</div>
	</div>
</div>

What could make this piece of code?

This is very simple,
First we create a container that will hold other small box

Unfortunately mfc prohibits us many things

To create the menu, for example we could use the tag us "ul"

Code: 
<ul id="menu">
	<li><a href="#" >some link</i>
	<li><a href="#" >some link</i>
	<li><a href="#" >some link</i>
</ul>
in html5 example, we even had to create tag menu...
but...

Remember, we are here just to crush a rotten code by another rotten :lol:


Now that we have our basic layout, we need to style it !!! with css

Go to customise > advanced css in you profile edit


Do not be scared by the length of the code .. it's just not optimized (write kilometer discovering the mfc profile).

In addition, you do not need to touch much, I would provide also in the coming days, a complete and easy layout to change

here is the css code to replace your old code

BUT DON'T FORGET !!! ALWAYS MAKE BACKUP YOUR OLD CSS


How to return to your old profile pending think about how to do better .. you only have to remove the HTML favorite book, and replace your css old snippet!



Code: 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


body {
	background:  url("http://pimpmysex.com/trunk/bg_base.jpg");
}

table {
	position: relative;
	width: 960px;
	margin: auto;
	margin-top: -5px;
}
#magicbox {
	position: absolute;
	width: 960px;
	margin: auto;
	margin-top: -5px;
	background: lightblue;
}


table > td[class*="status_value"], table > td[valign="top"], table > td[align="right"], table center, div .heading, div .interests_info, .content .wall_info, #wall_options, .wall_options, .thumbnail, .wall_body{
	display: none;
}

td [style="padding: 0px 40px 40px"] {
	padding: 0;
}
.interests_body {
	padding: 0;
}
#top {
	width: 960px;
	height: 280px;
	
	background:  url("http://pimpmysex.com/trunk/head.jpg"); 
}
#skylog {
	position: absolute;
	width: 150px;
	height: 150px;
	top: 50px;
	left: -80px;
	background:  url("http://pimpmysex.com/trunk/logo.png");  
	text-indent: -9999px;
}
#uglytagformenu {
	width: 960px;
	padding-top: 230px;
}
#uglytagformenu a {
	display: inline-block;
	width: 200px;
	height: 50px;
	line-height: 50px;
	background: #ed3f9d;
	text-align: center;
	 font-family: Verdana, sans-serif;
	 font-weight: bold;
	 text-decoration: none;
	 color: #02cfe1;
}
#uglytagformenu a:hover {
	background: #fca40c;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
.foobox {
	float: right;
	width: 460px;
	height: 200px;
	margin: 10px;
	background: #2d8fc8;
	
}
#social {
	position: absolute;
	display: inline-block;
	bottom: -5px;
	right: -20px;
}
.socialview {
	display: inline-block;
	width: 26px;
	height: 26px;
	text-indent: -9999px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	
}
#fb {
	background: url("http://pimpmysex.com/trunk/social.png") no-repeat 0px 0px;
}
#tw {
	background: url("http://pimpmysex.com/trunk/social.png") no-repeat -26px 0px;
}
#fb:hover{
	background: url("http://pimpmysex.com/trunk/social.png") no-repeat 0px -26px;
}
#tw:hover {
	background: url("http://pimpmysex.com/trunk/social.png") no-repeat -26px -26px;
}
.xclean {
	clear: both;
}




WTF :hand:

it took my head

I did not need all that !
it does not matter, your friends will fish all that "kevin" seeing their profiles will say "OMG it's a pornstar" ( lollllll )


Puts you firmly in mind that the conversion funnel marketing is very very important!
it is not everything, but it's more that it ... more

imagine you're in a store and you see two display candy


-one gray and dark green
- and one with rainbow sky and flying pink pony

easy choice...
:character-yoshi:


What could make this piece of code?
I will detail



-a tip for reset
-a piece of code to overide the MFC code
-one end to put everything in place
-and a tip for images

here is the important code for beginners :

background image

Code: 
body {
	background:  url("http://pimpmysex.com/trunk/bg_base.jpg");
}

header

Code: 
#top {
	width: 960px;
	height: 280px;
	
	background:  url("http://pimpmysex.com/trunk/head.jpg"); 
}

small chips to place a picture where you want

Code: 
#skylog {
	position: absolute;
	width: 150px;
	height: 150px;
	top: 50px;
	left: -80px;
	background:  url("http://pimpmysex.com/trunk/logo.png");  
	text-indent: -9999px;
}

have fun with the menu

Code: 
#uglytagformenu a:hover {
	background: #fca40c;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

giving it :

http://profiles.myfreecams.com/sexSexAndLove

it seems empty, but it is a very simple base to start
with it, you can do what you want without worrying about tables
with all the mfc limitations, can already do a lot

et voila!!!

for more loafer,
I would provide in the coming days, a complete and easy layout to change
(template for customization)
and for very little effort, none look to another..

for others, I wish you courage for work, and do not hesitate to ask me .. that it serves a comunity

:hello2:
 
  • Like
Reactions: MadisonGraceLloyd and Evvie
just change old css by this for it work

Code: 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


body {
	background:  url("http://pimpmysex.com/trunk/bg_base.jpg");
}

table, #profile {
	position: relative;
	width: 960px;
	margin: auto;
	margin-top: -5px;
}
#magicbox {
	position: absolute;
	width: 960px;
	margin: auto;
	margin-top: -5px;
	background: lightblue;
}


table > td[class*="status_value"], table > td[valign="top"], table > td[align="right"], table center, div .heading, div .interests_info, .content .wall_info, #wall_options, .wall_options, .thumbnail, .wall_body{
	display: none;
}

td [style="padding: 0px 40px 40px"] {
	padding: 0;
}
.interests_body {
	padding: 0;
}
#top {
	width: 960px;
	height: 280px;
	
	background:  url("http://pimpmysex.com/trunk/head.jpg"); 
}
#skylog {
	position: absolute;
	width: 150px;
	height: 150px;
	top: 50px;
	left: -80px;
	background:  url("http://pimpmysex.com/trunk/logo.png");  
	text-indent: -9999px;
}
#uglytagformenu {
	width: 960px;
	padding-top: 230px;
}
#uglytagformenu a {
	display: inline-block;
	width: 200px;
	height: 50px;
	line-height: 50px;
	background: #ed3f9d;
	text-align: center;
	 font-family: Verdana, sans-serif;
	 font-weight: bold;
	 text-decoration: none;
	 color: #02cfe1;
}
#uglytagformenu a:hover {
	background: #fca40c;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
.foobox {
	float: right;
	width: 460px;
	height: 200px;
	margin: 10px;
	background: #2d8fc8;
	
}
#social {
	position: absolute;
	display: inline-block;
	bottom: -5px;
	right: -20px;
}
.socialview {
	display: inline-block;
	width: 26px;
	height: 26px;
	text-indent: -9999px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	
}
#fb {
	background: url("http://pimpmysex.com/trunk/social.png") no-repeat 0px 0px;
}
#tw {
	background: url("http://pimpmysex.com/trunk/social.png") no-repeat -26px 0px;
}
#fb:hover{
	background: url("http://pimpmysex.com/trunk/social.png") no-repeat 0px -26px;
}
#tw:hover {
	background: url("http://pimpmysex.com/trunk/social.png") no-repeat -26px -26px;
}
.xclean {
	clear: both;
}

#header_bar, #profile_main_about_holder, #profile_header_container, .profile_section_background, #profile_header, .footer_links {
	display:none;
	margin: 0;
}
.profile_section_content {
	margin: 0;
	padding: 0;
}

#new_comment, #favorite_books_label {
	position: absolute;
	top: -200px;
}


but need in real to reorgenize code for build template on beta

http://profiles-beta.myfreecams.com/sexSexAndLove
 
Ok so I'm a bit rubbish at this apart from the very basics (changing font colour etc.) I attempted to do this earlier (using chrome btw) I ended up with all the profile comments at the top of the page on top of the table. That was the only thing I couldn't work out how to change, do you have any advice? Or is it just because of my browser? Thanks for all your help!!
 
http://profiles.myfreecams.com/rochelleriley

I've changed it back to how I basically had it atm. When I tried it I used the beta site though & put the CSS into the CSS box, then put the first lot of HTML code in the favourite books section (did try moving it around). In just posting from my phone atm, is it ok if I send you a pm once I change my profile?
 
Hi, Do you know the new css tags for implementing a custom profile? My CSS skills are limited.

For example:

If you look at AmberCutie's profile (non-custom), she has new transparent stars for rating her profile. http://profiles.myfreecams.com/AmberCutie

But if you look at KerriKing' s profile (custom) she still has the old star images with the white background. http://profiles.myfreecams.com/KerriKing

So what would be the new CSS tag to implement the new stars in a custom profile?
 
bpgtcs said:
Hi, Do you know the new css tags for implementing a custom profile? My CSS skills are limited.

For example:

If you look at AmberCutie's profile (non-custom), she has new transparent stars for rating her profile. http://profiles.myfreecams.com/AmberCutie

But if you look at KerriKing' s profile (custom) she still has the old star images with the white background. http://profiles.myfreecams.com/KerriKing

So what would be the new CSS tag to implement the new stars in a custom profile?
Click to expand...
I assume that's something that comes along with "upgrading" aka switching to their new HTML layout version vs. staying on the legacy.
 
Yeah, I think so too. I'll wait and see what other members using the custom settings do. I just happened to be editing my css when they switched to the new version, so I noticed that.
 
Okay, you're totally right Amber. Thanks. Once I switched to the new HTML version it worked. Now it's just a matter of switching the tags for my custom edit.

For example: .wall_body becomes .wall_post_body. etc.

Thanks very much.
 
  • Like
Reactions: AmberCutie
AmberCutie said:
bpgtcs said:
Hi, Do you know the new css tags for implementing a custom profile? My CSS skills are limited.

For example:

If you look at AmberCutie's profile (non-custom), she has new transparent stars for rating her profile. http://profiles.myfreecams.com/AmberCutie

But if you look at KerriKing' s profile (custom) she still has the old star images with the white background. http://profiles.myfreecams.com/KerriKing

So what would be the new CSS tag to implement the new stars in a custom profile?
Click to expand...
I assume that's something that comes along with "upgrading" aka switching to their new HTML layout version vs. staying on the legacy.
Click to expand...


hello,

yep it's just the new sprite for stars

http://a.mfcimg.com/profiles/prod/bundl ... tar-on.png (new)

http://e.mfcimg.com/images/yellow_star.gif (old)



the only big difference is :
--------------------
old layout based on a tabular structure
new layout based on "div" struture ( too much for my taste, they worked as html 4 :think: )
--------------------
HTML5 now
--------------------
More easy for play with CSS selector

http://net.tutsplus.com/tutorials/html- ... -memorize/


now the post I wrote above is obsolete,

tonight I will post a new version of "basic structure" that deal with the new layout
:handgestures-salute:
 
Status
Not open for further replies.

Similar threads

Sequential
    • Helpful!
  • Question
Easy method for placing a Background Image in your Chaturbate BIO
Replies
4
Views
604
Chaturbate
RainForest
RainForest
angminx
  • Locked
  • Question
BIO coding help??
Replies
0
Views
674
Chaturbate
angminx
angminx
A
  • Locked
  • Solved
Making a biography, problem with the mobile version... can you help me?
Replies
22
Views
2K
Chaturbate
a0rock_
A
V
  • Locked
  • Question
Three icons next to each other in a row in bio
Replies
1
Views
987
Chaturbate
Dan N
Dan N
camgirlpal
    • Helpful!
    • Like
  • Locked
  • Question
Tutorial: Stripchat HTML Video Embed
Replies
0
Views
2K
Stripchat
camgirlpal
camgirlpal
Top Bottom
Back