[Sticky] MFC design tips 101  

  RSS

Web Designer Admin
Joined:1 year  ago
Posts: 151
06/04/2017 10:00 am  

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 first

Tip #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.

 

Tip #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

- 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>

3. You can use Material Icons iconic-font to spice up your profile page.

Add the font via CSS. The CSS looks like this

@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

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

- will render a filled heart ♥

Edited: 8 months  ago

Dan N - Camgirl Live Editor - Profile


ReplyQuote
Web Designer Admin
Joined:1 year  ago
Posts: 151
06/04/2017 10:25 am  

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:

.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 - Camgirl Live Editor - Profile


ReplyQuote
  
Working

Please Login or Register