Coding Day » CSS

Google Wide Search Box for Firefox Stylish

Can — Mon, 22 Jan 2007 02:52:43 +0000

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 }
}

Scrollable Box (div) in CSS

Can — Sat, 14 Oct 2006 03:24:02 +0000

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.

Transparent DIV SPAN for all browsers, Firefox, Opera, Safari, Chrome, Internet Explorer

Can — Sun, 16 Jul 2006 17:17:52 +0000

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; 
}

A transparent div.

The opacity value changes from 0 to 1.