My module position in my Joomla template is just a div with a "row" class. When I add content to that module position using the custom html module and give it module class suffixes of "first", "mod-light" and "bord-left"it appears to nest 2 divs within my module position both with the same classes which is causing problems. How do I modify this so that it is not creating this nested structure or at least does not apply these classes to the inner div?
For example, if I simply entered this raw html into the editor...
"<p>...entered content appears here...</p>"
I would get this output from Joomla...
<div class="moduletable first mod-light bord-left span4">
<div class="custom first mod-light bord-left">
<p>...entered content appears here...</p>
</div>
</div>
How can I make Joomla do this instead...
<div class="moduletable first mod-light bord-left span4">
<p>...entered content appears here...</p>
</div>
You can use custom module chrome to create your own module layouts:
http://docs.joomla.org/Applying_custom_module_chrome
Related
I have a component A with its html/ts file. When I inherit a second component B from A, this will take all properties and method on the first. If I want to use the component A html, I can reference the comp A html in the templateUrl property.
I have a problem. I want use the component A html, but I want extend it. So my idea is "include" the first component html to the second. It's possible in Angular2? Is there another way?
I don't want to create an instance of component A in the component B. I want only the html markup.
EDIT:
In this example there is my problem:
https://stackblitz.com/edit/ng-content-projection-lzjwea
when I inherited the Hello2 ts, If I create an instance of hello component in hello2 html, it take its name property. I found three solutions:
Change all properties that need to be used in all inherit component to input and inject the
Duplicate html code
Find a way to reference the html of first component without creating an instance of it.
I think the best solution is the third. But I don't know a way to do it..
ng-content could be used to project dynamic content in a component.
For example, consider the following
hello.component.html
<div id='border'>
<h1>Base Component</h1>
<p>ng-content could be used for projecting dynamic content within a component</p>
<ng-content>
<!-- Dynamic content goes here -->
</ng-content>
</div>
So, now whatever that is in between
<hello>
<!-- dynamic html here -->
</hello>
app.component.html
<hello>
<div style="border: 2px solid red">
<h2>Child Component</h2>
<button id="sample1"> Sample 1 </button>
<button id="sample2"> Sample 2 </button>
</div>
</hello>
Example
Hope this helps
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 hope the title isn't misleading too much as I have no idea how else to call it, but here's the problem:
I am developing an app with Angular 2 and use the nested templates (hope that's the right name for them) in several instances.
Now the issue I have is that my app consists of several "widgets" which can contain other widgets. This can create a sort of circle in the template calls.
Example:
home.html:
<div> some html stuff </div>
<widget1 *ng-for="#widget of widgetList" [widget]="widget"></widget1>
widget1.html:
<div> some html stuff unique to widget1 </div>
<div *ng-if="widget.widgetSubList">
<div *ng-for="#widget of widget.widgetSubList">
<div [ng-switch]="widget.type">
<p *ng-switch-when="2"><widget2 [widget]="widget"></></widget2></p>
<p *ng-switch-when="3"><widget3 [widget]="widget"></></widget3></p>
</div>
</div>
</div>
widget2.html
<div> some html stuff unique to widget2 </div>
<div *ng-if="widget.widgetSubList">
<div *ng-for="#widget of widget.widgetSubList">
<div [ng-switch]="widget.type">
<p *ng-switch-when="1"><widget1 [widget]="widget"></></widget1></p>
<p *ng-switch-when="3"><widget3 [widget]="widget"></></widget3></p>
</div>
</div>
</div>
widgetSubList is a property of the widget that is filled if it has sub-widgets, the ng-if does work in this case and doesn't crash the code if there are no sub-widgets.
That's the point where the whole thing crashes since it creates the mentioned "circle" of widgets containing widgets that have been in the above part of the tree already since widget1 can call widget2 which can call widget1 again.
I can't change that structure since it's predetermined by the API I use in this case.
So now the question: Is there a way to have this work?
Since all widgets require different implementations, I can't really work around it without creating one giant html file filled with ng-ifs, which I would like to avoid.
PS: I edited the example a bit further to represent the code better.
the #Input part is present in the .ts files.
Right now, I only read out one additional level of sub-widgets from the API for test purposes.
What is a bit strange is that you don't have a loop of widgets within the widget1.html and widget2.html files. With your implement, you always remain on the same widget metadata, so it's normal that you have an infinite loop...
As a matter of fact, you need to have a recursive structure that would allow to define the structure of your component:
widgetList
widget
children
widget
children
widget
children
widget
children
widget
children
(...)
So when the current widget won't have children, the recursive loop will end.
So I would refactor your templates like this (for example for widget1.html):
<div> some html stuff unique to widget1 </div>
<div *ng-for="#subWidget of widget.children">
<div [ng-switch]="subWidget.type">
<p *ng-switch-when="2"><widget2 [widget]="subWidget"></widget2></p>
<p *ng-switch-when="3"><widget3 [widget]="subWidget"></widget3</p>
</div>
</div>
Each widget would have an input corresponding to the widget metadata:
#Component({
selector: 'widget1',
(...)
})
export class Widget1Component {
#Input()
widget: any;
}
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)
So I was wondering if anyone knows of a package/plugin for sublime or a service that lists class attributes within an HTML snippet.
For example I like to markup then work on the css. I keep finding myself splitting sublime into two halves and just manually scrolling through the HTML on the left and rewriting the the actual class name styles on the right.
Basically I have:
<section class="home-testimonials">
<h2 class="home-title">
<span>Testimonials</span>
</h2>
<div class="testimonial-wrapper">
<!-- Other divs with classes -->
</div>
</section>
And I want a list like this:
.home-testimonials
.home-title
.testimonial-wrapper
If it denotes hierarchy position even better. Thanks in advance!
I'm not sure about Sublime, but with regular JS you can select all elements with document.getElementsByTagName('*'), and then extract classes for each element with element.className.