I am using Sphinx with my own template to get a documentation style like the twitter bootstrap documentation: http://getbootstrap.com/2.3.2/getting-started.html
There you can see the navigation on the left, which is static and stays at the same place as you scroll.
It is therefore nescessary to render the table of contents which I already achieved with this function:
{{ toctree(maxdepth=1, collapse=False, includehidden=true) }}
That outputs me the following:
<ul class="current">
<li class="toctree-l1 current"><a class="current reference internal" href="">Introduction</a></li>
<li class="toctree-l1"><a class="reference internal" href="#installation">Installation</a></li>
<li class="toctree-l1"><a class="reference internal" href="#roadmap">Roadmap</a></li>
</ul>
But in order to let it work with bootstrap I need the following output:
<ul class="nav nav-list bs-docs-sidenav">
<li><i class="icon-chevron-right"></i> Introduction</li>
<li><i class="icon-chevron-right"></i> Installation</li>
<li><i class="icon-chevron-right"></i> Roadmap</li>
</ul>
So my question is: How can I achieve that? Is there a template file for the toctree() function I can adjust?
I had a similar problem and i used a mixed of self defined roles and jQuery to adjust this issues based on my role placement. jQuery will change all the stuff y need.
Related
I was working on a mini website project using django. I found bootstrap a while ago and started using some of their features. One that I really liked was the dropdown button.
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Blog</li>
<li>Contact me</li>
</ul>
</li>
But I was having a unexpected "error"/bug. When I click on one of those buttons it will add its href to the url.
And here comes the problem. It will add the href even if the url already contains it. How can I solve this problem and where. On django scripts or with javascript?
The Problem
It looks to me like everything is behaving as it should technically, the problem is with the href target itself.
Since you have a relative link not an absolute one, it assumes it target is relative to the page you are on.
Potential Solutions
1 - Use an absolute link in this case.
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Blog</li>
<li>Contact me</li>
</ul>
</li>
2 - Use the base tag.
This will set a root url for your website, it may cause unexpected results so check and re-check if you use this solution.
HTML Base Tag
Problem
I am using wordpress and fontawesome icon library to add icon to each list item. I have added class to each list item by enabling "CSS Classes" from "Show advanced menu properties" from Screen option. I tried wp_nav_menu and various other tricks but failed to output class like fa fa-home
Code
<ul id="primary-menu">
<li><i class="fa fa-home"></i>home</li>
<li><i class="fa fa-user"></i>About</li>
<li><i class="fa fa-camera"></i>Gallery</li>
<li><i class="fa fa-gift"></i>Shop</li>
<li><i class="fa fa-bullhorn"></i>Blog</li>
<li><i class="fa fa-envelope"></i>contact
</ul><!-- #primary-menu -->
I want to output those classes individually to each "i" element in list item. Please, suggest any code snippets or walk-through.
This code (from your question) is not standard WP code - yours is including <i> elements:
<ul id="primary-menu">
<li><i class="fa fa-home"></i>home</li>
</ul>
WP outputs menus like so, without the <i> element:
<ul class="menu">
<li id="menu-item-8" class="fa fa-home menu-item menu-item-type-post_type menu-item-object-page menu-sample-page">
Sample Page
</li>
</ul>
Notice the class fa fa-home on the <li> element above? That was added by adding the class (just like you described). Additionally, it created the icon desired in the menu.
If you aren't getting the icon, ensure that font awesome is actually being loaded, and that the font files are installed and in the right directory relative to the font awesome stylesheet.
How are you adding the <i> elements? The only way you could achieve this (using the technique you are trying to use) would be to Write a custom menu walker, but that's a lot of work to add the icons, since you an add them simply by editing the class via the Menu dashboard.
I'm trying to pull off the following Top Bar with Zurb Foundation.
(I'm aware of how to do this with plain HTML...trying to figure out the correct way to do it using Foundation, though.)
So you've got the title-area name on the left (which works fine), and on the right the "Hi, Joe!" is just plain text and then the "Change Settings" and "Log out" are each links (which doesn't work).
Here's what's happening when I build that out...
And here's the code I'm using...
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Acme Company</h1></li>
<li class="toggle-topbar"></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>Hi, Joe!</li>
<li>
Change Settings | Log out
</li>
</ul>
</section>
</nav>
So how can I get Foundation to work with my original design example above?
Foundation uses the a tag to style it. You're better off putting them in two separate li tags.
e.g.
<li><a href='#'>Change Settings</a></li>
<li class='divider'></li> <!-- built into foundation -->
<li><a href='#'>Log out</a></li>
Your Hi, Joe! should go in a blank a tag also.
I am creating bootstrap dropdown menu in my page ..I need to create same dropdown for different elements...I created one dropdown as follows
<ul>
<li class="dropdown" id="menu5"><a class="dropdown-toggle" data-toggle="dropdown" href="#menu5"> Settings
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Content</li>
<li><a>Add
User</a></li>
<li><a href="" id="vwUserHier">
search</a></li>
<li>Edit</li>
</ul></li>
</ul>
one menu created correctly but i want to create other menu with the same options how should i do this ...
Is there any way to reuse the contents of dropdown-menu class...
Have you tried JQuery clone method??
You'll probably have to use it with the 'true' option.
I've got a view that has the following code:
<ul class="nav nav-tabs">
<li class="active"><i class="icon-home"></i> General</li>
<li><i class="icon-picture"></i> Background</li>
<li><i class="icon-edit"></i> Form Container</li>
<li><i class="icon-picture"></i> Logo</li>
<li><i class="icon-tint"></i> Colors</li>
<li><i class="icon-font"></i> Fonts</li>
</ul>
The classes and html attributes are from Twitter Bootstrap but that's not important.
After pressing Ctrl+E+D combination the following code gets changed:
<i class="icon-home"></i> General to <i class="icon-home"></i>General
I also tried putting an empty space between the <i> tags but it gets stripped out as well.
This is effectively moving the tab title closer to the icon and although it's easy to fix I don't want to have to do it every time I benefit from auto code formatting in Visual Studio.
Is there any way to change/tweak this behaviour?
You can play with things here :: Tools/Options/Text Editor/HTML/Formatting
You'll find it a little arduous at times to get things exactly the way you want them, but if there's a way to adjust your spacing, that would be where it is located.