-->
Showing posts with label Legacy HTML Layouts. Show all posts
Showing posts with label Legacy HTML Layouts. Show all posts

Friday, January 31, 2014

Answers to FAQs Section

I just made a new FAQs section with cute little effects.
Here's some screen shots:



To see it in action click here.

You can make your own images and adjust the codes to fit your profile if you'd like.

Here's the HTML code:

<div id="casinorules"></div>

<div id="faqs"><div id="analq"></div><div id="phoneq"></div><div id="squirtq"></div></div></a></div>
<a><div id="faqs1"><div id="fistq"></div><div id="pokerq"></div><div id="favsq"></div></div></a></div>


Here's the CSS code:

#casinorules {
  display:block;
  position:relative;
  margin-left:-50px;
  height:84px;
  width:1110px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNV3nLhzH9HFaxquvsnEkoGqelWinOlnc5f09X1c5ss39HRCpABD5gpI60JrLAXOQaJZGRFRmdMBWDliPW5v2C-7zUa-HBMTAAOVW0QLApvPiVSpqqprG-m_uWu-c5dCihj0RFNLl_p7Xg/s1600/LPr3l0UBslft.png) no-repeat top;
  overflow:hidden;
}


#faqs {
  display:inline-block;
  width:950px;
  height:170px;
  overflow:hidden;
  margin-left:30px;
  border-bottom:0 solid #000;
  -webkit-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
  -moz-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
  box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
}

#analq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/iLHCZGY6rQ1A0.jpg) center top no-repeat;
}

#analq:hover {
  background-image:url(http://i.minus.com/ibaMlqI3jx0Zq5.jpg);
}

#phoneq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/ibNqPWWSzX2MF.jpg) center top no-repeat;
}

#phoneq:hover {
  background-image:url(http://i.minus.com/ib1p0meJIPqYaJ.jpg);
}

#squirtq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/iXQUIx7pp0D6D.jpg) center top no-repeat;
}

#squirtq:hover {
  background-image:url(http://i.minus.com/ir3q4j0t4DBQB.jpg);
}

#faqs1 {
  display:inline-block;
  width:950px;
  height:170px;
  overflow:hidden;
  margin-left:30px;
  border-bottom:0 solid #000;
  -webkit-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
  -moz-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
  box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
}

#fistq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/im7MhKv5J9lzQ.jpg) center top no-repeat;
}

#fistq:hover {
  background-image:url(http://i.minus.com/ibp193FjAEuxmV.jpg);
}

#pokerq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/i18qIzAKBvRTy.jpg) center top no-repeat;
}

#pokerq:hover {
  background-image:url(http://i.minus.com/iJiuRriyRen2e.jpg);
}

#favsq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/iSaSDIi82bQ8e.jpg) center top no-repeat;
}

#favsq:hover {
  background-image:url(http://i.minus.com/iCNVB8kO58GM6.jpg);
}

Posted by at No comments:
Labels: , , , , , ,

Thursday, January 2, 2014

Classes used for New and Legacy HTML Layouts on MFC

Links to MFC-CSS-Pro's Forum




Posted by at 2 comments:
Labels: , , ,

Friday, December 13, 2013

Amazon, Instagram, & Twitter Twirling Transition Effect

If you would just like to use the amazon, instagram, and twitter link effects that are in the last post, but not the whole profile layout; here's where you can find the code...

 https://gist.github.com/anonymous/7956163
See it in action here:
http://codepen.io/pokerbabe69mfc/full/zbHxu



Posted by at 1 comment:
Labels: , , , , , ,

Monday, November 18, 2013

Hide your camscore

Here's the css code:

div.content.about_me table tr:nth-child(2) { display: none; }




Posted by at 3 comments:
Labels: , ,

Tuesday, October 29, 2013

FREE Ninja Theme Layout

This summary is not available. Please click here to view the post.
Read more »
Posted by at No comments:
Labels: , , , ,

Tuesday, October 15, 2013

FREE Night Sky Layout Theme

This summary is not available. Please click here to view the post.
Read more »
Posted by at No comments:
Labels: , , , , , ,

Add Border around your Schedule



To add a border around your schedule like on my profile, simply add this to your custom css code:

CSS Code:


Posted by at No comments:
Labels: , ,

Saturday, October 12, 2013

Hide the Interests and Hobbies Lable




Just add this code to your custom CSS page:

.interests_info {
  display:none;
}
Posted by at No comments:
Labels: , ,

Thursday, October 10, 2013

Hide the Time at the Corner of your Profile



 Hide the time stamp at the corner of your profile simply add this code to your custom css:

.clock,#clock {
  display:none;
}
Posted by at No comments:
Labels: , ,

Wednesday, October 9, 2013

FREE Passion Red Theme Layout

Just put this theme together, it's FREE for anyone who wants to use it. Enjoy!


Read more »
Posted by at No comments:
Labels: , , , ,

Saturday, October 5, 2013

Cool Status & Gallery Effects for Black Themes

If you have a black/dark theme for your profile, you might like the effects on this profile:
(scroll over the Status icon, and click on the Galleries to see what I'm talking about.)

Just add these codes to your css section to get yours to do the same thing:


 
CSS Code:
Posted by at No comments:
Labels: , ,

Wednesday, September 25, 2013

Hide MFC top profile links

This summary is not available. Please click here to view the post.
Posted by at No comments:
Labels: , ,

Friday, September 13, 2013

Highlight your gallery photos pink














CSS Code:

Posted by at No comments:
Labels: , , ,

Friday, August 30, 2013

CSS Class names for your Myfreecams Profile

 Link to OP: http://myfreecamgirl.blogspot.com/2012/04/css-class-names-for-your-myfreecams.html?zx=e7be68d0868de5c5

Posted by

CSS Class names for your Myfreecams Profile

If you are a member of myfreecams then you will know that you automatically have a profile. It may not be enabled; however, but you can enable it and start to fill in some details. Although it is not the greatest page on the web, you do get some basic customization options. But for the experienced css designer, you can take your profile even further if you know the class names and just a bit of code.

List of class names on your Myfreecams profile:

  • td .clock
  • .thumbnail
  • .status_key
  • .status_value
  • .online
  • .blurb_key
  • .blurb_value
  • .about_me td
  • .about_me .key
  • .about_me .value
  • .about_me .value2
  • .interests_info
  • .interests_body
  • .wall_info
  • .wall_body
  • .wall_options
  • .wall_options textarea
  • .gallery_image
  • .gallery_image img
  • .friends_key
  • .friends_value
  • .rating_select
This is not the complete list, but the names of the classes which dominate your Myfreecams profile. Writing some code with these names will result in changes on your profile. With this information, it should be much easier to start some advance coding on your profile.


Posted by at No comments:
Labels: ,

Monday, August 26, 2013

Hide Recent Photos & Main Photo

This completely hides the recent photos section, which means that all of the stuff in your about me section will be centered, but you would not have the main image to the left of the about me.

Code:
td[width='280'] {display: none;}





Posted by at 4 comments:
Labels: , ,

Wednesday, August 21, 2013

FREE Butterfly Theme:

This summary is not available. Please click here to view the post.
Read more »
Posted by at 2 comments:
Labels: , , , ,

Tuesday, August 20, 2013

How to hide the schedule & photo galleries:

To get rid of the entire thing use this code:

NOTE: It will not work on certain older browsers, same goes for the code to remove the galleries (mostly would only be a problem for people running old IE who don't update it).

Code:

table table:nth-child(2) {
     display:none;
}

table table:nth-child(3) {
     display:none;
}

table table:nth-child(3) + script + div {
   display:none;
}
Posted by at No comments:
Labels: , ,

Tuesday, August 13, 2013

Adding Background Images & Container Transparency:

Adding a background image...

Code:

body { background-image:url('url to the image'); }


The rule MFC uses for container transparency...

Code:

.container_transparency {
   height:100%;
   width:100%;
   background-color: #FFFFFF;
   filter:alpha(opacity=100);
   background:rgba(255,255,255,1);
}


Posted by at No comments:
Labels: ,

If You Want to Hide the Whole Friends Section:

Code:

.about_me + .heading + .content, .about_me + .heading {display: none;}






Posted by at No comments:
Labels: , ,

Add a Custom Banner at the Top of your Profile:

To place an image at the top of your profile above everything, just else follow these instructions:

Add these lines of CSS to your custom CSS:

        #header
        {
         position:absolute;
         top: 0;
         height: 449px; /*Change this depending on how much height you want at 
the top*/
         width: 1024px; /*Ditto for width*/
         left: 0;
         right:0;
         margin: auto;

        }
        table{margin-top: 449px;} /*change this to match what you set the 
height above to.*/
        table table {margin-top:0px} 
 
 
Delete the line "position:relative" from your custom CSS:

         .container {
         color: #666666;
         position:relative;/*remove this line*/
         border: px  #;
         padding: 5px;
         height: 100%;
         background-color:transparent;
        } 
 
 
Add this code to one of your sub sections (I used About Me, but it shouldn't matter which): 
        <div id="header">...stuff you want at the top...</div>
 
 
 
 
 
 
Posted by at 2 comments:
Labels: , ,
Subscribe to: Posts (Atom)