Lair360 Blog

Version: 13.2
Revision: 43 Build 13

Ads Slots – Fluid Stylesheet

Introduction: this tutorial will show you how to implement your own “advertisement block”, without paying for somebody to do it for you! This script is very easy to use and modify. However, you must give me some credits if you’re using this script.

Thank you for your support.

1.] Download notepad++ from the original author or from another source.
——————————-

http://sourceforge.net/projects/notepad-plus/

http://filehippo.com/download_notepad/

——————————-

2.] Copy this script and save it as “style-fluid.css”
However, it must be in a “Stylesheet” format!

File: style-fluid.css
—Copy Source Code—

.upperblock {
  width: auto;
  height: auto;
  padding: 10px;
}
.left-top {
  width: 125px;
  height: 125px;
  background: url(images/125x125.gif) no-repeat;
  margin-bottom: 10px;
}
.left-bottom {
  width: 125px;
  height: 125px;
  background: url(images/125x125.gif) no-repeat;
  }
.right-top {
  float: right;
  width: 125px;
  height: 125px;
  background: url(images/125x125.gif) no-repeat;
}
.right-bottom {
  float: right;
  width: 125px;
  height: 125px;
  background: url(images/125x125.gif) no-repeat;
}
.lowerblock {
  width: 100%;
  clear: both;
}

—End Source Code—

3.] Now, you’ll need to add these “html” strings. Nevertheless, these code can also be added into your Blog’s sidebar. However, you must remember to insert: “style-fluid.css” into the “head” of the page.

File: header.php / head tags
—Copy Source Code—

<link rel="stylesheet" type="text/css" href="style-fluid.css" /></link>

—End Source Code—

Finally, just add this code into your body – tags or your Blog’s sidebar.

File: sidebar.php / body tags
—Copy Source Code—

<div class="upperblock">

<div class="right-top">Ad code</div>
<div class="left-top">Ad code</div>

<div class="lowerblock"></div>

<div class="right-top">Ad code</div>
<div class="left-bottom">Ad code</div>

—End Source Code—

Notes: this script is designed to be fluid. It’s not a fixed – width version…

5.] Save everything and check your website!

Enjoy!

Copyrighted by Lair360

Version: 32.1
Revision: 48 Build 12

Blue Chrome ~ Vertical Menu v2

Introduction: this vertical menu – project was designed in my studio.
However, it was a struggle cleaning up the “CSS script”, so that it could synchronize with the text – menu. But, I managed to complete it and it was a big improvement from my previous edition: “Blue Chrome ~ Verticle Menu”.

This vertical menu will shift itself when you hover your mouse over their body.
But, this time, the width will be smaller so that it could fit any website with a smaller table.

Enjoy my new project and don’t forget to linkback!

1.] Download notepad++ from the original author or from another source.
——————————-

http://sourceforge.net/projects/notepad-plus/

http://filehippo.com/download_notepad/

——————————-

2.] Copy this ‘CSS Stylesheet’ source code and save it as “bluecr_sidebar.css” [without the quotes].

Warning: please don’t alter the stylesheet!
You might break the script and cause it to trigger errors or syntax errors!!

File Name: bluecr_sidebar.css
—Copy Source Code—

/* Copyrighted By Lair360*/
/* Version: 11.2d
   Revision: 43 Build 16*/

#globalnews {
}
#globalnews ul {
 width: 145px;
 letter-spacing: 1px;
 font-weight: bold;
 font-style: italic;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 border-top: 1px solid #000000;
 border-right: 3px solid #000000;
 border-bottom: 3px solid #000000;
 border-left: 1px solid #000000;
 margin:0;
 padding:0;
 list-style:none;
}
#globalnews li a {
 font-family: Courier New, Courier, mono;
 font-size: 12px;
 font-weight: bold;
 font-style: normal;
 text-decoration: none;
 padding-left: 6px;
 padding-bottom: 3px;
 color: #FFFFFF;
 padding-top: 3px;
 padding-right: 12px;
 text-align: left;
 background: #0000FF url(image/Blue_Chrome.gif);
 border-top: 1px #000000;
 border-right: 1px #000000;
 border-bottom: 1px solid #000000;
 border-left: 2px solid #000000;
 display:block;
 width:100%;
}
#globalnews li a:hover {
 color: #FFFFFF;
 font-family: Courier New, Courier, mono;
 font-size: 12px;
 font-weight: bold;
 background: #FFFFFF url(image/Blue_Crystal.gif);
 border-bottom: 1px solid #000000;
 border-left: 6px solid #000000;
}
#globalnews li.menucurrent a {
 text-align: right;
 background: #000000 url(image/Red_Chrome.gif);
}
#globalnews li.menucaption {
 color: #FFFFFF;
 font-style: normal;
 padding-left: 6px;
 font-size: 15px;
 padding-bottom: 4px;
 padding-top: 4px;
 font-family: Times New Roman, Times, serif;
 letter-spacing: 1px;
 text-align: left;
 background: #333333 url(image/Blue_Crystal.gif);
 display:block;
}
html>body #globalnews li a {
 width: auto;
}

—End Source Code—
Copyright 2001-2009 Lair360

3.] Add this code into the “body” tags and save it as a HTML extension.

File Name: Template.html
—Copy Source Code—

<div id="globalnews"><ul>
<li class="menucaption">Index-HTML</li>
<li><a href="Menu-001" title="Home">Home</a></li>
<li><a href="Menu-002" title="Tools">Tools</a></li>
<li><a href="Menu-003" title="Contact">Contact</a></li>
<li><a href="Menu-004" title="AboutUS">AboutUS</a></li>
<li class="menucaption">Submenu</li>
<li><a href="Menu-001" title="DeviantArt">DeviantArt</a></li>
<li><a href="Menu-002" title="Downloads">Downloads</a></li>
<li><a href="Menu-003" title="Wordpress">Wordpress</a></li>
<li><a href="Menu-004" title="Screenshots">Screenshots</a></li>
<li><a href="Menu-005" title="Examples">Examples</a></li>
</ul></div>

—End Source Code—
Copyright 2001-2009 Lair360

4.] Insert this little link into the “head” tags.
So that the “div” tags could synchronize with the “CSS Stylesheet”.

File Name: Template.html
—Copy Source Code—

<link rel="stylesheet" type="text/css" href="bluecr_sidebar.css" /></link>

—End Source Code—
Copyright 2001-2009 Lair360

5.] Now, you’ll need to download this file which has the images for the vertical menu.
But, you must create a sub-folder called: image (without capital).

http://dinom6.deviantart.com/art/Special-Colour-Stripes-125220598

Notes: create a sub-directory under your html menu and name it as: image (without capital).

6.] Save your progress and anything else.
After that, just execute your html webpage and give it a little test drive!

Advice: if you want it in a single file, you’ll need to copy this script and save it as a HTML format.

—Copy Source Code—

<head>
<style type="text/css">
<!--
/* Copyrighted By Lair360*/
/* Version: 11.2d
   Revision: 43 Build 16*/

#globalnews {
}
#globalnews ul {
 width: 145px;
 letter-spacing: 1px;
 font-weight: bold;
 font-style: italic;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 border-top: 1px solid #000000;
 border-right: 3px solid #000000;
 border-bottom: 3px solid #000000;
 border-left: 1px solid #000000;
 margin:0;
 padding:0;
 list-style:none;
}
#globalnews li a {
 font-family: Courier New, Courier, mono;
 font-size: 12px;
 font-weight: bold;
 font-style: normal;
 text-decoration: none;
 padding-left: 6px;
 padding-bottom: 3px;
 color: #FFFFFF;
 padding-top: 3px;
 padding-right: 12px;
 text-align: left;
 background: #0000FF url(image/Blue_Chrome.gif);
 border-top: 1px #000000;
 border-right: 1px #000000;
 border-bottom: 1px solid #000000;
 border-left: 2px solid #000000;
 display:block;
 width:100%;
}
#globalnews li a:hover {
 color: #FFFFFF;
 font-family: Courier New, Courier, mono;
 font-size: 12px;
 font-weight: bold;
 background: #FFFFFF url(image/Blue_Crystal.gif);
 border-bottom: 1px solid #000000;
 border-left: 6px solid #000000;
}
#globalnews li.menucurrent a {
 text-align: right;
 background: #000000 url(image/Red_Chrome.gif);
}
#globalnews li.menucaption {
 color: #FFFFFF;
 font-style: normal;
 padding-left: 6px;
 font-size: 15px;
 padding-bottom: 4px;
 padding-top: 4px;
 font-family: Times New Roman, Times, serif;
 letter-spacing: 1px;
 text-align: left;
 background: #333333 url(image/Blue_Crystal.gif);
 display:block;
}
html>body #globalnews li a {
 width: auto;
}
-->
</style>
</head>
<body>
<div id="globalnews"><ul>
<li class="menucaption">Index-HTML</li>
<li><a href="Menu-001" title="Home">Home</a></li>
<li><a href="Menu-002" title="Tools">Tools</a></li>
<li><a href="Menu-003" title="Contact">Contact</a></li>
<li><a href="Menu-004" title="AboutUS">AboutUS</a></li>
<li class="menucaption">Submenu</li>
<li><a href="Menu-001" title="DeviantArt">DeviantArt</a></li>
<li><a href="Menu-002" title="Downloads">Downloads</a></li>
<li><a href="Menu-003" title="Wordpress">Wordpress</a></li>
<li><a href="Menu-004" title="Screenshots">Screenshots</a></li>
<li><a href="Menu-005" title="Examples">Examples</a></li>
</ul></div></body>

—End Source Code—
Copyright 2001-2009 Lair360

7.] Done!

Copyrighted By Lair360

Version: 43.1
Revision: 13.2 Build 13

HTML – Transparent iframe

Introduction: this article was written to assist users who support “iframes” for their website.
But, this time, I will show you how to create frames that are transparent…

1.] Download notepad++ from the original author or from a mirror and install the software.
——————————-

http://sourceforge.net/projects/notepad-plus/

http://filehippo.com/download_notepad/

——————————-

2.] Add this iframe into your webpage or modify your existing “iframe”.
—Copy Source Code—

<iframe width="70%" height="500px" name="example" src="example.html" frameborder=0 ALLOWTRANSPARENCY="true" /></iframe>

—End Source Code—
Copyright 2001-2009 Lair360

Notes: change your frame’s width and height to suit your websites’ layout.
But, don’t forget to change the default – page (example.html) and replace it with your own.

3.] Now create a “CSS StyleSheet” and link it to your webpage.
—Copy Source Code—

iframe {
background-color: transparent;
}

—End Source Code—
Copyright 2001-2009 Lair360

Notes: if you want to add your “CSS + Javascript files” as an external file, you’ll need to use these codes instead.

a.] Copy these codes and insert it into the “head” tags. But, don’t forget to replace “name.js” and “style.css” with your own external – files.
—Copy Source Code—

<script type="text/javascript" language="Javascript" SRC="name.js"></script>

<link rel="stylesheet" type="text/css" href="styles.css">

—End Source Code—
Copyright 2001-2009 Lair360

b.] Save your work and continue…

4.] Now, check your “iframe” tags, then add a “class” attribute.
After that, please save your progress…
—Copy Source Code—

<iframe  class="attribute01" width="70%" height="500px" name="example" src="example.html" frameborder=0 ALLOWTRANSPARENCY="true" /></iframe>

—End Source Code—
Copyright 2001-2009 Lair360

Notes: you’ll need to replace class: “attribute01″ with your own tags.

5.] When you’re done with your “iframe”, you’ll need to modify your “CSS files”.
—Copy Source Code—

iframe.attribute01 {
background-color: transparent;
}

—End Source Code—
Copyright 2001-2009 Lair360

6.] Save your progress and exit…

7.] Done!

Tips: if you want to add these codes in a single file, you’ll need to use this method.

—Copy Source Code—

<head>
<style type="text/css">
<!--
iframe.attribute01 {
background-color: transparent;
}
-->
</style>
</head>
<body>
<iframe class="attribute01" width="500px" height="99px" name="about" src="blank.htm" frameborder=0 ALLOWTRANSPARENCY="true" /></iframe>
</body>

—End Source Code—
Copyright 2001-2009 Lair360