I created a custom component.
I also created a custom Style with the corresponding css class and added the components to the Available Renderings. The styles show up correctly in the Experience Editor
.
Here is the markup:
<div class="section component full-image">
<div class="container">
//Rest of the code
</div>
</div>
If I apply this style to any of the out-of-the-box components, it gets applied. However, it does not apply to my component. What Am I missing?
Applied to OOTB components like the rich text box
Not applied to my component
Figured it out, Sitecore didn't like a "section" class in the parent div. Removing it works
Related
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.
In a page, I have a rendering with a placeholder, Offcanvas.cshtml
<div data-ads-offcanvas-id="#Model.Id" class="ads-offcanvas #Html.GetCssStyles()">
#{
<a data-ads-offcanvas-trigger-id="#Model.Id" class="ads-close-button" href="#0">X</a>
#Html.Sitecore().Placeholder(LayoutHelper.GetPlaceholder(Placeholders.AccordionSection, Model.Id))
}
and inside that rendering, I plan to put another rendering with a placeholder named Modal.cshtml
<div data-ads-modal-container="#Model.Id" class="ads-modal-container">
<div class="ads-modal-dialog">
<div class="ads-close-box">
<a data-ads-modal-id="#Model.Id" href="#0">X</a>
</div>
<div class="ads-modal-content">
#Html.Sitecore().Placeholder(LayoutHelper.GetPlaceholder(Placeholders.AccordionSection, Model.Id))
</div>
</div>
So it looks like:
-Offcanvas
+-Modal
++-Text content
When I put text content inside the Modal rendering, the content is not rendered. I'm guessing that it only renders that first few renderings and fail to do so when the renderings became highly nested.
Is there a solution to render components to the very-most child?
Thanks guys!
EDIT:
Here's the code for GetPlaceholder:
public static string GetPlaceholder(string name, Guid id)
{
return $"{name}_{id}";
}
Dynamic placeholders are a bit more complicated than generating a unique placeholder key. The generated key still needs to resolve back to a real placeholder that is defined in Sitecore.
Check out the Integrated Dynamic Placeholder module.
This will provide an Html helper similar to your current implementation:
#Html.Sitecore().DynamicPlaceholder("[Placeholder Name]")
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.
I'm trying to use gulp-uncss to remove unneeded CSS from a Zurb Foundation website.
Within the site I'm using Foundation's Equalizer to make two columns the same height. This works by adding a data- attribute to an element:
<div data-equalizer>
<div data-equalizer-watch>
<div>
<div data-equalizer-watch>
<div>
<div>
When the page loads Foundation determines the height of the two elements and injects an inline style to set the height of the elements to the greater of the two element heights. The result is:
<div data-equalizer>
<div data-equalizer-watch style="height: 256px;">
<div>
<div data-equalizer-watch style="height: 256px;">
<div>
<div>
When I add gulp-uncss to my gulpfile.js the Equalizer no longer works. The data- attributes are still present in the HTML file, but the inline styles are not added.
I've tried using the ignore option in gulp-uncss to ignore height but had no luck. The inline style is no longer added to HTML document.
Is there an option in gulp-uncss that will allow the equalizer to do it's job?
I was able to get gulp-uncss working using the ignore parameter in UnCSS.
Adding:
ignore: [/^meta.foundation/, /f-topbar-fixed/, /contain-to-grid/, /sticky/, /fixed/]
to uncss() kept all the necessary CSS. The most important of these is /^meta.foundation as this allows the Foundation JS to inject the styles. The remaining values /f-topbar-fixed, contain-to-grid, /sticky/ and /fixed/ are all specific to the Foundation JS modules I'm using. The above work for a .sticky topbar.
If you're using other JS modules you'll need to determine what classes are being injected and add those to the the ignore array.
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