I am building plone 5 theme and have a question about replacing nested html elements using rules.xml. Please see the structure then read the question at the end.
Plone5 theme file structure
index.html
footer.html
header.html
header_1.html
header_2.html
rules.xml
index.html
This is my default theme page. I have to div that I want them to be replaced with other elements.
I am doing so in the rules.xml.
...
<body>
<div id="header"/>
<div>my content. does not need to be replaced. static</div>
<div id="footer"/>
</body>
...
footer.html
<div id="footer">
<div>This is your footer</div>
</div>
header.html
<div id="header">
<div>This is your header</div>
<div id="header_1"/>
<div id="header_2"/>
</div>
header_1.html
<div id="header_1">
<div>This is part 1 of your header</div>
</div>
header_2.html
<div id="header_2">
<div>This is part 2 of your header</div>
</div>
rules.xml
<rules
xmlns="http://namespaces.plone.org/diazo"
xmlns:css="http://namespaces.plone.org/diazo/css"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- in here I am replacing the footer. this works because there is not other elements inside
footer.html that needs to be replaced. -->
<replace
href="path/to/footer.html"
css:theme="#footer"
css:content="#footer"
method="document"
/>
***
RULE FOR REPLACING
header
header_1
header_2
</rules>
Question
How can i write the replace rule for the header to replace first the parent which is header and then replace header_1 and header_2 inside header parent.
I tried different ways to do this but I was not able to replace the elements inside header.html.
Basically, rules.xml has load header and replace its elements then see if apply the the rules on the element that was just replaced.
i don't think that is gonna work. you need to define one template with theme="index.html" and the diazo compiler will build xslt rules in there. then you can use the rules to get content from Plone and even use the href attribute to get content from different urls. with inline rules you could inject parts into your theme or better you could drop parts which are not wanted. So i would put you header / footer variants into the main theme template and use conditional drop rules to clean it out. you also can use different theme templates depending on current path or other selectors from the content side. in Plone you have useful css classes in the body tag for that.
Related
For example, I have a page that has HTML like this
<div class="row">
<div class="col-md-4">
<!-- Dynamic content here that can contain html tags -->
</div>
<div class="col-md-4">
<!-- Dynamic content here that can contain html tags -->
</div>
<div class="col-md-4">
<!-- Dynamic content here that can contain html tags -->
</div>
</div>
is there a simple solution to prevent this "Dynamic content" to messed up my page HTML template.
For example, if the "Dynamic Content" contain HTML div tag that does not have a closing div tag, then my page template/style will be broken because of this "Dynamic Content"
Usually for some servers if minor mistakes like this happen in html/css/script it automatically neglects it and displays the design as we expect.
Note: it happens sometimes for some servers.
But for some servers, even a div is not closed or bracket is not closed properly it shows server error.
In general, it is better to design the html section separately in any editor and then update it dynamically.
Better to avoid these issues at initial stage...
I have would like to combine all my CSS files into a single file to lessen the load on the server, however, I use quite a number of divs with the same name on the page, but they are styled differently.
How do I style the single page CSS to specify that this section is for X.html only and what do I need to add in the X.html?
Thanks in advance!
You can give each page an id and then target that id and div specifically. For example
Page one:
<body id="page-one">
<div class="content"></div>
</body>
Page two:
<body id="page-two">
<div class="content"></div>
</body>
and then styles like
#page-one .content {background:red;}
#page-two .content {background:blue;}
My design contains custom tags like <header>, <section> and <footer> , how can I create panels with these tags and put them in many nested panels?
My design contains these custom tags :
<header>
<div>
</div>
</header>
<section>
<div>
</div>
</section>
<footer>
<div>
</div>
</footer>
Okay, If I good understood you can try this way:
In html file:
<panel>
<element>Somethhing written</element>
</panel>
in css file:
panel { display:block; }
panel element { display:block; background:#fc0; }
I hope I understood good. if no - give an example with code, and we will try find solution.
Some proposals are:
1) Copy the relative tpl.php files from YOUR_MODULES_PATH/panels/plugins/layouts/CURRENT_LAYOUT into your theme folder and override it as you prefer. These tpl.php files are responsive for the wrapping tags.
See a similar question: Drupal - dynamically add class to wrapping div based on panel pane content node type
2) Use the Panels Extra Styles module.
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
I have the following HTML Code, If I have a lot of text inside my div called content, the footer div doesn't move downward and the texts go over my footer div.
To see the problem, please check this link http://jsfiddle.net/LhzrQ/
Could You please tell me how to solve the problem?
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;width:400px;float:left;">
HyperText Markup Language (HTML) is the main markup language for displaying web pages and other information that can be displayed in a web browser.
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content. The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com
</div>
</div>
</body>
You can delete the height element of the content div.
See: http://jsfiddle.net/LhzrQ/1/
Working fiddle
remove the fixed height to the content div. it will work .