I am in the process of setting up the theme for my website using Jekyll.
I am using the Bootstrap example theme for this and I am currently facing an issue where by the Home button stays 'pressed down' when on another page such as the About page.
Here is a link to the CSS file: https://github.com/Dansmithyy/dansmeuktheme/blob/master/css/main.scss
Is there any way of changing this so that the buttons stay pressed down when the user is on that specific page?
Your main menu is hard coded in html. And it remains the same all over your pages.
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
My code inspector tell me that a rule is applied to
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.active>a
Here is the origin of the symptom.
The real cause of your problem is that your are hard coding your main menu.
If you look in your original default.html file and then in _includes/header.html you can see things like {% include header.html %} and {% for page in site.pages %}...
The last tag help you automatically generate a menu. I've added the active class trick in it to save you some time :
<ul class="nav navbar-nav">
{% for node in site.pages %}
{% if node.title %}
<li class="{% if page.url == node.url %} active{% endif %}">
{{ node.title }}
</li>
{% endif %}
{% endfor %}
</ul>
NOTE the {% if node.title %} if you want a page to appear in the menu you must put a title variable in the page's front matter. eg: title: My nice title
Related
I'm new to stackoverflow (it's my first post), and new to Symfony2 and SonataAdmin (a bundle) too, and I have a little problem (I searched, but I cant find a working solution..).
I've created a few entities and they all appear on the left of the dashboard, in the menu, and this is working fine.
But what I want to do is add tabs without creating entity, and when you click on this menu tab, only the content of the right to be changed ! Is that possible? Thank you
Create an empty template in the Resources/views directory of your own admin bundle
(e.g. custom_layout.html.twig).
Then, in your app/config open config.yml (or sonata/admin.yml if you have separated config files for sonata) and add (or update if exists) the following :
sonata_admin:
# ...
templates:
layout: YourBundle::custom_layout.html.twig
Last, open the empty template, make it extending from the standard_layout.html.twig,
override the good block,
and add your custom menu (copy the markup of an existing) :
{% extends 'SonataAdminBundle::standard_layout.html.twig' %}
{% block side_bar_after_nav %}
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i>
<span>Custom Menu</span>
<i class="fa pull-right fa-angle-left"></i>
</a>
<ul class="treeview-menu">
<li class="first last">
<a href="{{ path('custom_route') }}">
<i class="fa fa-angle-double-right"></i>
Custom link
</a>
</li>
</ul>
</li>
{% endblock %}
That's all.
I'm working on the admin of my portfolio and I'm having a dilemma about my menu. The admin side of my portfolio allows me to change some general info, add, modify or delete a project. Therefore, all pages of my admin have the same menu. The menu have the following buttons: a button to change the general info and a button to add a new project. if there are projects in the database, the menu have more things, a select with the names of my projects and the two buttons to modify or delete the project.
At first, I made a form for everything about the project and an other just for the change info button, but after asking some question, I got often told that I shoudn't make any form for that and that just making link should be fine.
I like that idea, but, if I do that, how can I pass the selected project when I click on modify for exemple?
<a href="{{ path("modify_project") }}">
Here is my current code:
<ul>
<li>
Ajouter un projet
</li>
</ul>
{% if projets | length > 0%}
<select>
{% for id,projet in projets %}
<option value={{ id }}>{{ projet }}</option>
{% endfor %}
</select>
<ul>
<li>
Modifier
</li>
<li>
Supprimer
</li>
</ul>
{% endif %}
If someone have a better idea, I will be very interested to ear it.
Have you had a look at this: https://github.com/KnpLabs/KnpMenuBundle?
Sorry, your are right, the answer is actually this one:
{{ entity.id }}
Twig will understand that, nothing more to do.
After really thinking about it, The best way would be a form, since you can't change the href of the link, except with javascript and I don't want to do that.
I have created the custom data collector for profiler as described here http://symfony.com/doc/current/cookbook/profiler/data_collector.html .
Now everything is working correctly except of {% block panel %} in template which defines the content area for my information. I have everything in place but on the screen tha page is almost without styles so its visualy broken.
When I compare my panel page and some other from profiler the mine lacks of cca. 200 lines of styles that Symfony is adding to the page header to style the page. I miss style for #content as an example. I tried to clear cache and refreshed everything but still now way. Any idea what is going to be wrong here?
This is waht I see in the browser ...
EDITED: Template
{% extends 'WebProfilerBundle:Profiler:layout.html.twig' %}
{% block toolbar %}
{% endblock %}
{% block head %}
{% endblock %}
{% block menu %}
<span class="label">
<strong>NET.Notes</strong>
</span>
{% endblock %}
{% block panel %}
panel david
{% endblock %}
It is due to empty block of "head". Rust remove it or include parent block by {{parent()}}.
{% block head %}
{#if the web profiler panel needs some specific JS or CSS files #}
{% endblock %}
I have a module for manage images inside my Sonata Admin. I want to display those images where sonata logo is placed, how I can do that? I have the code for get the images in my controller and also the template to display the image but don't know how to use this from Sonata, any advice?
You can override the sonate base template (like you overide any other template) or any block listed inside of it.
there is a block called logo and it looks like this
{% block logo %}
<a href="{{ url('sonata_admin_dashboard') }}" class="brand">
<img src="{{ asset(admin_pool.titlelogo) }}" alt="{{ admin_pool.title }}" />
{{ admin_pool.title }}
</a>
{% endblock %}
In combination with a Twig-Extension it should be no problem to fetch the image out of the database
i have many fields in my form i was trying to apply different css to neighbour forms fields like
<li class='thiscolor' >
<field>
</li>
<li class='thatcolor' >
<field>
</li>
if there a way like
{% for field in form %}
**{% if forloop.counter%2 == 0 %}**
<li class='thiscolor'>
{% else%}
<li class='thatcolor'>
{%endif}
{{field}}
</li>
{% endfor %}
for forloop.counter ?
Thanks a lot!
The cycle tag is designed for this type of problem:
{% for field in form %}
<li class="{% cycle 'thiscolor' 'thatcolor' %}">{{ field }}</li>
{% endfor %}
I agree with Jarret that cycle is best here, but to actually answer the question, the %2==0 operation can be replicated by using the divisibleby filter.
{% if forloop.counter|divisibleby:"2" %}
Another thing to keep in mind is that since this is a front end problem - the styling is what you're trying to effect - you can solve it on the front end. There's a good example provided toward the bottom of this A List Apart article. Of course, if you've already got working Django code there's no sense in doing this now.