I have a custom theme that I did not make, I was wondering if there was anyway to make it so I can hide menu items (so they don't show up on the menu bar). Maybe something in the stylesheet to dictate it? Please help!
<div id="store" class="clearfix">
<div id="header">
<h2 id="logo" {% if theme.image != blank %}class="image"{% endif %}>{% if theme.image != blank %}<img height="35"src="{{ theme.image.url }}" />{% endif %}</h2>
<div id="top-pages">
<ul>
<li>{{ pages.home | link_to }}</li>{% for page in pages.all %}<li>{{ page | link_to }}</li>{% endfor %}<li>{{ pages.contact | link_to }}</li>
</ul>
</div>
<!-- #top-pages -->
Can't tell you what to hide without you posting some of the code on here but why don't you just 'display: none;' the menu li?
*menu-item* {display: none;} //where menu item is the path to the menu item
Related
I have this code which bring value and the value description nearby. I need that if the length of the value is long, it won't run out of the toolbar
<div class="tool-bar">
<ul class="pair-list">
<li class="blue-box-field" *ngFor="let param of data.parameters">
<span>{{ param.paramTypeHebName }}</span>
<span>{{ param.valueHebName }}</span>
</li>
</ul>
</div>
</div>
Just add
.tool-bar{
overflow: hidden
}
to your css and that should fix it.
If you just want the line to break try adding following class to the line that you want to break:
.span-break{
word-wrap: break-word;
I have this liquid code:
<a href="{{ section.settings.button_link }}" class="btn--rounded">
{% include 'icon-btn--rounded' %}
<div class="link-label">{{ section.settings.button_label }}</div>
</a>
And when the button is hover, I need to show a different icon, for example:
{% include 'icon-btn--white' %}
I now that I can use display: none for that, but how can I dynamically change between buttons when I hover?
You have to use CSS to show the different icons on hover.
Liquid is a language that loads before the DOM is ready. This means that once you see content of the page the liquid code has finished its execution and it will not fire again until a reload of the page.
Or to say it in developer terms - you are trying to load a back-end function via the front-end, which is a big "no-no".
CSS and JS can't interact with liquid, but liquid can interact with them. Or to say it more simply you can create javascript and css code using Liquid, but you can't create liquid code using JS and CSS.
In addition includes are deprecated and you should be using render instead.
Here is the code that you should use:
<a href="{{ section.settings.button_link }}" class="btn--rounded">
<div class="icon">
{% render 'icon-btn--rounded' %}
</div><!-- /.icon -->
<div class="icon icon--hover">
{% render 'icon-btn--white' %}
</div><!-- /.icon -->
<div class="link-label">{{ section.settings.button_label }}</div>
</a>
<style>
.icon--hover {
display: none;
}
.btn--rounded:hover .icon {
display: none;
}
.btn--rounded:hover .icon--hover {
display: block;
}
</style>
I'm trying to create pagination with Bootstrap and Angular. For now, it looks like this:
<ul class="pagination">
<li class="page-item" *ngFor="let page of pages" [class.active]="page.isActive">
<span class="page-link btn" (click)="pageChange(page.number)">{{page.text}}</span>
</li>
</ul>
But I can't make buttons behave like buttons/anchors. I would like to see hand cursor while hovering over. How can I do it?
Observe the following:
| `$enable-pointer-cursor-for-buttons` | `true` (default) or `false` |
Add "hand" cursor to non-disabled button elements.|
And in _buttons.scss we have:
.btn {
...
cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
...
}
So changing span to button makes it work
<ul class="pagination">
<li class="page-item" *ngFor="let page of pages" [class.active]="page.isActive">
<button class="page-link btn" (click)="pageChange(page.number)">{{page.text}}</button>
</li>
</ul>
I am new to BEM and working on a sample template:
HTML
<header class="header">
<div class="header__branding">
<h1>Site branding</h1>
</div>
<div class="header__menu">
<nav class="main-menu">
<ul class="main-menu list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</nav>
</div>
</header>
<footer class="footer">
<div class="footer__links">
<ul class="???? list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</div>
</footer>
CSS
.main-menu .list{
// styles here
}
.list__item{
// styles here
}
.list__item-link{
// styles here
}
.list__item-link--active{
// styles here
}
So my questions is, what is the best way to name lists and how best to organize the CSS? I got stuck in the footer, I added a ???? if someone can help me think of a better name for the footer links?
I am finding it hard to wrap my head around BEM, but I should not nest more than one element at a time right?
Think about BEM as reusable component that can be placed many times on site in different places.
In this case you don't need any more class in only 'list'. Both in header and footer.
If you need any modification you could use somethig like: 'list list--wider' or so. And this second class change only width of element.
And one more: list__item-link is wrong. Parent is 'list__item' so this should be named 'list__item__link' BUT you also could name it just 'anchor' or 'link' and you will be able reuse them all around site on <a> elements.
I have this code currently does not work, is there any alternative to it?
<ul class="sub">
{% for key, c in categori %}
<style>
#nav.{{c.id}}:hover
{
background-color: #{{c.color}};
}
</style>
<li class="{{c.id}}">
<a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
....
I have the problem as in # nav. {{c.id}}
ow.ly/i/3vwNp this is the example
Thanks!
The way your CSS is written, it expects the element with the class {{ c.id }} (as interpreted by the Twig parser) to be on the same element with the id nav, e.g.
<li id="nav" class="{{ c.id }}">...</li>
You really shouldn't have more than one element on a page with the same id attribute, strange things happen with JavaScript particularly when you do.
Instead of trying to programmatically define your {{ c.id }} in the style though, why not do something like this?
<style>
#nav .item:hover
{
background-color: #{{c.color}};
}
</style>
...
<ul id="nav" class="sub">
{% for key, c in categori %}
<li class="item {{c.id}}"><a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}</li>
{% endfor %}
</ul>
You really should only be placing CSS in <style> tags at the top of the document any way, or as better practice teasing them out to .css resource files to include.
This would definitely work:
<ul class="sub">
{% for c in categori %}
<style>
.element{{c.id}} a:hover { background-color: #{{c.color}}; }
</style>
<li class="element{{c.id}}">
<a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
...
But it's recommended to separate your CSS rules from HTML and move all your predefined element classes to external CSS asset.