Jump to content
Sign in to follow this  
Tang

Latest Blog Entries Customized for iBlogPro5

Recommended Posts

Tang    3
Tang

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

 

 

  • Like 2

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

Thanks for proving this to the community!


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • vladimirtrajkovic
      By vladimirtrajkovic
      Hi,
       
      I have installed the LBE plugin recently and it worked perfectly. Than, to be honest, I am not sure whether I have changed something on my site (I did not installed new plugin for sure, but I've played with DMS Pro plugin, also disabled and enabled some plugins) I do not see the images on the LBE. The frames are there, if I scroll over with mouse I see the image tag, but the images are not there.
       
      I am serving my images through Cloudinary and I did not have any problem with this service so far. I tried DOM explorer and I receive the following error message:
       
      DOM7009: Unable to decode image at URL: 'https://res.cloudinary.com/high-tech-news/image/upload/c_crop,h_500,w_900,x_0,y_3/h_100,w_180/v1415456211/HTC-Desire-Eye_gp7dwt.jpg'.
      File: HTC-Desire-Eye_gp7dwt.jpg
       
      Could you help me out sorting this issue? Does this issue looks familiar to anyone?
       
      My website: htechnews.com
       
      Thanks,
      Vladimir
    • primetime
      By primetime+
      Hi tmeister,
       
      There is an irrelevant line showing in the right side of the section while using Firefox.
       
      http://travelblogfest.com/
       
      See attached
       
    • allanlove
      By allanlove+
      Hi
       
      I have this section installed on a site with a black background and this makes the navigation arrows very difficult to see. Can you please tell me how to change the appearance of them? I'm not great with code, so if there is any custom coding involved can you please let me have the code and also tell me where on the site to place it?
       
      Thanks
       
      Allan 
×