Thanks for the help!
So, I'm trying to create a simple layout with a Bootstrap nav-bar and a block of content on the body, and that works fine. But, when I extend that to a child, no matter what changes I make on the child, nothing shows up!
I'll post the two templates I'm using right now.
layout.html
<!doctype html>
{% extends "bootstrap/base.html" %}
<html>
<head>
<title>{% block title %}{% endblock %} </title>
</head>
<body>
{% block navbar %}
<nav class="navbar navbar-inverse navbar navbar-fixed-stop" role="navigation" style="border-radius:0px;">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">BGP Monitor</a></div>
<ul class = "nav navbar-nav">
{% if g.user.is_authenticated %}
<li>Admin Panel</li>
{% endif %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% if g.user.is_authenticated %}
<li><a href ="{{ url_for('logout') }}">Logout</li>
{% else %}
<li><a href ="{{ url_for('login') }}">Login</li>
{% endif %}
</ul>
</div>
</div>
</nav>
{% endblock %}
<div class="container-fluid" id="form">
{% block container %}{% endblock %}
</div>
</body>
</html>
And the child:
{% extends "layout.html" %}
<html>
<head></head>
<body>
<h3>aaa</h3>
{% block container %}
<div class="collapse navbar-collapse" id="container">
{{ super() }}
<form action="{{ url_for('login')}}" class="navbar-form navbar-right" method="POST">
{{ form.hidden_tag() }}
<div class="form-group">
{{ form.email(class="form-control", placeholder="Username") }}
</div>
<div class="form-group">
{{ form.password(class="form-control", placeholder="Password") }}
</div>
<div class="form-group">
<button class="btn btn-default" type="submit">Sign In</button>
</div>
</form>
</div>
</div>
{% endblock %}
</body>
The nav-bar shows, but the form doesn't show up, at all. It's as if the child does not exist.
Any ideas?
Thank you
P.S:
So, I changed to this:
layout.html
<!doctype html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar navbar-fixed-stop" role="navigation" style="border-radius:0px;">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">BGP Monitor</a></div>
<ul class = "nav navbar-nav">
{% if g.user.is_authenticated %}
<li>Admin Panel</li>
{% endif %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% if g.user.is_authenticated %}
<li><a href ="{{ url_for('logout') }}">Logout</li>
{% else %}
<li><a href ="{{ url_for('login') }}">Login</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="container">
{% block container %}{% endblock %}
</div>
</body>
</html>
And this child:
{% extends "layout.html" %}
{% block container %}
<form action="{{ url_for('login')}}" class="navbar-form navbar-right" method="POST">
{{ form.hidden_tag() }}
<div class="form-group">
{{ form.email(class="form-control", placeholder="Username") }}
</div>
<div class="form-group">
{{ form.password(class="form-control", placeholder="Password") }}
</div>
<div class="form-group">
<button class="btn btn-default" type="submit">Sign In</button>
</div>
</form>
{% endblock %}
This way, there's no duplicate {% extend ... %}.
It now shows the form, but the WHOLE div is clickable, rendering it pretty much useless..
Any ideas?
You aren't supposed to have all the <html><head><body> tags in a child. It should just be:
{% extends "layout.html" %}
{% block container %}
<h3>aaa</h3>
<div class="collapse navbar-collapse" id="container">
{{ super() }}
<form action="{{ url_for('login')}}" class="navbar-form navbar-right" method="POST">
{{ form.hidden_tag() }}
<div class="form-group">
{{ form.email(class="form-control", placeholder="Username") }}
</div>
<div class="form-group">
{{ form.password(class="form-control", placeholder="Password") }}
</div>
<div class="form-group">
<button class="btn btn-default" type="submit">Sign In</button>
</div>
</form>
</div>
</div>
{% endblock %}
And notice how I moved the <h3>aaa</h3> code to inside the block.
Next, you can only have one {% extends ... %} call per rendering (You can't extend an extension). So, you need to consolidate your child to layout.html, making separate layouts per view.
Alternatively, you could change layout.html to use an include, keeping just one {% extends... %} per view:
layout.html
{% include "bootstrap/base.html" %}
{% block navbar %}
<nav class="navbar navbar-inverse navbar navbar-fixed-stop" role="navigation" style="border-radius:0px;">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#">BGP Monitor</a></div>
<ul class = "nav navbar-nav">
{% if g.user.is_authenticated %}
<li>Admin Panel</li>
{% endif %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% if g.user.is_authenticated %}
<li><a href ="{{ url_for('logout') }}">Logout</li>
{% else %}
<li><a href ="{{ url_for('login') }}">Login</li>
{% endif %}
</ul>
</div>
</div>
</nav>
{% endblock %}
<div class="container-fluid" id="form">
{% block container %}{% endblock %}
</div>
Again, notice there are no duplicated <html> etc tags in layout.html. Those are already in bootstrap/base.html
Related
I was creating a simple blog page using Django. When I added cards for the articles it came like this
There is no space between the cards.
{% extends 'base.html' %}
{% block content %}
<div class="card mt-3" style="width: 100%;">
{% for post in posts %}
<div class="card-header">
<cite title="Source Title">{{ post.author }}</cite>
<small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
</div>
<div class="card-body">
<div class="card-title">{{ post.title }}</div>
<p class="card-text">{{ post.content }}</p>
</div>
{% endfor %}
</div>
{% endblock content %}
How do I add space between these cards?
your for loop is not in correct place change code from
{% extends 'base.html' %}
{% block content %}
<div class="card mt-3" style="width: 100%;">
{% for post in posts %}
<div class="card-header">
<cite title="Source Title">{{ post.author }}</cite>
<small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
</div>
<div class="card-body">
<div class="card-title">{{ post.title }}</div>
<p class="card-text">{{ post.content }}</p>
</div>
{% endfor %}
</div>
{% endblock content %}
to bellow code
{% extends 'base.html' %}
{% block content %}
{% for post in posts %}
<div class="card mt-3" style="width: 100%;">
<div class="card-header">
<cite title="Source Title">{{ post.author }}</cite>
<small class="text-muted float-right">{{ post.date_posted | date:"F d, Y" }}</small>
</div>
<div class="card-body">
<div class="card-title">{{ post.title }}</div>
<p class="card-text">{{ post.content }}</p>
</div>
</div>
{% endfor %}
{% endblock content %}
Firstly, you need to do the loop for every card, instead of doing it for the inner divs 'card-header' and 'card-body'. Secondly, to answer you question, you should use a spacing by either a margin or a padding.
I would suggest to make the cards a standard width and use a 'margin right 3':
{% for post in posts %}
<div class="card mt-3 mr-3" style="width: 250px">
<div class="card-header">
...
</div>
<div class="card-body">
...
</div>
</div>
{% endfor %}
Besides this solution, I suggest you read the Bootstaps Grid Layout documentation, so you can place the cards nicely within your content block.
I want to include multiple layout file in index file of view and extends all of them from master.volt. But my problem is level-1.volt doesn't render when I run index.volt. Is my workflow ok? What is the problem?
I have on base view file named master.volt that have basic view of my frontend:
<div class="row justify-content-center" id="Level-1">
<div class="col-11">
<div class="row flex-column justify-content-center align-items-center">
{% block bannerOne %}
{% endblock %}
</div>
</div>
</div>
I have one view file named level-1.volt:
{% block bannerOne %}
<div class="col-12 d-flex justify-content-center align-items-center">
<img src="img/pop-1-2.png" class="img-fluid"/>
</div>
{% endblock %}
And this is my index.volt view:
{% extends 'master/master.volt' %}
{% include 'layouts/level-1.volt' %}
I created a custom theme in drupal 8.6. Everything works fine but for some reason if I put a content in my sidebar region it goes to the bottom of my page after my main content. Any suggestions on how to fix this would be highly appreciated. Thanks
Here is my page.html.twig
<div class="layout-container">
<header role="banner">
{{ page.header }}
</header>
<main role="main">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
<div class="layout-content">
{{ page.content }}
</div>{# /.layout-content #}
{% if page.sidebar %}
<aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar }}
</aside>
{% endif %}
</main>
{% if page.footer %}
<footer role="contentinfo">
{{ page.footer }}
</footer>
{% endif %}
</div>{# /.layout-container #}
st_saviours.info.yml file
name: St Saviours
description: Drupal 8 theme
type: theme
core: 8.x
libraries:
- st_saviours/global-css
- st_saviours/global-js
stylesheets-remove:
- core/themes/stable/css/views/views.module.css
- core/themes/stable/css/system/components/align.module.css
regions:
header : 'Header'
content: 'Main Content'
footer: 'Footer'
sidebar : 'Sidebar'
I used bootstrap grid layout to arrange the main content and the sidebar in my page.html.twig file.
<main role="main">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
<div class="col-md-12">
<div class="row">
{% if (page.first_sidebar and page.second_sidebar) %}
<div class="col-md-4">
<aside class="layout-sidebar-first" role="complementary">
{{ page.first_sidebar }}
</aside>
</div>
<div class="col-md-5">
<div class="layout-content">
{{ page.content }}
</div>{# /.layout-content #}
</div>
<div class="col-md-3">
<aside class="layout-sidebar-second" role="complementary">
{{ page.second_sidebar }}
</aside>
</div>
{% else %}
<div class="col-md-12">
<div class="row">
<div class="layout-content">
{{ page.content }}
</div>{# /.layout-content #}
</div>
</div>
{% endif %}
</div>
</div>
</main>
I'm using Pimcore 5.4.4 in combination with twig and I'm trying to customize my output. Currently I have this:
$this->setViewAutoRender($event->getRequest(), true, 'php');
$this->view->navigation=$navStartNode;
which I render with this:
{{ pimcore_render_nav(mainNavigation) }}
This does its job, it is however horribly uncustomizable.
I want to render an arrow-down icon for the menu Items that have children. Can this be achieved in any way?
To clarify, I would like my markup to look something like this:
<ul>
<li> m1 </li>
<li class='hasChildren'><i 'arrow-down'> m2 </i></li>
<ul>...
which should then display an arrow-icon next to the items which have children.
Any help here would be much appreciated.
Greetings, derelektrischemoench
Is it not possible to overwrite the partial?
See the documentation:
https://pimcore.com/docs/master/Development_Documentation/Documents/Navigation.html#page_Individual-Partial-Navigation-View-Script
Here's an entire custom navbar that works for me with Bootstrap 4.3.1 and mdbootstrap 4.8.9, tested with Pimcore 6.2.0:
<header>
{% set mainNavStartNode = document.getProperty('mainNavStartNode') %}
{% if mainNavStartNode is empty %}
{% set mainNavStartNode = pimcore_document(1) %}
{% endif %}
{% set mainNav = pimcore_build_nav(document, mainNavStartNode) %}
{% set renderer = pimcore_nav_renderer('menu') %}
<nav class="navbar navbar-expand-lg navbar-dark indigo mb-4">
<!-- Additional container -->
<div class="container">
<!-- Navbar brand -->
<a class="navbar-brand" href="{{ mainNavStartNode }}">
<img src="{{ asset('static/img/lovia-navbar-white.png') }}" alt="Lovia"
style="height: 1.3rem; margin-bottom: 0.4rem;">
{# <strong>Lovia</strong> #}
</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="{{ "Toggle navigation"|trans }}">
<span class="navbar-toggler-icon"></span></button>
<!-- Collapsible content -->
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<!-- Links -->
<ul class="navbar-nav mr-auto">
{% for page in mainNav %}
{% if page.isVisible() and renderer.accept(page) %}
{% if page.hasPages %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ page.label|trans }}</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
{% for child in page.pages %}
<a class="dropdown-item" href="{{ child.href }}">{{ child.label|trans }}</a>
{% endfor %}
</div>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{{ page.href }}">{{ page.label|trans }}</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
<ul class="navbar-nav ml-auto">
{{ include('Includes/login.html.twig') }}
{{ include('Includes/language.html.twig') }}
</ul>
</div>
</nav>
</header>
Adapted from https://pimcore.com/docs/master/Development_Documentation/Documents/Navigation.html#page_Using-Partials-Generating-a-Customized-Navigation
I am developing a site on Shopify and I need to know how to change color of selected menu items. When a user clicks on any menu items, the color will change and remove once another menu item is selected.
I have tried to solve this problem many times now by using CSS and JQuery, but nothing I do seems to work.
Here is the code for the megamenu liquid file in Shopify.
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-
top="197">
<div class="container">
<div class="mega-menu">
<!-- Brand and toggle get grouped for better mobile display -->
<ul class="nav navbar-nav" id="navbar">
{% assign meagemenu_lists = settings.Megamenu-list %}
{% for link in linklists[meagemenu_lists].links %}
{% assign item = link.title | downcase %}
<li class="level1 dropdown">
<a class="megamenu_icon{% increment count %} a1" href="{{ link.url }}"
title="{{link.title}}">{{ link.title }}</a>
{% for i in (2..5) %}
{%capture Megamenu%}megamenu_{{i}}_parent{%endcapture%}
{% if settings[Megamenu] == item %}
<div class="sub-menu dropdown-menu">
<div class="top-sub-menu">
<div class="item">
{% if settings.service-megamenu-icon1 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon1']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title1'] }}</h3>
<p>{{ settings['service-megamenu-subtitle1'] }}</p>
</div>
</div>
<!-- End item -->
<div class="item">
{% if settings.service-megamenu-icon2 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon2']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title2'] }}</h3>
<p>{{ settings['service-megamenu-subtitle2'] }}</p>
</div>
</div>
<!-- End item -->
<div class="item">
{% if settings.service-megamenu-icon3 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon3']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title3'] }}</h3>
<p>{{ settings['service-megamenu-subtitle3'] }}</p>
</div>
</div>
<!-- End item -->
</div>
<ul class="menu-level-1">
{% for j in (1..3) %}
{% capture mega_title %}megamenu_{{ i }}_column_{{ j }}_title{%
endcapture %}
{% capture mega_col %}megamenu_{{ i }}_column_{{ j }}_menu{%
endcapture %}
<li class="level2"><h4>{{ settings[mega_title] }}</h4>
<ul class="menu-level-2">
{% for link in linklists[settings[mega_col]].links %}
<li class="level3"><a href="{{ link.url }}" title="{{
link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
{% capture _image1 %}megamenu_{{ i }}_image1.jpg{% endcapture %}
{% capture _image2 %}megamenu_{{ i }}_image2.jpg{% endcapture %}
<li class="level2">
<img src="{{ _image1 | asset_url }}" alt="Sub-Menu" />
</li>
<li class="level2">
<img src="{{ _image2 | asset_url }}" alt="Sub-Menu" />
</li>
</ul>
<div class="bottom-sub-menu">
<p>{{ settings['Megamenu-description'] }}</p>
</div>
</div>
{% endif %}
{% endfor %}
<!-- End Dropdow Menu -->
</li>
{% endfor %}
</ul>
</div>
</div>
</nav>
There will be a CSS class somewhere in the menu HTML which applies a CSS rule to color the active item. Across different e-commerce themes and platforms, this class is generally 'active', 'open', 'nav-open'. This class may be added via JavaScript after page load, so you may not see it in the HTML file.
I recommend using the inspect element tool to find the rule being applied to the item.