How to set from HTML template where menu is in Joomla - templates

I can't find anything about this. I just made a html template and set it as a joomla template. But one important thing I can't find how to do is how to set menu from template to Joomla. Do I have to make all items of menu again in Joomla and just take css from this?
(In template is menu made from pictures, in css is hover, position etc.)
<nav id="main_nav">
<ul>
<li class="Item1"></li>
<li class="Item2"></li>
</ul>
</nav>

You should define a position in your template where module can be outputted. It's done like this:
<jdoc:include type="modules" name="position_name" style="xhtml" />
It's always a good idea to declare the position in templateDetails.xml too.
Once you're done yo can log in to your joomla backend (administrator), go to extensions > modules. Click new select "menu" from module type selection list. Then fill up the form (you can enter title for the module, select your position, pick a menu that should be rendered here etc) and you're all set.
The menu items you add to the menu selected should appear in your website.

Related

Load django template dynamically

I've 2 section in my screen. Left section is for showing tabs and right is for displaying that tab template(as shown in screenshot). I'm not able to understand how to load different templates when I click these tabs
For example, when I click change password, I should be able to load change_password.html template
This is by far I've tried with code.
<div class="nav">
<ul>
<li class="active"></i><span class="hidden-xs hidden-sm">Home</span></li>
<li></i><span class="hidden-xs hidden-sm">Change Password</span></li>
<li>Bookings</span></li>
<li></i><span class="hidden-xs hidden-sm">Settings</span></li>
</ul>
</div>
I've tried to use with but no luck.
I've just started with django, so if anything is missed let me know. Thanks for your help!
Screenshot
I think what you're attempting is not possible. If you don't want a page reload upon clicking on a tab, you need to use Javascript to dynamically show/hide elements. If page reload is acceptable, you can create different views for each tab, each view rendering a different html file.
You can use the Django include tag to render another template with the current context. E.g. {% include "foo/bar.html" %} (see documentation here). But this will not solve your problem of displaying different content upon clicking on a tab.

Render items in separated placeholder

I'm trying to create a carousel and I want it to be configurable from the Experience Editor. By configurable I meant that it's possible to edit the image, text AND add/or remove slides.
The first time I create the carousel I can add/remove slides but no after saving it and opening it again, after rendering the carousel I can't remove just one slide because they all are part of the same placeholder (I can continue adding new slides and removing the new ones but not the old ones).
I have Carousel.cshtml and CarouselSlide.cshtml and the code look like:
Carousel.cshtml
<div class="carousel">
#foreach (Item slide in Model.Item.Children)
{
#Html.Action("CarouselSlide", "MediaFeature", new { model = slide });
}
#Html.Sitecore().DynamicPlaceholder("slides")
</div>
CarouselSlide.cshtml
<div class="carousel-slide">
<div class="carousel-slide-content">
#Html.Sitecore().BeginField(....)
<div class="background-image">
.....
</div>
<div class="text-container">
....
</div>
#Html.Sitecore().EndField()
</div>
</div>
So far, the issue looks like is related with the placeholders. Any ideas about how to render DynamicPlaceholders?
EDIT
"slides" placeholder is configured to allow only CarouselSlide components
Remove the foreach loop. It is unnecessary. When Sitecore renders the placeholder it renders the previously added slides for you. When in edit mode, it also renders the container that allows you to add additional components.
Using a dynamic placeholder as you have will allow you to have multiple Carousel components on a page. Or more precisely, multiple components containing a placeholder with the key "slides". It is most likely not causing the problems you are seeing with your slides.
Update - additional info requested by OP
It looks like what you have done is mix two different styles of development. In one, you are explicitly rendering the children of the carousel item as slides. In the second you are relying on Sitecore's presentation engine to dynamically render components into a placeholder that could be using data sources from somewhere else in the tree. You need to pick one or the other, but the second approach is generally preferred.
To use the second approach, you would simply remove the foreach loop so that your Carousel view looks like this:
<div class="carousel">
#Html.Sitecore().DynamicPlaceholder("slides")
</div>
If you decide to go with the first approach, you would remove the placeholder and then add Custom Experience Buttons to allow you to insert and sort child items under your carousel item.
With either approach, you may find that page editor does not play all that well with your Carousel javascript. The most common workaround to this problem is to render the carousel as a flat list in page editor mode.

Sitecore SPEAK UI configure ListControl to display icon and button

Is there a way in Sitecore SPEAK UI (7.5) to configure a ListControl (ViewMode set to DetailList) to contain a column with images, and another column containing buttons?
I've created a ListControl Parameters item beneath my PageSettings item and have added a few ColumnField items for the required columns - but cant find any other template types to add for different types of column data. I've also tried playing around with the Formatter and HTMLTemplate fields of the ColumnFields but am not sure how these are meant to be used.
Considering button means hyperlink. You can try adding the following in the HTMLTemplate:
For Image:
<img src="{{YourImageSourceField}}" ..../>
For Hyperlink:
{{YourLinkTextField}}
You can also consider reading Martina Welander Speak Series for some information on this kind of custom implementations.
I've also used the custom title property of the ListView by setting ViewMode to TileList. Then used Knockout to databind to a custom tile using standard cshtml, if this is any use?
<div class="sc-tile-default" data-bind="attr: {id: Id}">
<div style="min-height: 98px;">
<img width="112" data-bind="attr: {src: Path}" />
</div>
<div class="sc-iconList-item-title">
<span data-bind="text: Name"></span>
</div>
See this project
https://github.com/sobek1985/WallpaperManager

Sitecore Cache from Standard Value

One sublayout (.ascx) is using datasource from its template standard value.
Whenever I enable the cacheable setting with varyByData and varyByParm, I can't get all field values in __Standard Value of its template.
I checked cache.aspx page and it shows:
**web[standardValues]________0________0________0________10MB<br />
MaxSize is 10MB, but zero Count, zero Size and zero Delta information.**
Any ideas of how to solve this?
=============Update=============
I have fields in a template for CSS class names, such as h1, ul class, etc ... and all names initially set in its "__Standard Values".
Then, I have an item which calls the template's standard values as data-source.
This is another my post and it will help you more.
Sitecore Cache Issue
Could I know what the problem is?
=============Update 2=============
Current .cs file to get field values.
<asp:View ID="viewNormalMode" runat="server">
<nav class='<% Response.Write(myDataSourceItem.Fields["Nav Bar Class"]); %>'>
<h1 class='<% Response.Write(myDataSourceItem.Fields["Label h1 Class"]); %>'>
<i class='<% Response.Write(myDataSourceItem.Fields["Label i Class"]); %>'></i>
<% Response.Write(myDataSourceItem.Fields["Nav Bar Label"]); %>
</h1>
<ul class='<% Response.Write(myDataSourceItem.Fields["ul Class"]); %>'>
<asp:Literal ID="linkObjects" runat="server"></asp:Literal>
</ul>
</nav>
</asp:View>
Hope I understand correctly.
How Sitecore Cache work on sublayouts: Let take a main navigation (as sublayout) when you enable the cacheable setting global or from page to page you will get this result:
How your navigation looked at first page access after AppPool restart or application DLL update will look the same way on all other pages having cache on sublayout (even if you use another data source or something else, the code is cached/not executed).
But I think you have another bigger problem, move your fields for selection from Presentation Sublayouts on Data Template (Items) you will have huge problems on Locales. Beside you can add from code your classes as this:
You know your Layout, case you are in it, and you know you Context Item or your page definition Item, base on template name (Context.Item.TemplateName == "Article") put your CSS classes

Module position defined in template's manifest.xml is not shown in the joomla backend

I am almost new to joomla. I am working in Ubuntu on Joomla v2.5. I created a custom template in which I created a background image, menu and logo. It is a small template and has below code if I view it in browser.
<div class="main-menu">
<ul class="nav nav-stacked">
<li>Groceries</li>
<li>Exercise</li>
<li>Destress</li>
<li>Ailments</li>
</ul>
</div>
Then I modified it for installing into joomla and it looked as below
<div class="main-menu">
<jdoc:include type="modules" name="menuarea" />
</div>
Also, In the manifest.xml I have defined the position as below
<positions>
<position>menuarea</position>
</positions>
After the installation was successful, I changed the template. It was working and now it was the time to define main menu.
So, I tried to edit the position of mainmenu in the backend and in I could not find the position menuarea. Please suggest where I am going wrong.
Extra Information - I installed the fresh joomla directory and only modification I did was installed this template.
Try to change in module option Position. For this open Exstensions->Module Manager->Your_Module and type "menuarea" for Position and save.