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;}
Related
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.
I was trying to insert another html page into an php page by using "include"
and that html page is having some stylesheets imported,
When I insert that page, it disturbs my PHP page..
How can I restrict the CSS for that particular page only?
place the imported page inside a container div, and then give it an id like:
<div id='included_page'> Your page goes here...</div>
Then add #included_page .someClass{mystyle: property;} to each and every style defined.i.e, increase the level.
Add a class or id to each <body> and write styles accordingly like below
HTML
<body class='home'>
Home page content
</body>
<body class='about'>
About page content
</body>
CSS
.home .someclass{
}
.about .someclass{
}
Try this.
In Page[restrict the CSS]:
<?php
$type = 'exclude';
inlcude('page_to_include.php');
page_to_include.php:
<?php
if(!isset($type) or ($type !== 'exclude')) {
// Things to be excluded from Page 1;
}
Ref: PHP - include a php file and also send query parameters
I am done with redirection to target page but what I want is to redirect to particular <div> of the page. How can this be achieved?
You can do it in two ways.
1) [via Javascript (+jQuery)]
home
$('#home').click(function(){
$(document).scrollTop(100) // any value you need
});
2) [via pure HTML]
home
<section id="home_section"></section>
<div id="go1">
<!-- content -->
</div>
<div id="go2">
<!-- content -->
</div>
<div id="go3">
<!-- content -->
</div>
...
Just append url id as below ,you are done !
news.html#go1
news.html#go2
news.html#go3
This is the easiest way for me
<li>Prices</li> (This could be a paragraph or a button)</li>
<div id="prices">
// Prices section
</div>
You need to add id attribute to that section of page you want to show and pass id name at the end of url using hash (#) symbol. For example you want to redirect user to div with id='test'
<div id="test">your section content</div>
Then you should use this url structure:
http://example.com/your_page.php?some_param=1#test
Basically you use anchor tags in HTML to get your job done.
You'l probably be familiar with them as:
As HTML convention, while defining a section, you can give each section an ID for identifiers :
<section id= "blahblah" ></section>
And you can redirect to the section by just mentioning them in the anchor tags :
You can link the html code with css.
In c#
Response.Redirect("http://www.example.com/index.aspx#id_in_css");
Here are two conditions,
1) If you want to redirect to div from different page:
Page
if(window.location.href.includes("div-panel"))
{
$(document).scrollTop(450);
}
2) If you want to redirect to div in same page:
<button id="button-click">Panel</button>
$('#button-click').click(function(){
$(document).scrollTop(450);
});
Give that section an id (lets say: section1) and then the redirect url will be http://www.sample.com/page#section1 .
Note: the # and the keyword, that's the id of the section you want your browser to scroll to.
Read more about Fragment Identifier here
If you really want that smooth sliding to the designed section, here's a quick step-by-step:
In the section you want, create an id property, i.e:
<section id="products">
next, using an anchor tag, insert # + the id for the section on the href property:
<a href="#products">
Now, once clicked, the page will center the section pointed on the anchor tag. But this will happen brutely. In order to smooth the scrolling process, in your CSS file, use this snippet:
html {
scroll-behavior: smooth;
}
And that's the simplest way!
There is also ways for doing it with native JavaScript and JQuery. For more, i recommend the article on CSS Tricks -> https://css-tricks.com/snippets/jquery/smooth-scrolling/
first you need add id where you want to redirect
<section class="com-padd com-padd-redu-top" id="deals-home">
than add
< a href="{% url 'home' %}#deals-home">Go to Home that page</a>
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.
I need to display the following div’s as it is on the screen according to the HTML, but when I print the Claimant Name, Case Info, Contacts, Files should print on 1st page and Claimant Name, Service should print on 2nd page.
Can someone please show me a way to solve it using CSS?
<body>
<div>Claimant Name</div>
<div>Case Info</div>
<div>Contacts</div>
<div>Files</div>
<div>Service</div>
</body>
You cannot guarantee how HTML is printed - it simply isn't possible. If you need to guarantee how a document will print you'll need to create something like a PDF using iTextSharp or similar
Same answer I posted at CSS Creator:
DIV doesn't lend any semantic meaning so there's most definitely a better way to mark it up. It does involve adding a second name field but I don't see that as any sort of problem.
<!DOCTYPE html>
<html>
<head>
<title>Le documents judiciaires</title>
<style type="text/css" media="screen">
#secondPage .name {
display: none;
}
</style>
<style title="text/css" media="print">
#secondPage {
page-break-before: always;
}
</style>
</head>
<body>
<div id="firstPage">
<div class="name">Claimant Name</div>
<div>Case Info</div>
<div>Contacts</div>
<div>Files</div>
</div>
<div id="secondPage">
<div class="name">Claimant Name</div>
<div>Service</div>
</div>
</body>
</html>
You can use CSS to show and hide various elements on a monitor display and a printed version. for instance, you could have Claimant Name on the document twice, but the second one is hidden on the screen. It could be visible when printed.
However, you can't control paging when a web page is printed. You may want to consider a pdf or other printed document format for that. HTML is much more oriented towards browser display than paper printout.
With the page break properties (browser support is variable). Make sure that your stylesheet applies to print media.