I have the Following Code, am using BootStrap css
<ul>
<li>
{% if current_user.is_authenticated() %}
Hello, {{ current_user.name }}
{% endif %}
</li>
<li class="nav-collapse collapse pull-right">LogOut </li>
</ul>
I want to get the above two tags in a single line
Add the pull-right class to both.
Related
I'm generating a list in eleventy/nunchucks and need to style the first and last items using tailwind. However, for some reason it's applying the style change to every item in the list.
Here's my code:
<ul role="list" class="">
{% for contact in contacts %}
<a rel="me" class="" href="{{ contact.link }}">
<li class="px-4 py-4 sm:px-6 hover:bg-orange-300 border border-gray-300 text-center bg-gray-100 first:bg-red-300 last:bg-cyan-300">
{{ contact.service }}: <span class="font-semibold">{{ contact.userid }}</span>
</li></a>
{% endfor %}
</ul>
</div>
It is applying first:bg-red-300 and last:bg-cyan-300 to every li element because you have only one li inside the a element.
What you want to do is wrap the a inside the li element
Something like this:
<ul role="list" class="">
{% for contact in contacts %}
<li class="px-4 py-4 sm:px-6 hover:bg-orange-300 border border-gray-300 text-center bg-gray-100 first:bg-red-300 last:bg-cyan-300">
<a rel="me" class="" href="{{ contact.link }}">
{{ contact.service }}: <span class="font-semibold">{{ contact.userid }}</span>
</a>
</li>
{% endfor %}
</ul>
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.
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 %}
I have a css class to which the layout in html5 and css3 you have enclosed a :hover background-color, this color is stored in the database and pick it up at the controller, now do not know how to make this :hover background-color on-screen display. What I thought is to include html code in the middle of a label with that style and tell the class that suffers the html tag :hover to increase one, in this way would go picking the value increases
This is kind of my idea in code:
<ul class="sub">
{% for key, c in categorias %}
<li class="hover">
<a href="elemento.html">{{ c.nombre }}
<div class="icon" style="background-color: #{{c.color}}">
<img src="{{ asset('images/iconoportada/' ~ c.iconoNombre)}}" alt="elemento" />
</div>
</a>
</li>
{% endfor %}
each list item has a :hover background different, like the current background catch it from the database, the problem is that I could not capture the: hover css here so I thought Twig
I would use something like this:
{% for key, c in categorias %}
<li class="hover">
<a href="elemento.html">{{ c.nombre }}
<div class="icon" rel="#{{c.color}}">
<img src="{{ asset('images/iconoportada/' ~ c.iconoNombre)}}" alt="elemento" />
</div>
</a>
</li>
{% endfor %}
and Jquery
<script>
$(document).ready(function(){
var oldbg = "";
$(".icon").hover(function(){
oldbg = $(this).css("background-colod");
$(this).css("background-colod", $(this).attr("rel"));
}, function(){ $(this).css("background-colod", oldbg); } );
}
</script>
not tested... just from the top of my head.