Home Forums Porto Admin Template blog carousel

This topic contains 2 replies, has 2 voices, and was last updated by  ostrica 6 months, 2 weeks ago. This post has been viewed 244 times

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10018254

    ostrica
    Participant

    I bought admin and html version and now I want to use the blog carousel on admin template. How to incorporate that? Do i just get the css and .js on html5 version? If yes which one?

    <div class=”recent-posts mb-xl”>
    <h2>Latest Blog Posts</h2>
    <div class=”row”>
    <div class=”owl-carousel owl-theme mb-none” data-plugin-options='{“items”: 1}’>
    <div>
    <div class=”col-md-6″>
    <article>
    <div class=”date”>
    <span class=”day”>15</span>
    <span class=”month”>Jan</span>
    </div>
    <h4 class=”heading-primary”>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. read more <i class=”fa fa-angle-right”></i></p>
    </article>
    </div>
    <div class=”col-md-6″>
    <article>
    <div class=”date”>
    <span class=”day”>15</span>
    <span class=”month”>Jan</span>
    </div>
    <h4 class=”heading-primary”>Lorem ipsum dolor</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. read more <i class=”fa fa-angle-right”></i></p>
    </article>
    </div>
    </div>
    <div>
    <div class=”col-md-6″>
    <article>
    <div class=”date”>
    <span class=”day”>12</span>
    <span class=”month”>Jan</span>
    </div>
    <h4 class=”heading-primary”>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. read more <i class=”fa fa-angle-right”></i></p>
    </article>
    </div>
    <div class=”col-md-6″>
    <article>
    <div class=”date”>
    <span class=”day”>11</span>
    <span class=”month”>Jan</span>
    </div>
    <h4 class=”heading-primary”>Lorem ipsum dolor</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. read more <i class=”fa fa-angle-right”></i></p>
    </article>
    </div>
    </div>
    <div>
    <div class=”col-md-6″>
    <article>
    <div class=”date”>
    <span class=”day”>15</span>
    <span class=”month”>Jan</span>
    </div>
    <h4 class=”heading-primary”>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. read more <i class=”fa fa-angle-right”></i></p>
    </article>
    </div>
    <div class=”col-md-6″>
    <article>
    <div class=”date”>
    <span class=”day”>15</span>
    <span class=”month”>Jan</span>
    </div>
    <h4 class=”heading-primary”>Lorem ipsum dolor</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. read more <i class=”fa fa-angle-right”></i></p>
    </article>
    </div>
    </div>
    </div>
    </div>
    </div>


    #10018262

    Support2
    Keymaster

    Hello,

    Porto Admin already comes with carousel, so you need to import only the css styles from Porto HTML.

    1) On any page what you want add this code of carousel with the class recent-posts:

    <div class="owl-carousel owl-theme recent-posts" data-plugin-carousel data-plugin-options='{ "dots": true, "items": 1 }'>
    	<div> 
    		<div class="col-md-6">
    			<article>
    				<div class="date">
    					<span class="day">15</span>
    					<span class="month">Jan</span>
    				</div>
    				<h4 class="heading-primary"><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. <a href="/" class="read-more">read more <i class="fa fa-angle-right"></i></a></p>
    			</article>
    		</div>
    		<div class="col-md-6">
    			<article>
    				<div class="date">
    					<span class="day">15</span>
    					<span class="month">Jan</span>
    				</div>
    				<h4 class="heading-primary"><a href="blog-post.html">Lorem ipsum dolor</a></h4>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. <a href="/" class="read-more">read more <i class="fa fa-angle-right"></i></a></p>
    			</article>
    		</div>
    	</div>
    	<div>
    		<div class="col-md-6">
    			<article>
    				<div class="date">
    					<span class="day">12</span>
    					<span class="month">Jan</span>
    				</div>
    				<h4 class="heading-primary"><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. <a href="/" class="read-more">read more <i class="fa fa-angle-right"></i></a></p>
    			</article>
    		</div>
    		<div class="col-md-6">
    			<article>
    				<div class="date">
    					<span class="day">11</span>
    					<span class="month">Jan</span>
    				</div>
    				<h4 class="heading-primary"><a href="blog-post.html">Lorem ipsum dolor</a></h4>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="/" class="read-more">read more <i class="fa fa-angle-right"></i></a></p>
    			</article>
    		</div>
    	</div>
    	<div>
    		<div class="col-md-6">
    			<article>
    				<div class="date">
    					<span class="day">15</span>
    					<span class="month">Jan</span>
    				</div>
    				<h4 class="heading-primary"><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. <a href="/" class="read-more">read more <i class="fa fa-angle-right"></i></a></p>
    			</article>
    		</div>
    		<div class="col-md-6">
    			<article>
    				<div class="date">
    					<span class="day">15</span>
    					<span class="month">Jan</span>
    				</div>
    				<h4 class="heading-primary"><a href="blog-post.html">Lorem ipsum dolor</a></h4>
    				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. <a href="/" class="read-more">read more <i class="fa fa-angle-right"></i></a></p>
    			</article>
    		</div>
    	</div>
     </div>

    2) In assets/stylesheets/theme-custom.css add this:

    /* Recent Posts */
    .recent-posts h4 {
    	margin-bottom: 7px;
    }
    
    .recent-posts article.recent-post h4 {
    	margin: 0 0 3px 0;
    }
    
    .recent-posts article.recent-post h4 a {
    	display: block;
    }
    
    .recent-posts .date {
    	float: left;
    	margin-right: 10px;
    	margin-top: 8px;
    	text-align: center;
    }
    
    .recent-posts .date .month {
    	background: #CCC;
    	border-radius: 0 0 2px 2px;
    	box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.07) inset;
    	color: #FFF;
    	font-size: 0.9em;
    	padding: 0 10px 2px;
    }
    
    .recent-posts .date .day {
    	background: #F7F7F7;
    	color: #CCC;
    	display: block;
    	font-size: 18px;
    	font-weight: 500;
    	font-weight: bold;
    	padding: 8px;
    }
    
    section.section .recent-posts .date .day {
    	background: #FFF;
    }

    Please try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10018263

    ostrica
    Participant

    Thanks so much.


Viewing 3 posts - 1 through 3 (of 3 total)