How To Use CSS – Configuring With Your Magento Store

We offer you a review of some useful advice on CSS configuration in Magento ®.

Magento And How To Use CSS

How to change the background color

In order to attract more attention to your site, you can change the background color of the highlighted text. The following code works in Mozilla Firefox and Safari browsers:

::selection{ /* Safari and Opera */
background:#c3effd;
color:#000;
}
::-moz-selection{ /* Firefox */
background:#c3effd;
color:#000;
}

Just replace the color values with the ones you need.

Replacing text with an image

This is a good way to attract users’ attention. You can replace a long text with a beautiful image, thus using infographic and other methods. But you should be careful – if the same method is used too often Google may reduce your store ratings:

.header{
text-indent:-9999px;
background:url('someimage.jpg') no-repeat;
height: 100px; /*dimensions equal to image size*/
width:500px;
}

The above code serves to replace the text with an image but the search engines will still see the text.

Minimal cross-browser height

Some web browsers, e.g. IE 6, do not recognize min-height tag but the following code will correct that issue:

 #container{
height:auto !important;/*all browsers except ie6 will respect the !important flag*/
min-height:500px;
height:500px;/*Should have the same value as the min height above*/
}

Also, if some elements are not displayed on your site through that browser version, you should add the value ‘position: relative;’ to their CSS code.

URL address

Of course, you can create a hyperlink in your text in such a way that a user sees the destination URL before clicking the link. But if you cannot do that, use the following code:

a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}

Red line

Not all online businessmen like when a new line starts with a usual uppercase letter. Marketing specialists insist on making all even slightly significant elements bright and attractive. In order to make the initial letters large it is necessary to use the following code:

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:3.0em;
font-family:Georgia;
}

If you wish all text to be written in capitals, not only the initial letter, you need to add the following code:

h2 { text-transform: capitalize;}

In order to create an interesting site style, you can also use the following method. All letters on the site will be larger but the letters standing after the initial ones will be smaller in order to make some contrast:

h2 { font-variant:small-caps; }

Forms without tables

Table-based forms are now actively being replaced with more good-looking and modern ones based on a label attribute. You can configure any GoMage theme in that way.

In order to implement such a form into your store you need to type the form code in the following way:

In HTML:

<form method="post" action="#" >
<p><label for="username" >Username</label>
<input type="text" id="username" name="username" />
</p>
<p><label for="password" >Password</label>
<input type="password" id="password" name="pass" />
</p>
<p><input type="submit" value="Submit" /></p>
</form>

In CSS:

p label{
width:100px;
float:left;
margin-right:10px;
text-align:rightright;}

If any methods need clarification, please feel free to contact our Magento ® development team.