Mobile Thumbnail Customization

All classes for mobile thumbnail For bloggers

mobile-post-outer

mobile-thumbnail-img

mobile-index-content

Add mobile-index-post in bloggers template 

search the code in given below , the given code is render within  </b:includable>   tag.

<b:includable id='mobile-index-post' var='post'>

 paste the code below just after the code above codebox..

 <div class='mobile-index-post'>

Dont forget to put closing  </div>  code just before the  closing   </b:includable>   tag 


my best complete mobile template code

/* Mobile
----------------------------------------------- */
body.mobile  {
  background-size: $(mobile.background.size);
}

.mobile .body-fauxcolumn-outer {
  background: $(mobile.background.overlay);
}

.mobile .body-fauxcolumn-outer .cap-top {
  background-size: 100% auto;
}

.mobile .content-outer {
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
  box-shadow: 0 0 3px rgba(0, 0, 0, .15);
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;

}
.mobile .tabs-inner { 



}
.mobile .tabs-inner .widget ul {
height: 100%;
padding: 0px;
margin: 0;
background: #000000;

 
}

.mobile .post {
  margin: 0;

 
 
}

.mobile .post-body h2 {
  font-size: 80px;
  font-family: 'oswald', sans-serif !important;
  letter-spacing:1px;
 
}


.mobile .post-body h3 {
  font-size: 20px;
  font-family: 'oswald', sans-serif !important;
  letter-spacing:1px;
 
}




.mobile .post-body h4 {
font-size: 15px;
 font-family: 'oswald', sans-serif;
  letter-spacing:1px;
}

.mobile .post-body {

  font-size:15px;
  font-color:#474532;
  word-spacing:.3px;
  line-height: 1.5;
 letter-spacing: 0.1px;
 padding-left :3px;
 padding-right :3px;
font-family: 'Catamaran', sans-serif;
font-weight:500;

}

.mobile .main-inner .column-center-inner .section {
  margin-top: 0px;
}

.mobile .date-header span {
  padding: 0.1em 10px;
  margin: 0 0px;
}

.mobile h3.post-title {
font-family: 'IM Fell Great Primer SC', serif;
font-size: 20px;
line-height:25px;
  margin-top: 0px;
 margin-bottom: 0px;
  margin-left: 10;
}

.mobile .blog-pager {
  background: transparent none no-repeat scroll top center;
}

.mobile .footer-outer {
  border-top: none;
}


.mobile .main-inner, .mobile .main-inner {
  background-color: $(content.background.color);
}
.mobile .main-footer, .mobile .footer-inner {
  background-color: #BA1513;



}

.mobile-index-post {

display:webkit-box
webkit-box-shadow: 0 10px 6px -6px #777;
 
    justify-content:space-around;
    text-align:left ;

  margin: 0 auto;
  margin-top: 10px;;

  height: auto;
  background: #F2F2F2;
  border: 1px solid #ccc;

       


}

.mobile-post-outer {

  border: 0px solid #58A2C7;
  padding:5px;
  width:100%;
  height:auto
  font-size:18px;
  background:#eeeeee;
 border-bottom : none!important;



   

}
.mobile-index-thumbnail img {

  padding:5px;
  width:100% !important;
  height:140px;



}


.mobile-index-title {
font-family: 'oswald', sans-serif;
  border-bottom: 0px solid #58A2C7;
  padding:5px;
  width:80%;
  font-size:18px;


}

.mobile-index-arrow {

  color: red;

 
}


.mobile-index-contents {
  color: $(body.text.color);
  overflow:hidden;

}


.mobile .tabs-inner .section:first-child {
  border-top: none;
}


.mobile .tabs-inner .PageList .widget-content {

  background-color: $(tabs.selected.background.color);
  color: $(tabs.selected.text.color);
  height:40px;
  border-top: $(tabs.border.width) solid $(tabs.border.color);
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.border.color);