Category: How-to

TODO

 

<!--appc-recent-->
<ul class="primary-bg appc-dynamic" id="appc-recent">
    {{posts show="all" size="4" assign_to="recent_posts"}}
    {{foreach $recent_posts.data as $item}}
        <li>
            <div class="recent-post-img">
                <a href="#"> <img src="{{$item.post_thumbnail}}" alt="{{$item.post_title}}"></a>
            </div>
            <div class="recent-post-content">
                <h4><a href="{{$item.post_permalink}}">{{$item.post_title}}</a></h4>
                <span>{{date when="{{$post.post_date}}" format="F j, Y"}}</span>
            </div>
        </li>
    {{foreachelse}}
     	<p>No posts.</p>
    {{/foreach}}
</ul><!--./appc-recent-->

 

TODO:

NOTE:

• Install Featured Galleries plugin
• Use {{gallery_block}} binder

 

HTML

<div class="bs-example" data-example-id="simple-carousel">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        {{gallery_block id="{{$post.ID}}" assign_to="gallery"}}
        <!--buttons-->
        <ol class="carousel-indicators">
            {{foreach $gallery as $image}}
                <li data-target="#carousel-example-generic" data-slide-to="{{$image@index}}" class="{{if $image_url@index eq 0}}active{{/if}}"></li>
            {{/foreach}}
        </ol>

        <!--slides-->
        <div class="carousel-inner" role="listbox">
            {{foreach $gallery as $image_url}}
            <div class="item {{if $image_url@index eq 0}}active{{/if}}">
                <img alt="First slide [900x500]" src="{{$image_url}}" data-holder-rendered="true">
            </div>
            {{/foreach}}
        </div>
        {{/gallery_block}} 

        <!--arrows-->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

 

 

Sometimes it might be challenging to vertically centered an element within your web page design. Well, display:flex is a very easy way for you to achieve that goal.

 

Here is the HTML code:

<section class="container-fluid my-block">
    <div class="wrapper">
        <h1>Add your code here</h1>
    </div>
</section>

 

CSS Code:

.my-block {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    align-content: center;
    height : 300px;
    background-color: #ddd;
    }
.my-block .wrapper {
    width: 100%;
    }
.my-block .wrapper h1 {
    text-align: center;
    width: 100%; 
    }

 

The Bootstrap framework allows to fix the navigation bar to the to of the page. When using the CSS class .navbar-fixed-top, the navigation bar will remain fixe to the top as the page is being scrolled. When the position of an element is set to ‘fixed’, the element’s width and height are not taken into account when determining the overall size of the page.

Inside the builder that means that a block that only has a navigation bar that it is set to fixed (.navbar-fixed-top), the block will return zero (0) as the height of the navigation bar. As a result, the block will disappear from the screen since its height will be set to zero (0). To prevent this, when using .navbar-fixed-top make sure that you add the following code to the CSS of your block.

 

@media (min-width: 992px) {
    .in-builder .navbar-fixed-top {
        position: relative;
        background-color: rgba(0, 0, 0, 0.1);
    }
}

 

This will set the navigation bar position to relative, allowing the builder to calculate the height of the navigation bar and displaying it appropriately in the builder interface.

TODO:

See: http://flexslider.woothemes.com/index.html

HTML

<section class="section promo appc-dynamic">
    {{require type="css" library="flexslider"}}
    {{require type="javascript" library="flexslider"}}
    
    {{json assign_to="slides"}}
        {
            "data": [
                {
                    "post_thumbnail": "http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg",
                    "post_title": "Me veras caer por la ciudad de la furia",
                    "post_content": "You specified you wanted a fixed height and width so that Flexslider"
                },
                {
                    "post_thumbnail": "http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg",
                    "post_title": "Donde nadie sabe de mi",
                    "post_content": "The code I gave you can be changed to a fixed size to fit"
                },
                {
                    "post_thumbnail": "http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg",
                    "post_title": "Y yo soy parte de todo",
                    "post_content": "The element with the class .flex-viewport is the container"
                }
            ]
        }
    {{/json}}
    <div class="slider-wrapper">
        <div class="flexslider">
            <ul class="slides">
                {{foreach $slides.data as $slide}}
                <li class="slide" style="background-image: url('{{$slide.post_thumbnail}}')">
                    <img src="http://placehold.it/1200x600" />
                    <div class="flex-caption">
                        <div class="slide-content">
                            <h3>{{$slide.post_title}}</h3>
                            <p class="lead">{{$slide.post_content}}</p>
                            <a class="btn btn-lg btn-primary">Call to action</a>
                        </div>
                    </div>
                    
                </li>
                {{foreachelse}}
                <li>
                    <img src="http://placehold.it/1200x600" />
                </li>
                {{/foreach}}
            </ul>
        </div>
        <div class="custom-navigation">
            <a href="#" class="flex-prev"><span class="fa fa-2x fa-chevron-left"></span></a>
            <a href="#" class="flex-next pull-right"><span class="fa fa-2x fa-chevron-right"></span></a> 
        </div>
        <div class="custom-controls-container"></div>
    </div>
</section> 

 

Javascript

// 
(function() {
   $(window).load(function() { 
        try {
            $('.flexslider').flexslider({
                animation: "slide",
                controlsContainer: $(".custom-controls-container"),
                customDirectionNav: $(".custom-navigation a")
            });
        } catch (e) {
            'console' in window && console.log(e);
        }
    });
})();

 

TODO:

HTML

<header id="main-nav" data-appc-theme="dark" data-appc-themes="default: #eee; dark: #222; red: #f00;">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-items">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand navbar-brand-centered1">
                    <a href="/"><img src="{{builder_resources}}/builder/images/appcropolis-logo.png" alt="" class="" id=""></a>
                </div>
            </div>
            <!-- the items  -->
            <div class="collapse navbar-collapse" id="main-nav-items">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="/">Work</a></li>
                    <li><a href="/about/">About</a></li>
                    <li><a href="/services/">Services</a></li>
                    <li><a href="/contact/">Contact</a></li>
                    <li><a href="/contact/" class="btn-nav rounded">Sign in</a></li>
                    <li><a href="/contact/" class="btn-nav rounded">Join</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
</header>

 

CSS

@media (min-width: 992px) {
    .in-builder #main-nav .navbar-fixed-top {
        position: relative;
        background-color: rgba(0, 0, 0, 0.1);
    }
}

 

Javascript

// javascript 
(function() {
    $(window).on('scroll', function(e) {
        try {
            var scrollYMin = 10; 
            var scrolledClass = 'scrolled';
            if(window.scrollY > scrollYMin) {
                $('#main-nav').addClass(scrolledClass);
            } else {
                $('#main-nav').removeClass(scrolledClass);
            }
        } catch(e) {
            ('console' in window) && console.log(e);
        }
    });
})($);