Coding Day

Sometimes Google’s search box is not enough as a size. So I decided to add a simple CSS class to the textbox to display wider and clearer.To add some css style sheets to sites in Firefox, there is a powerful addon called stylish. So a simple stylish css code can provide that change. As a result Google search box becomes wider and with font colour red. It is optimized for  wide screens width sized 1280.

Before



After

You can install it from UserStyles.org or just copy the code to your stylish add-on. You need to have either GreaseMonkey or Stylish add-ons installed on Firefox

@namespace url(http://www.w3.org/1999/xhtml);
/*Coded by Can Erten */
@-moz-document url-prefix(http://www.google.) 
{	
	[name="q"] {width:925px; font-size:14pt!important;
			 color:red!important; font-weight:bold!important }
}

As you may notice I updated my blog theme to scrollable boxes to make the navigation easier. You might still go to the individual page for viewing. You can do this with CSS’ overflow property.You also have to give the width and height, so the browser can understand where to put the scrolls. To make scrollbars you need to set overflow property to “scroll”.

.box
{
 width:445px;
 height:250px;
 overflow: scroll;
}

There is another overflow code “auto”, this makes scrolls if needed, and leaves it if the contents fits to the div. I haven’t chosen that because I wanted to have symmetry.

To make an HTML element transparent. Just use these css elements in your css class.  filter, moz-opacity, opacity.

Internet Explorer uses filter and firefox uses moz-opacity.

.transparent
{
   filter:alpha(opacity=60); 
   -moz-opacity: 0.6; 
   opacity: 0.6; 
}

<div class="transparent">A transparent div.
</div>

The opacity value changes from 0 to 1.