Semantic UI Colors

It’s been awhile since I started using Semantic UI for several of my projects. It’s easy to forget the class name for different colors available with the framework. Many a time, I have to look throught semantic.css source to find the colors I need. So I decided to list them here for future reference.

I am using Semantic UI – 1.12.3.

Semantic Color Class

  • black
  • blue
  • green
  • orange
  • pink
  • purple
  • red
  • teal
  • yellow
  • positive
  • negative

Equal Height Division Using Javascript And CSS

This technique is really simple. Having equal height division in your design is sometimes necessary to maintain consistent look and feel on your layout. You can use this technique to make your sidebars equal height, or to make your content area and the sidebars equal height.

Get The Source Code:  Without Jquery  With Jquery

Step 1:
Create an index.html file for your layout. I create an example html layout for this article.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Equal Height Division Using Javascript and CSS</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script type="text/javascript" language="javascript" src="javascript.js">

<body onload="grabtheclass()">
    <div class="outer">
        <div class="inner">
            <div class="main">
                <p>The Main Content</p>
                <p>The Main Content</p>
                <p>The Main Content</p>
                <p>The Main Content</p>
                <p>The Main Content</p>
            <div class="sidebar">
                <p>The Sidebar Content</p>
                <p>The Sidebar Content</p>
                <p>The Sidebar Content</p>

Continue reading Equal Height Division Using Javascript And CSS

Floating DIV Above Embedded Flash Object

This simple tips will help you make your division float above flash object or flash player embedded on your website. When you embed a flash object or flash player on your website, the flash object will take the highest number possible z-index by default and all the other division layer will appear below the flash object. Actually this property of embedded flash object is quite useful in most cases. However when you want some text or division to appear on top of your flash object, you need this tips to fix that issue. You have three options to fix this floating issue.

First option is to compile/recompile your flash object with the parameter ‘wmode‘ value set to ‘opaque‘. However, in most cases, we normally get a precompiled flash object rather than the source flash file. In such cases the second option will be more suitable. Second option is to add a parameter in your flash object as shown in example below

	<param name="bgcolor" value="#FFFFFF" />
	<param name="width" value="670" />
	<param name="height" value="390" />
	<param name="wmode" value="opaque" />

Third option is to add an attribute ‘wmode’ with value set to ‘opaque’ in the object file. After performing any one these, your flash player or flash object will float below <DIV> having higher z-index.

WordPress Blogroll Icon

After a long pause I came back with this tweak for wordpress. Here it comes, since I work a lot with wordpress these days. :)

I came across this wordpress tweak when one of my client wants a Blogroll Icon to be displayed along with the blogroll link. So here’s the steps on ‘How to show a Blogroll Icon’ in wordpress blog. Originally, what you have with wordpress blogroll is a list of links to websites and blogs. So to show image beside the blogroll link (most probably on the right side of the link text), perform the following steps.

First you need to get the plugin ZocPowerblogroll from his website. Download the plugin and this plugin will do most of the work for us.
Continue reading WordPress Blogroll Icon