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
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.
I just go through the bootstrap framework, its a grid based css framework but I dont know how implement in IBM Websphere Portal 8.
code
<!DOCTYPE html>
<body class="lotusui30dojo tundra locale_en">
<div class="wpthemeFrame">
<header role="banner">
<div class="wpthemeHeader">
<a rel="dynamic-content" href="dyn-cs:id:customTheme_preview"></a>
<div class="wpthemeInner">
<div class="wpthemeLogo wpthemeLeft">
I suggest you to create a normal static HTML Prototype using Bootstrap. Once you make sue it's working properly (in responsive manner) you can start porting the source code to Portal. There are 3 parts:
First you have to copy paste the html part other than the middle content area (ie. the header part and the footer part) into theme_en.html in your custom folder. Then replace the css and JS links header part with
Then replace blocks of code with appropriate Dynamic Spot contents (JSP files). For instance something like,
<a rel="dynamic-content" href="res:/customTheme/themes/html/dynamicSpots/banner.jsp"></a>
Also, please make sure at the end of page you have this,
<div class="wpthemeComplementaryContent" id="wpthemeComplementaryContent" role="region" aria-labelledby="wpthemeComplementaryContentText">
<span class="wpthemeAltText" id="wpthemeComplementaryContentText" >Complementary Content</span>
<a rel="dynamic-content" href="co:config"></a>
</div>
Now we have to take the layout structure from the middle part of HTML area and use it for creating a Template Layout. Remember, in each template layout we have to keep the div for hidden widgets. Better way is to copy one existing layout.html file from Template Layouts and rename it and modify in that. If you are using Bootstrap, you don't have to use default WP classes. But few must be integrated, like DndRow,DndColumn, Componet-Container etc.
Now for each page specific styling, you can manage in Presentation template.
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'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>
What is the 'best' way to handle the html markup for partial views? (which are also refreshed using AJAX) The biggest issue I run into is where to place the 'container' div...
Consider having a masterpage and a partial view.
(class="" could be interchanged with id="" depending if the partial is guaranteed to be unique, however this isn't really important to the issue i think)
Masterpage:
<div id="place1" class="placeholder">
<!-- render partial -->
</div>
Partial:
<div id="partial1" class="partial">
<!-- content -->
</div>
I feel that something isn't being done right. However I cannot remove the div in the masterpage, because I need that to 'encapsulate' the response from AJAX partial updates. And also I cannot move the div in the partial to the masterpage, because that would require to move 'partial' info to the masterpage...
How do you handle this?
I would say that it terms of the semantic description of what is happening here, of providing good hooks for styling and scripting, and also in terms of general robustness against future uses and changes, that using both divs is the best way to go.