home
I will show you a trick that saves us to import an image. We will use Pseudo -Class:
content:"|";
line-height:2.2;
color:white;
font-weight:300;
}
nav#menu-secondaire ul li:last-child:before {
content: none;
}
Overwrite a element.style css
Sometimes you want to change the style of an HTML element, but that is already styled by element.style.
For example in this case, we will change the border:
We can use [style ] and shown ! Important to write over the element.style.
p.add_to_cart_inline[style]
{
border:0px solid white !important;
}
SHAPING microdata CSS - WordPress
When we use microdatas , bring the HTML5 semantics, syntax is somewhat different. This tutorial suggests you an approach to model its items.
Here's an example:
<div itemscope itemtype = " http://schema.org/LocalBusiness ">
<div itemprop = "name "> ViWeb </ div>
</ div>
How to shape it :
[itemprop="name"] {
color: red;
font-size: 14px;
}
Stylesheet for Internet Explorer - IE
<!--[if lt IE 9]>
<link href="<?php bloginfo( 'stylesheet_directory' ); ?>/ie.css" rel="stylesheet" type="text/css" media="all" />
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
Style sheet for phone and tablet
Change the display to a specific screen size, Iphone, Ipad ...
If you wish to change the display to a specific screen size, a new style sheet can be called. The following code should be placed in the header.php
Calling a WordPress stylesheet smartphone:
<link href="<?php bloginfo( 'stylesheet_directory' ); ?>/mobile.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 600px)" />
Calling a WordPress style sheet for tablet
Buttons with css3 texture
CSS to the base of the button and the texture
body .button
{
text-decoration: none;
font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
display: inline-block;
text-align: center;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
/*width: 100%;*/
border:none;
}
body .button span
{
border:none;
/*width: 100%;*/
display: block;
padding: 0.5em 2.5em;
/* The background pattern */
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
-moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
/* Pattern settings */
-moz-background-size: 3px 3px;
-webkit-background-size: 3px 3px;
background-size: 3px 3px;
color: rgb(138, 138, 138);
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 300;
}
For the color of the button:
body .button-couleur
{
background: #couleur1;
background: -webkit-gradient(linear, left top, left bottom, from(#couleur1), to(#couleur2) );
background: -moz-linear-gradient(-90deg, #couleur1, #couleur2);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#couleur1', endColorstr='#couleur2');
}
/*body .button-couleur:hover
{
background: #couleur1;
background: -webkit-gradient(linear, left top, left bottom, from(#couleur1), to(#couleur2) );
background: -moz-linear-gradient(-90deg, #couleur1, #couleur2);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#couleur1', endColorstr='#couleur2');
}*/
/*body .button-couleur:active
{
background: #couleur1;
}*/
Home
