How to... Design MyFreeCams profile page.

Dan N · Apr 5, 2017

Few tips on how to spice-up your MyFreeCams profile page.
If you want to DIY this thread can offer some useful and helpful tips.

I have to mention that basic knowledge of CSS and HTML is a must here.

So, let's start with the easy stuff

1. Make your MFC centered and narrow.
- Go to Customize Profile > edit your css directly
in the markup box search for the body css tag and add/or change the width and margin attributes.
Example:

Code:

body{width:70%;margin:0 auto;}

width:70% - responsive/fluid width
margin:0 auto; - centers the profile in page.

2. Use Google webfont library in your profile page. Use external fonts in your design process.
- there is only one method to render fonts MyFreeCams.
Step by step process.
a - go to Google fonts https://fonts.google.com/
b - choose your favorite font
c - click on red circle with a plus inside (selected font is available for use -- dark bar at the bottom of your browser window)
d - you will see the Standard option, below there is the box with the version of inserting the font in the <head>
Looks like this

Code:

<link href="https://fonts.googleapis.com/css?family=Macondo" rel="stylesheet">

Copy ONLY the url and open it in other window https://fonts.googleapis.com/css?family=Macondo
e - copy the markup it should look like this

Code:

@font-face {
  font-family: 'Macondo';
  font-style: normal;
  font-weight: 400;
  src: local('Macondo'), local('Macondo-Regular'), url(https://fonts.gstatic.com/s/macondo/v5/fX2_Pkxo2kh5MjAeOVmsxg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

f - add the code in your CSS box from MFC
g - in order to use and apply this font to a text element use a class or simply add the font to an element
font-family: 'Macondo', cursive;
Using a class:
.my_font{font-family: 'Macondo', cursive;font-size:22px;color:#333333;}
The HTML basic element using the class to style up the font looks like this

HTML:

<div>
<h1 class="my_font">This is where the font will render</h1>
<p>this element will not use the same element because the class is not assigned to it</p>
</div>

Dan N · Apr 5, 2017

You can use Material Icons iconic-font to spice up your profile page.
The CSS looks like this
Add the font via CSS

Code:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v21/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

Use the font in HTML

HTML:

<i class="material-icons">favorite</i>

- will render a filled heart ♥

Dan N · Apr 6, 2017

Tip #3 - Sticky top horizontal menu
Sticky horizontal menu is the top menu bar with links/buttons pointing to on-page section or external pages.
It floats even if you scroll down .
Basic CSS markup:

Code:

.clte_menu{display:block;width:100%;height:auto;padding:3px 11px;text-align:center;position:fixed;top:0px;left:0px;z-index:999;}

width:100%; - full responsive width
height:auto; - the height is set to auto and it will wrap all elements inside
padding:3px 11px; - top and bottom padding is set to 3px, left and right padding is 11px.
text-align:center; - text will be centered
position:fixed; - this is the "sticky" part, the menu will be fixed to the top margin of web page
top:0px; - top margin set to 0px
left:0px; - left margin set to 0px
z-index:999; - this is informing the browser to render this element on top of the other elements

The HTML markup to render the menu:

HTML:

<div class="clte_menu">
 ....links here...
</div>

Dan N · Apr 17, 2017

Tip #4 : Background image via CSS

I've seen so many profile designs with using transparent background color for the main content in order to display the background image.... More visibility for the background image.
The main problem is that the image was repeating itself horizontally or vertically with an unwanted outcome.
Working with background images via CSS is not hard at all, a few things you should know before starting to make your MFC profile page more appealing or awesome
Let's start step by step
1st you will need a high quality image uploaded online

Postimg.org / free wordpress / Tumblr / free Blogger / CLTE

Always use the direct full URL path of the image... it must end with image extension (jpeg / jpg /gif / png)
2nd step is to edit the CSS markup code.
- go to Customize > edit your css directly and search for body tag

The basic CSS markup for adding/using images as background looks like this

Code:

{background-image: url('your-image-url-here');}

That's the basic stuff, and depending on your image size and quality you can add more attributes.
If your image is smaller, let's say 250x250 you can use it as a pattern using repeat attribute.
background-repeat:repeat;

Let's assume you have a high quality image good resolution (do not confuse resolution with dimensions/size ... not the same thing)
resolution defines DPI (dots per inch) 72DPI - low quality / 300DPI - good quality
dimensions defines the width and height of the image (but wrong term is used as size) 2000px x 3000px (2000 pixels width per 3000 pixels height)
size defines the kilobytes or megabytes
1000px x 2000px / 300DPI is good resolution image
3000px x 3000px / 50DPI has a poor image quality even if the dimensions are bigger.

I know I've jumped far from the purpose of this topic but not often I see this mistake over and over again and it seams not many are willing to help with some suggestions/explanations

Back to our colored eggs...
Using a bigger image with decent resolution - full CSS markup

Code:

body{
 background-image: url('your-hosted-image-url-here');
 background-repeat: no-repeat;
 background-size: cover;
-webkit-background-size: cover;
background-position: center;
}

Emmm... I ques I can write an entire eBook about using images in online environment because I didn't cover the optimization process, how to optimize images, why to optimize images, how to choose the best format for your project and so many aspects.

PS: and sometimes some collaborators are stupefied why do I charge for editing a single image... The funny answer and it seams some collaborators agree with is : "Because behind the image you enjoy is a lot of other shit to consider"

Search

Search

How to... Design MyFreeCams profile page.

Dan N

Dan N

Dan N

Dan N

Similar threads