Home Forums Porto Template Icon Boxes

This topic contains 10 replies, has 2 voices, and was last updated by  rizwanmgm 6 months ago. This post has been viewed 320 times

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #10024288

    rizwanmgm
    Participant

    Dear Author,

    Please help me to create icon inside boxeslike this


    #10024290

    Support2
    Keymaster

    Hello, thanks for your purchase 🙂

    Here is the code you need for that:

    <div class="featured-box featured-box-effect-5 background-color-primary pt-xlg pb-xlg">
    	<div class="box-content p-xlg">
    		<i class="icon-featured fa fa-user text-color-light"></i>
    		<h4 class="text-color-light">Loved by Customers</h4>
    		
    	</div>
    </div>

    You can see more examples at:
    http://preview.oklerthemes.com/porto/5.7.2/shortcodes-icon-boxes.html

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

    Kind Regards,

    Rodrigo.


    • This reply was modified 6 months, 1 week ago by  Support2.
    #10024292

    rizwanmgm
    Participant

    Dear Support,

    Thanks for reply, I try but its not working, can you give me complete code as in the link.


    #10024302

    Support2
    Keymaster

    Hello,

    Sorry its my fault. Was missing the wrapper “featured-boxes featured-boxes-style-4”. Please try with the code below:

    <div class="container">
    	<div class="row">
    		<div class="featured-boxes featured-boxes-style-4">
    			<div class="col-md-3">
    				<div class="featured-box featured-box-effect-5 background-color-primary pt-xlg pb-xlg">
    					<div class="box-content p-xlg">
    						<i class="icon-featured fa fa-user text-color-light"></i>
    						<h4 class="text-color-light">Loved by Customers</h4>
    					</div>
    				</div>
    			</div>
    			<div class="col-md-3">
    				<div class="featured-box featured-box-effect-5 background-color-secondary pt-xlg pb-xlg">
    					<div class="box-content p-xlg">
    						<i class="icon-featured fa fa-user text-color-light"></i>
    						<h4 class="text-color-light">Loved by Customers</h4>
    					</div>
    				</div>
    			</div>
    			<div class="col-md-3">
    				<div class="featured-box featured-box-effect-5 background-color-tertiary pt-xlg pb-xlg">
    					<div class="box-content p-xlg">
    						<i class="icon-featured fa fa-user text-color-light"></i>
    						<h4 class="text-color-light">Loved by Customers</h4>
    					</div>
    				</div>
    			</div>
    			<div class="col-md-3">
    				<div class="featured-box featured-box-effect-5 background-color-quaternary pt-xlg pb-xlg">
    					<div class="box-content p-xlg">
    						<i class="icon-featured fa fa-user text-color-light"></i>
    						<h4 class="text-color-light">Loved by Customers</h4>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

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

    Kind Regards,

    Rodrigo.


    #10024310

    rizwanmgm
    Participant

    Dear Support,

    I use your code and it looks like this https://www.dropbox.com/s/wx6dcyuijsrtvxj/intranet.png?dl=0

    please i need same as above link boxes, i am creating for my company intranet.

    Thanks


    #10024315

    Support2
    Keymaster

    Hello,

    Viewing your image, can see that you trying to put the icon boxes in a little space.
    In that case, try using just one icon boxes, for it use the code below:

    <div class="container">
    	<div class="row">
    		<div class="featured-boxes featured-boxes-style-4">
    			<div class="col-md-12">
    				<div class="featured-box featured-box-effect-5 background-color-primary pt-xlg pb-xlg">
    					<div class="box-content p-xlg">
    						<i class="icon-featured fa fa-user text-color-light"></i>
    						<h4 class="text-color-light">Loved by Customers</h4>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

    If you still can’t accomplish this, please send a test link of your website for us, so we can inspect your code and send the solution for you.

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

    Kind Regards,

    Rodrigo.


    #10024318

    rizwanmgm
    Participant

    Dear Support,

    Thanks for reply.
    One box is showing good, i want same above code to be display in col-md-4 with two rows and 3 columns, so total 6 icon boxes to be display in col-md-4.
    i hope u got my idea, actually i divided row into col-md-4, col-md-5, col-md-3.

    thanks


    #10024324

    rizwanmgm
    Participant

    Dear Support,

    Actually i am trying to make my intranet page same like this link https://www.dropbox.com/s/7xtwty7d60zyt78/carousels.png?dl=0

    please let me know how can i display carousels same like shown in the link image.

    appreciate your kind help.

    Thanks


    #10024330

    rizwanmgm
    Participant

    Dear Support,

    Please help me to make my page like this https://www.dropbox.com/s/7xtwty7d60zyt78/carousels.png?dl=0

    appreciate your kind help.

    Thanks


    #10024344

    Support2
    Keymaster

    Hello,

    1) Regarding the carousel, Porto don’t comes with this exactly layout for carousels, but you can do same like:
    HTML:

    <div class="owl-carousel owl-theme nav-inside pull-left custom-carousel-style mr-lg mb-sm" data-plugin-options="{'items': 1, 'margin': 10, 'animateOut': 'fadeOut'}">
    	<div>
    		<span class="thumb-info thumb-info-lighten thumb-info-bottom-info thumb-info-centered-icons custom-thumb-info">
    			<span class="thumb-info-wrapper">
    				<img src="img/projects/project.jpg"" alt="" />
    				<span class="thumb-info-title">
    					<span class="thumb-info-inner">Project Title</span>
    					<span class="thumb-info-type">Project Type</span>
    				</span>													
    			</span>
    		</span>
    	</div>
    	<div>
    		<span class="thumb-info thumb-info-lighten thumb-info-bottom-info thumb-info-centered-icons custom-thumb-info">
    			<span class="thumb-info-wrapper">
    				<img src="img/projects/project-5.jpg" alt="" />
    				<span class="thumb-info-title">
    					<span class="thumb-info-inner">Project Title</span>
    					<span class="thumb-info-type">Project Type</span>
    				</span>													
    			</span>
    		</span>
    	</div>
    </div>

    * Note added some custom classes.

    Then add in (css/custom.css):

    .custom-carousel-style .owl-dots {
    	bottom: auto !important;
    	top: 0 !important;
    }
    
    .custom-thumb-info .thumb-info-wrapper:after {
    	opacity: 0 !important;
    }
    
    .custom-thumb-info .thumb-info-wrapper img {
    	transform: scale(1) !important;
    }
    
    .custom-thumb-info.thumb-info.thumb-info-bottom-info .thumb-info-title {
    	opacity: 1;
    	transform: translate3d(0,0,0);
    }

    2) To create the box with icons, you can use the code below:

    <div class="col-md-4">
    	<div class="featured-box featured-box-primary">
    		<div class="box-content">
    			<h4 class="text-uppercase align-left">Behind the scenes</h4>
    			<div class="featured-boxes featured-boxes-style-4">
    				<div class="row">
    					<div class="col-md-4 p-xs">
    						<div class="featured-box featured-box-effect-5 background-color-primary mt-none mb-none">
    							<div class="box-content p-xs">
    								<i class="icon-featured fa fa-user text-color-light mb-none"></i>
    								<h4 class="text-color-light text-md mt-none">Customers</h4>
    							</div>
    						</div>
    					</div>
    					<div class="col-md-4 p-xs">
    						<div class="featured-box featured-box-effect-5 background-color-secondary mt-none mb-none">
    							<div class="box-content p-xs">
    								<i class="icon-featured fa fa-user text-color-light mb-none"></i>
    								<h4 class="text-color-light text-md mt-none">Customers</h4>
    							</div>
    						</div>
    					</div>
    					<div class="col-md-4 p-xs">
    						<div class="featured-box featured-box-effect-5 background-color-tertiary mt-none mb-none">
    							<div class="box-content p-xs">
    								<i class="icon-featured fa fa-user text-color-light mb-none"></i>
    								<h4 class="text-color-light text-md mt-none">Customers</h4>
    							</div>
    						</div>
    					</div>
    					<div class="col-md-4 p-xs">
    						<div class="featured-box featured-box-effect-5 background-color-quaternary mt-none mb-none">
    							<div class="box-content p-xs">
    								<i class="icon-featured fa fa-user text-color-light mb-none"></i>
    								<h4 class="text-color-light text-md mt-none">Customers</h4>
    							</div>
    						</div>
    					</div>
    					<div class="col-md-4 p-xs">
    						<div class="featured-box featured-box-effect-5 background-color-primary mt-none mb-none">
    							<div class="box-content p-xs">
    								<i class="icon-featured fa fa-user text-color-light mb-none"></i>
    								<h4 class="text-color-light text-md mt-none">Customers</h4>
    							</div>
    						</div>
    					</div>
    					<div class="col-md-4 p-xs">
    						<div class="featured-box featured-box-effect-5 background-color-secondary mt-none mb-none">
    							<div class="box-content p-xs">
    								<i class="icon-featured fa fa-user text-color-light mb-none"></i>
    								<h4 class="text-color-light text-md mt-none">Customers</h4>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

    Kind Regards,

    Rodrigo.


    • This reply was modified 6 months ago by  Support2.
    • This reply was modified 6 months ago by  Support2.
    #10024365

    rizwanmgm
    Participant

    Dear Support,

    Excellent! its same as i am looking for.

    Thanks a lot.


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