I would like to hide the sidebar on just 1 specific page and allow the content to take the full 100%. I am using liquid. I have done this:
{% if page.handle != 'lorem' %}
<main-sidebar class="sidebar {% if page.handle == 'lorem' %} blockCSS {% endif %}">
It works.
But then you check the homepage and normally all the sections are wrapped within the content-holder div but for some reason after adding that piece of code after 3 sections they are outside of that div. I have not even changed that div at all.
How do I ensure that all sections that come after the first 3 that they are also in the content-holder?
Related
Hi Im new to cms I was implementing djangocms in my project
I have already have my html files im added placholders in that for making that content editable for example:
{% block content %}
{% placeholder "content" %}
{% endblock content %}
I have added placeholder for all the places i needed when i come to menu i used placeholder it only changes in the current html page i need to change in all the page which have same header and footer
I Have tried
{% show_menu 0 100 100 100 %}
But it comes default cms menus i need menu with my template style.
I have also tried
{% include "header.html" %}
But the placeholder only coming the plugin i need to add link again and again in every page.
Is there any solution for while im adding plugin in header.html it will display on all the pages which have the same header ?
I am trying to extend a navbar so it appears in several pages. When I insert {% extend %} {% block content %} {% endblock %}, it only appears as text - the code dosen't work.
Here is my Navbar that I want to extend:
This is how it appears in the browser:
This is the html file I want to include my navbar in:
How it appears:
I want to inherit my navbar, but only the code text appears in the browser.
{% extend %} and so on have no special meaning in HTML.
The syntax is clearly from some template engine. Maybe Nunjucks.
You'll need to pass your source code through the template engine and use the HTML generated from it.
I am new to web development and I am working on Django framework in VSCode. I have been trying to make a user interface for the web application which has a menu on the left side of the screen and a nav bar on top which says "home page" (the image is below). There I need all the texts and photos to be in the rest part of the page, and when I scroll down I want only that part to move, like in a real web application. But I don't know how to do it, do I have to use JavaScript for that or can I just do it within HTML/CSS?
As you can see in the picture the paragraph covers the nav bar.
Thank you!
What you're looking for is the CSS position: fixed property. For example:
<div class="navbar" style="position: fixed;">
https://www.w3schools.com/howto/howto_css_fixed_menu.asp
You must use a base_generic_page to contain all the aplication pages.
basic_generic_page has the nav_bar or side_bar
<html lang="en">
<head>
{% block title %}<title>Local Library</title>{% endblock %}
</head>
<body>
{% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
{% block content %}<!-- default content text (typically empty) -->{% endblock %}
</body>
</html>
You can heritage the base in application pages and rewrite content block in this way :
{% extends "base_generic.html" %}
{% block content %}
<h1>Local Library Home</h1>
<p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>
{% endblock %}
Source: https://developer.mozilla.org/es/docs/Learn/Server-side/Django/Home_page
Much like the position:fixed
You could also give position: sticky
Has the added benefit of occupying space
Depend really on how you want the page to flow
Swiper Version: 4.0.0.
Platform/Target and Browser Versions: Ubuntu 17, Chrome
Generator: Hexo 3.0 + Hexo-theme-next
What you did
I am trying to put Swiper in my header area on my index page. What I did is put the demo file into one swiperheader.swig file. Remove the tags, and used CDNS links.
Full sample code
HTML snippet
<body itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang || page.language || config.language }}">
{% set container_class = "container " %}
{% if theme.sidebar.position %}
{% set container_class = container_class + 'sidebar-position-' + theme.sidebar.position %}
{% endif %}
<div class="{{ container_class }} {% block page_class %}{% endblock %}">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
{% include 'swiperheader.swig' %}
<div class="header-inner"> {%- include '_partials/header.swig' %} </div>
</header>
The build is fine without error. The style sheet and .js files are included successfully.
Expected Behavior
A swiper region on top of my page like this
Actual Behavior
The swiper region EXISTS but the height is 0. If I put text between SAMPLE then the swiper region extends to a narrow band, shown below (top of the page).
I am not sure what I did wrong
I'm not familiar with hexo but I've had a similar bug with swiper and an image inside the slide. In my case the problem was that the image inside my swiper slide had position absolute. Every element that has position absolute does not have a height and this again results in a swiper slide being too small because swiper calculates the height according to the elements inside it.
Hope I could help.
I have a twig template in my symfony2 project and in there I have 4 blocks.
The block one is usualy a huge list of items, so the user has to scroll down on the page to see everything.
The problem is that the blocks 2, 3 and 4 and small in which concerns their height.
So, in order to have something "nice", I have to ideas:
Make the blocks 2, 3 and 4 to be always fixed, so when the user scrolls dow, the page will go down to se the block 1, but the content of the other blocks will allways be on the screen.
For that, I know how to use CSS:
position:fixed
But I don't know how to use position:fixed for all the 4 blocks at once. I tryed to create an extra parent block but it does't work.
Fix the size of the block 1 and only scroll inside of the block 1, not on entire page. How can I do that? If I set with CSS:
height: 100px
Nothing hapens.
Thank you very much.
EDIT: Here is what I have tryed for the moment:
{% block global %}
<div style="position:fixed ">
{% block one %}
...
{% endblock %}
{% block two %}
...
{% endblock %}
</div>
{% endblock %}