I am trying to align the logo and cart icon in same line. Also there should be some space between the logo and the cart icon. Check the part //...moved this code here - start. That is the code I have added. It was earlier residing in a ul tag. Moved it here.
<div class="row">
<div id="logo" class="desktop-12 mobile-3">
{% if settings.use_logo_image %}
<img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" style="border: 0;"/>
{% else %}
{{ shop.name }}
{% endif %}
//...moved this code here - start
<ul id="cart" class="{% if settings.enable-hello %}desktop-3 {% else %}desktop-6{% endif %} tablet-6 mobile-3">
<li class="cart-overview"><i class="icon-shopping-cart icon-2x"></i><span id="item_count">{{ cart.item_count }}</span>
<div id="crt">
{% include 'shopping-cart' %}
{% if cart.item_count != 0 %}
<a class="checkout-link" href="/cart">{{ 'cart.general.checkout' | t }}</a>
{% endif %}
</div>
</li>
</ul>
//...moved this code here - end
</div>
</div>
This is the output I am getting now.
And this is the output I am expecting.
Yes so under the div named logo; both logo image and then cart comes. So inorder to align in same line
for example below:
<div class="logo">
<div class="logoimg"></div>
<div class="cartimg"></div>
</div>
Style becomes like eg:
<style>
.logo{display:inline-block;width:900px}
.logoimg{float:left;width:400px;}
.cartimg{float:right;width:400px;}
</style>
Let me know for more details if needed.
Related
what I want is that each carousel-item hold card group with 3 cards inside .. so ..
in this particular case, there are 8 related posts, it would like this .. *[(1)(2)(3)] -> [(4)(5)(6)] -> [(7)(8) ]
[Twig file]
{% set division = (related|length - 1)/ 3 %}
{% from _self import post_cards %}
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide">
<ol class="carousel-indicators">
{% for i in 0..division %}
<li data-target="#carouselExampleIndicators" data-slide-to="{{ i }}" class="{{ i == 0 ? 'active' : ''}}"></li>
{% endfor %}
</ol>
{# -- inner elements -- #}
<div class="carousel-inner bg-warning">
{% for post in related %}
{% if (loop.index0 is divisible by(3)) or (loop.first) %}
<div class="carousel-item {{ loop.first ? 'active' : ''}}"> {# d-flex #}
<div class="card-group w-100">
{% endif %}
{{ post_cards('col-md-4 my-4', post)}}
{% if (loop.index0 is divisible by(3)) or (loop.first) %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
{# --- end of inner elements --- #}
</div>
</div>{# END container --- #}
{# --- card macro #}
{% macro post_cards(classes, post) %}
<div class="{{ classes }}">
<div class="card h-100">
<a class="text-decoration-none blog-card-link h-100" alt="Link to blog post" role="button"
target="_self" href="{{ post.link }}">
<img src="{{ post.thumbnail.src }}" class="card-img-top my-0" alt="Image for {{ post.title }}">
<div class="card-body">
<p class="post-category font-weight-medium">{{ post.category }}</p>
<h3 class="card-title font-weight-bold">{{ post.title }}</h3>
<p class="card-text">
{% set post_preview = post.meta('on_blog_list') %}
{{ post_preview ? post_preview|truncate(10) : post.preview.length(10).read_more(null) }}
</p>
</div>
<div class="card-footer bg-transparent border-0">
<span class="blog-date">
{{ post.date }}
</span>
<a class="d-inline btn-link arrow-link float-right"
alt="Read more" role="button"
target="_self" href="{{ post.link }}">
read
</a>
</div>
</a>
</div>
</div>
{% endmacro post_cards %}
..generates following
code above generates this
so cards fall outside the carousel-item
You have same condition for opening and closing div.
Try something like this.
{# -- inner elements -- #}
<div class="carousel-inner bg-warning">
{% set x = 0 %}
{% for post in 1..15 %}
{% set x = x + 1 %}
{% if x == 1 %} {# opening div on 1st item #}
<div class="carousel-item {{ loop.first ? 'active' : ''}}"> {# d-flex #}
<div class="card-group w-100">
{% endif %}
{{ post_cards('col-md-4 my-4', post)}}
{% if x == 3 %} {# closing div after 3rd item #}
</div>
</div>
{% set x = 0 %}
{% endif %}
{% endfor %}
</div>
{# --- end of inner elements --- #}
I would like to ask for help regarding a repeater within a repeater on Wordpress using Twig. The Services section shows up correctly but the Features section within the Services section isn't showing up.
Here is a screenshot of the Wordpress ACF.Click Me
And right below is the code that I am currently using.
Please advise. Thank you!
{% extends "page.twig" %}
{% block additional %}
<div id="page-services">
<section id="services">
<div class="row small-up-1 large-up-1">
<div class="small-12 medium-11 large-9 columns small-centered">
<div class="services-grid animated fadeIn wow">
<p align="center">
{{post.services_desc}}
</p>
</div>
</div>
</div>
<div class="line centered"></div>
</div>
<center>
<div class="row">
<div class="small-12 medium-11 large-9 columns small-centered">
<div class="features-header animated fadeIn wow">
{% for item in post.get_field('services_ist') %}
<div class="column services">
<h2 class="capitalize bold">
{{item.services_title}}
</h2>
{% if item.services_subtitle %}
<h4 class="subtitle">
{{item.services_subtitle}}
</h4>
<div class="line thin"></div>
{% endif %}
{% if item.services_content %}
<div class="description">
{{item.services_content}}
<br><br>
</div>
{% endif %}
{% if feats.services_feat %}
{% for feats in post.get_field('services_feat') %}
<p>{{feats.feat_title}}</p>
{% endfor %}
{% if feats.feats_desc %}
<h4 class="feats description">
{{feats.feats_desc}}
</h4>
{% endif %}
{% endif %}
</div>
{% endfor %}
</center>
</div>
</div>
</div>
</section>
</div>
{% endblock %}
As the ACF Integration Guide says, you shouldn’t use get_field() again when you try to access nested repeater fields:
When you run get_field on an outer ACF field, everything inside is ready to be traversed. You can refer to nested fields via item_outer.inner_repeater
So instead of using:
{% for feats in post.get_field('services_feat') %}
You should use:
{% if feats.services_feat %}
{% for feats in feats.services_feat %}
<p>{{ feats.feat_title }}</p>
{% endfor %}
{# … #}
{% endif %}
I have never done twig before but a quick search got me something.
Change the inner repeater to this:
{% for feats in services_ist.get_field('services_feat') %}
<p>{{feats.feat_title}}</p>
{% endfor %}
This way the second repeater knows that its a child from the first repeater instead of a direct child to the post.
I am very new to web development and Django. I am following a tutorial called "Try Django 1.8".
In this code I am supposed to change the background-color of jumbotron to #155A1E.
If I press shift + refresh in google chrome, the color shows up then it changes back to gray. When I inspect the code in google chrome, I can see in the styles tab that the background-color in the .jumbotron{} has a strike-through. Also there is another verion of .jumbotron{} in the styles tab that has a background-color and has a check. If I uncheck the box, the color gets fixed.
How can I fix this in Django?
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block head_title %}Welcome | {{ block.super}}{% endblock %}
<style>
{% block style %}
.jumbotron {
background-color: #155A1E;
}
{% endblock %}
</style>
{% block jumbotron %}
<div class="jumbotron">
<div class='container'>
<div class="row">
<div class='col-sm-6'>
<h1>Try Django 1.8</h1>
<p>Some text here!!! This text should be long so that we can test the columns in the webpage. So here we go. We are trying to make this line as long as possible.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">Join us »</a>
</p>
</div>
<div class='col-sm-6' style="background-color:black;height:300px">
</div>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="row">
<div class="row">
</div>
<div class="col-xs-3 pull-right">
<p class='lead text-align-center'>{{ title}}</p>
<!--{{ user }}-->
<!--<!–{{ request.user }}–>-->
<!--abc is = {{ abc }}-->
<form method='POST' action=''>{% csrf_token %}
{{ form|crispy }}
<input class='btn btn-primary' type="submit" value="Signup" />
</form>
</div>
<div class='col-sm-3'>
<p class='lead text-align-center'>Built with Django & Bootstrap</p>
</div>
<div class='col-sm-3'>
<p class='lead text-align-center'>created for starters of all kinds.</p>
</div>
<div class='col-sm-3'>
<p class='lead text-align-center'>Always open source.</p>
</div>
</div>
{% endblock %}
You can add do important to your css attribute.
Just like that:
.jumbotron {
background-color: #155A1E!important;
}
It will be taken instead of the default one
It may be very late to answer the question but could help someone who is doing the tutorial now as myself.
Problem is your style should come under the
{% block jumbotron %}
otherwise its never been executed.
Here it is
{% block jumbotron %}
<style>
{% block style %}
.jumbotron {
background-color : #1e78d2 !important;
}
{% endblock %}
</style>
<div class="jumbotron">
<div class="container">....... {% endblock %}
Hope it helps someone
Makesure source of bootstrap is before your style source, and example:
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" media="all">
<link href="{% static 'css/your_style.css' %}" rel="stylesheet" media="all">
I am using twitter bootstrap for my website mywebsite.
I created four category blocks using col-md-3. When a block is heigher than the other, the other blocks don't dispay correctly. Here is my code:
<div class="row">
{% for category in categoriesActivities %}
<div class="col-md-3 col-sm-6">
<ul class="classifieds-category">
<li><i class="fa fa-bullhorn"></i>{{ category.name }}
<ul class="sub-category">
{% for activity in category.activities %}
<li>
{{ activity.principal }}
</li>
{% endfor %}
</ul>
</li>
</ul>
</div><!-- End grid layout -->
{% endfor %}
</div> <!-- End .row -->
Image of the blocks:
How can i fix it?
you need to add
<div class="clearfix"></div>
After the Informatiqe div.
That clears the col-- float.
I have a problem with this code for a fancybox gallery which its showing all images across the page, when should be visible just the first one and then others, when you click.
How do i stop from showing all images and show just the first one before click?
<code>
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
<div class="carousel property">
<div class="preview">
<a rel="galeria{{ post.ID }}" href="{{ slide.imgurl }}">
<img src="{{ slide.imgurl }}" alt="">
</a>
</div>
<!-- /.preview -->
<div class="content">
<ul>
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
{% if loop.first %}
<li class="active" >
{% else %}
<li>
{% endif %}
<img src="{{ slide.imgurl }}" alt="">
</li>
{% endfor %}
</ul>
<a id="carousel-prev" href="#">{{ wp.__('Previous', 'aviators') }}</a>
<a id="carousel-next" href="#">{{ wp.__('Next', 'aviators') }}</a>
</div>
<!-- /.content -->
</div><!-- /.carousel -->
{% endfor %}
</code>
You have to change the first line:
// delete this line {% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
{% if wp.get_post_meta(post.ID, '_property_slides', TRUE) %} //use this one
and the last one:
// delete this line {% endfor %}
{% end %}