Blog

30 Nov

Evolutive2 Snippets

by Tipografo in Blog, Snippets 2

Adding a fixed FULL SIZE background-image:

.lte.lte-advanced #header,
.lte.lte-advanced #content{background: transparent;}
body.lte.lte-advanced{
background: transparent  url(http://link-to-your-image/image.jpg) center center fixed no-repeat;
-moz-background-size: 100% auto;
background-size: 100% auto;
}

Test it and you’ll love it!

Menu link hover background color:

.menu li a:hover{background: red;}

Change page width:

.lte.lte-advanced #grid-content .post.post-page{width: 900px;}

Add your custom background-image:

.lte.lte-advanced #header,
.lte.lte-advanced #content{background: transparent;}
body.lte.lte-advanced{
background: transparent url(http://link-to-your-image/image.jpg) no-repeat top left;
}

Adding a tiled background-image:

.lte.lte-advanced #header,
.lte.lte-advanced #content{background: transparent;}
body.lte.lte-advanced{
background: transparent url(http://link-to-your-image/image.jpg) repeat top left;
}

Adding a fixed background-image:

.lte.lte-advanced #header,
.lte.lte-advanced #content{background: transparent;}
.lte.lte-advanced{
background-image: url(http://link-to-your-image/image.jpg);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;}

You may want to adjust background-repeat and background-position to fit your needs.

2 Responses to “Evolutive2 Snippets”

  1. narf says:

    If you want to use a hover shadow effect on your excerpt post (disabled link to expanted post) please copy the css code from your post-specific-option panel ex.
    .lte-advanced.lte #grid-content .post#post-208 .pre{ } in your lte editor and set the box shadow values after this exemple:

    .lte-advanced.lte #grid-content .post:hover#post-208 .pre{ box-shadow: 0 0 5px 5px #888888; opacity: 0.45;}

    play a little bit with the values for your personal settings

  2. narf says:

    perhapes you will add to your Post hover style (overlayes title) your own graphic.
    in this case you can add in your Advanced LTE this little code snippet:

    .lte.lte-advanced #grid-content .post.image-post a.ajaxtrigger:hover {
    background: url(http://trivialshock.com/wp-content/uploads/2012/06/twitter_logo_black.png) no-repeat scroll center center transparent;
    opacity: 0.5;
    }

    of course you can change the settings ex. the url (add your own url)and the opacity from 0.5; to whatever you need. the graphic messure in my case is 70x70px.

    check it on my site: http://www.trivialshock.com/

Leave a Reply

Why Evolutive is the perfect WordPress Photography Theme – Jérôme Montagne and AltLand Project

On the Role and Mission of Design today: Interview with Jaime Derringer of Design Milk

Members Login