Jump to content


Photo
Latest Blog Entries

Latest Blog Entries Customized for iBlogPro5



Best Answer Jenny , 24 April 2013 - 02:23 PM

Thanks for proving this to the community!

Go to the full post


  • Please log in to reply
1 reply to this topic

#1 Tang

Tang

    Advanced Member

  • Members
  • 51 posts
  • LocationFrankfurt - Germany
  • Framework Version:2.4.4
  • Country: Country Flag

Posted 23 April 2013 - 06:52 PM

Hi everybody … justed wanted to share some Custom CSS to integrate the beautiful »Latest Blog Entries« Section from Enrique Chávez into iBlogPro5 design.

 

http://www.screencast.com/t/ZkrvuSfm

 

And her are my modifications:

 
/* LATEST BLOG ENTRIES (adjustments) */

.slides {
    text-align: center !important;
}

.caroufredsel_wrapper ul {
    margin-left: 12px;
    margin-right: 30px;
}

.caroufredsel_wrapper {

    width: 1069px !important;
}

.latest-slider ul.slides li {
    width: 200px;
}

.latest-slider .blog-thumb img {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    margin: 1px 0px 12px 1px; 
    padding: 3px;
    width: 92%;
}

.latest1 ul.slides li {
    background-color: #FAFAFA;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #F2F2F2);
    background-repeat: repeat-x;
    border: 1px solid #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    padding: 20px 20px 5px;
    text-shadow: 0 1px 0 #FFFFFF;
    border-color: #E4E4E4 #CCCCCC #BBBBBB;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 #CCCCCC;
}

.latest-slider .latest_pagination {	
	margin: 5px 48.6%;
}

/* LATEST SLIDER (Arrow to Dots Modification) */

.latest-slider .nav {
-moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #E7E9EC;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
    color: rgba(0, 0, 0, 0.4);
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    margin: 0 8px 4px 0;
    padding: 1px 10px 0;
    text-align: center;
    height: 10px;
    padding: 0;
    text-indent: -1000em;
    width: 10px;
}

.latest-slider #prev_pag:hover {
	background: none repeat scroll 0 0 #D3D7DC;
    color: rgba(0, 0, 0, 0.7);
}

.latest-slider #next_pag:hover {
	background: none repeat scroll 0 0 #D3D7DC;
    color: rgba(0, 0, 0, 0.7);
}

Put into Custom CSS-Plugin and Enjoy  :D

Aloha - Tang

 

 


  • Simon_P and Clifford P like this

#2 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 24 April 2013 - 02:23 PM   Best Answer

Thanks for proving this to the community!







Also tagged with one or more of these keywords: Latest Blog Entries