Override CSS property right to left


This case is an example on how to override CSS property right to left

We have this AdSense banner floating on the right side of the screen. What if you want to change it to the left
Recently, I installed Floating AdSense plugin for WordPress. It’s very helpful to add AdSense banner floating on the site.
However, this plugin floats the banner automatically on the right. Somehow, when the float option changed to left, it doesn’t work

The original code is look alike this one

#ad_divRight {
overflow: hidden;
border: 2px solid #3c95d9;
background-color: #fff;
right: 0px;
position: fixed;
top: 5%;
margin-left: 0px;
float: right;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #ffffff;
padding: 0 0 2px 0;
z-index: 10;

See right:0 , this forces banner ad to the right corner of the screen/site. We can override this alignment to the left with CSS with this code

#ad_divRight { left: 0 !important; right: auto !important; }

How to make IE to display iframes with transparent background?

1. Add allowTransparency=”true” property to the iframe

<iframe id="frame_one" src="iframe.php" allowTransparency="true">Browser not compatible</iframe>

2. Add background:transparent to it’s body tag or internal styles in the head section of an HTML page

<body style="background:transparent"></body>


<style type="text/css">
html,body { background: transparent; }

How to change the bullet size and color with CSS

The following code snippet help you change the bullet size and color of your unordered lists.
We are using simple CSS code to do that

1. Create your bullet list image via Adobe Photoshop or you can use another image editor to do that (e.g Pixelmator).
Save the image as a transparent png image file. Upload the png file to your website, put that inside the images folder for convenience
2. Add the following to style.css or custom.css

 ul { list-style-image: url('images/dot.png'); list-style-type: none; }