Evolutive2 Snippets

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 Comments

  1. 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

    Reply
  2. 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/

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>