I'm trying to figure out the best way to have a side menu auto generated from the headings of a tutorial. I can either add them to a list in the front matter or have it auto detect them, but I need to write some code that only generates a side menu of appropriate length. Something like this(you can see the side menu in large windows) but I would use the side nav or preferabbly accordion modules present in Foundation 4. I guess it would have to first count the words or phrases i nthe list, then generate a side module in a loop for the required number of times.
Since I'm not too familiar with jekyll and Liquid templating code, I though I would ask here first and find out if anyone can give me a hand. If it's difficult a nudge toward where to start would be much appreciated.
You'd be much better off just hard-coding the side menu and using a layout to include it on each page.
At the start of each file that makes up the tutorial, include a YAML front matter section like this:
---
layout: sidebar
---
Then in your _layouts folder include a layout with the name sidebar.html, which describes the sidebar like this:
<html>
<body>
<div id="sidebar">
<!--Sidebar content goes here-->
</div>
<div id="content">
{{ content }}
</div>
</body>
</html>
Related
I'm trying to build a basic documentation site using asciidoctor. One thing I am struggling with is how I can inject a standard site header (a banner with a logo and top-level navigation) into each documentation page.
I render my asciidoc directly to html from the command line. I have tried to find a way to somehow inject an extra div element and position it fixed at the top, but I can't figure out what mechanism to use for this. My early attempts involved using docinfo.html but that gets injected into the html in the <head> element, instead of the <body>.
I am aware that full-on publication systems like Jekyll allow me to configure "front matter" that can probably take care of this, but I was hoping there was a mechanism or trick using vanilla asciidoctor that can achieve this.
Ted Bergeron on the Mailing List mentioned a simple project:
Demo website created just using Asciidoctor.
Check the corresponding repo to see the files and how to create the site (just using one command).
In summary: simply create a header asciidoc file that includes your site nav (in the demo site this is done using table markup), without including a level-0 (document) title. Include this header file right at the top in every page of your site. Then render by just running asciidoctor *.txt on your project.
--embedded option + simple post processing
With this option, asciidoctor generates only the interior part of the <body> element.
For example:
main.adoc
= Super title
== Second level
asdf
== Also second level
qwer
then:
asciidoctor --embedded main.adoc
produces:
main.html
<div class="sect1">
<h2 id="_second_level">Second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>asdf</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_also_second_level">Also second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>qwer</p>
</div>
</div>
</div>
You can then just cat a header and closing footer, and you are done.
Tested with Asciidoctor 2.0.10.
Right now at my job, I'm tasked with creating a monitoring dashboard site. I'm thoroughly looking through a lot of different design choices and what my company wants, but all the templates I'm looking at for dashboards aren't formatted the way the company wants: a nested tab feature, not a side bar navigation.
Upon looking through a bunch of nested tab examples, one of them caught my attention which was Zozoui's Nested Tabs. This isn't something I've seen from BootStrap and JQuery UI, so I don't even know how to begin with starting something like this, but I'd like to change a couple of things here and there, like right before the second set of tabs, have a description of the first current tag.
So in short, how do I create my own nested tab feature like Zozoui's Nested Tabs?
You can make a menu and a div for contents when you click a specific tab it's contents should show in that div.do it by jquery or js.
HTML
<nav id="menu">
<a id="item1">item1</a>
<a id="item2">item2</a>
.
.
.
</nav>
<div id="contents">
<div>
jquery
$("#menu a").click(function{
$("contents").html(//something that you want);
});
I am currently tweaking a BigCommerce theme for my employer. They have asked me to remove and change a few CSS / HTML elements to fit the style and functionality that they are after.
Rather than just DELETING the functionality within the theme, I was hoping to just comment it out in case it is needed later. But I am having an issue with the formatting.
The following is the code as displayed in the ProductDetails.html Panel file:
<div class="Content" id="prodAccordion">
%%Panel.ProductTabs%%
%%Panel.ProductDescription%%
%%Panel.ProductVideos%%
%%Panel.ProductWarranty%%
%%Panel.ProductOtherDetails%%
%%Panel.SimilarProductsByTag%%
%%Panel.ProductReviews%%
%%Panel.ProductByCategory%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
I am trying to comment out the last 3 lines only.
However, when I do, the end of the comment ( --> ) shows up in the browser. I have closed the comments correctly but there must be some simple concept that I am missing. Hoping the good people at SO can help.
Below is the code as I have saved it and a screenshot of the display in my browser. The first screen shot is how it looks before I add any comments and the second is after I add them. You can clearly see the closing comment in the second image, can anyone tell me why??
Thanks in advance for any help.
<div class="Content" id="prodAccordion">
%%Panel.ProductTabs%%
%%Panel.ProductDescription%%
%%Panel.ProductVideos%%
%%Panel.ProductWarranty%%
%%Panel.ProductOtherDetails%%
%%Panel.SimilarProductsByTag%%
<!--%%Panel.ProductReviews%%-->
<!--%%Panel.ProductByCategory%%-->
<!--%%Panel.SimilarProductsByCustomerViews%%-->
</div>
Nicole, I've dealt with this and can definitely explain why it's happening and how to avoid it.
Why It's Happening
It's happening because this is how BigCommerce's server side PHP processor parses the code you're looking at. The code is basic HTML, while the %%Panel.something%% are simply ways for BigCommerce's processor to recognize as a command for BigCommerce.
Anytime the BC site sees %%Panel.Name%%, it knows that this is not HTML, but rather a place where BC server-side processor should insert the Panel file before serving this HTML to the user.
How to Avoid it and Comment-out Correctly
Simply, remove the % symbols and use regular commenting. This will work:
<!-- Panel.ProductReviews-->
So will this:
<!--%%Panel.ProductReviews-->
And this:
<!-- Panel.ProductReviews%%-->
Or even this:
<!-- %Panel.ProductReviews% -->
Mainly, you have to make sure that each side of a Panel.Name reference, doesn't have 2 % symbols on each side.
To Restore the Correctly Commented Out Code/Panel
Simply restore the 2 % symbols on each side like so (the spaces between - and % don't matter, you can have none or 10):
<!-- %%Panel.ProductReviews%% -->
Why You're Seeing --> On Live Site
As broached/explained in the comments of your question, you're seeing --> when commenting out a Panel like so <!--%%Panel.Name%%--> because by commenting out the Panel that way without removing at least one of the % symbols, you're still telling BigCommerce to load the Panel HTML file, but to place it within the
<!-- [HTML code from panel goes here] -->
The problem with that is simply that some of these Panel files contain comments themselves.
For example, let's say you comment out %%Panel.Header%% like so !<--%%Panel.Header%%-->. The Header.html Panel may be code like this:
<!-- this is the header code panel-->
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
By commenting out the code without removing the % symbols, BigCommerce will load this:
<!--
<!-- this is the header code panel-->
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
-->
when a user open a page that uses the Header.html panel, they will see this code as commented <!--<!-- this is the header code panel-->, because the browser will start the comment at the first <!-- and end the comment at the first appearance of -->.
In the browser, the user will see the uncommented remains:
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
-->
And hence you'll see some extra, probably broken HTML, plus the stray --> somewhere at the end of the improperly commented code.
Again, to avoid all this, just remove one of the % symbols, then use regular commenting to comment out a Panel file reference.
Let me know if this helps and if you have any other questions.
quick question here:
I am using DCE on Typo 6.1.5. I am trying to set an element out of the "container" div. But it rarely works.
<div id="contentMarginFix">..</div>
<div id="contact">
<div class="container">
<div class="gmaps">
</div>
</div>
</div>
I want to get the "gmaps" div in the "contact" div. Not in the "container" one.
Here is the DCE Template
http://gyazo.com/2c0a13746cdd834ebdb86a0b64fd10b1.png
And here is the template for the page
http://i.imgur.com/y2rwP6P.jpg
I was trying for two hours now maybe i just don't see it but i appreciate your help very much!
From the screenshots you provided I'd say it's possible the layout template is in the wrong place. Make sure the contact.html you use as a layout is in the right place.
If this is a basic fluid template directly in typo3 make sure the file is in the place you defined in your setup typoscript. Default would be something like this:
layoutRootPath = fileadmin/templates/Layouts/
If this is inside an extension the correct place for the layout template is
Resources\Private\Layouts
Be aware that in more recent extbase versions the naming conventions are more strict and require a capital first letter for the html files (so Contact.html)
I am trying to transfer my simple website to joomla. I like the design and style I did in html5/css3, but I think that the content management is something that I could take advantage of. I have my design, so I decided to give templates a go.
I understand how on the templateDetails.xml you defined the locations:
<positions>
<position>breadcrumb</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions>
But I don't understand how can I create a new position. For example if I wanted to create a position on the bottom right below the main content or even more specific where should this information go? I see this are the default positions http://docs.joomla.org/Module_Map.
The idea I have right now is to do my template with all the div tags, that I already have but just erase the content and then in the content create a a div tag where I put
<div id="content" class="float"> <jdoc:include type="component" /></div>
But then I don't think I am really taking advantage of joomla.
Or whats a better way to move a html/css3 website to joomla without having to use a template (I have not liked any 100%).
If I understand your question right <jdoc:include type="modules" name="bottom_right" style="xhtml" /> will allow you to add the position to the index.php of your template. Then you can assign a module at the backend. Don't forget to add <position>bottom_right</position> to the XML of your template.
If you need to clarify anything please raise your question here