as i am new to CQ5.5
I was wondering if it is possible to add a css script within a CQ5.5 componenet.
Script as follow alike
< style type="text/css">
.testScript
{
margin: 0;
padding: 0;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
< /style>
As when i tried to do this and run my html site through the wc3 validator, i have to following error
document type does not allow element "style" here < style
type="text/css" > The element named above was found in a context where
it is not allowed. This could mean that you have incorrectly nested
elements -- such as a "style" element in the "body" section instead of
inside "head" -- or two elements that overlap (which is not allowed).
One common cause for this error is the use of XHTML syntax in HTML
documents. Due to HTML's rules of implicitly closed elements, this
error can create cascading effects. For instance, using XHTML's
"self-closing" tags for "meta" and "link" in the "head" section of a
HTML document may cause the parser to infer the end of the "head"
section and the beginning of the "body" section
Does it means it requires it to enclosed within the tag of an or it is not advisable to write css within the codes of an component?
Any other ways to do it?
The STYLE tag, according to the w3c recommendation, allows authors to put style sheet rules in the head of the document. HTML permits any number of STYLE elements in the HEAD section of a document, though it is not explicitly stated that you shouldn't be adding it elsewhere in the document.
Going by the standards, validators would fail this test case as HTML DTD expects it to be within the HEAD section. And that is exactly the reason why you get the error mentioned in your question. But then, you would still get the expected result because almost all the modern browsers support it anyway.
If you are to follow the best practices, it is advisable to avoid specifying the styles within the component's JSP because
If a component is added to the page multiple times, the same css would be added in multiple locations in the page.
It is invalid markup as per the DTD.
It would become difficult to maintain and manage, and any change
requires the developer to look at multiple locations.
It is ugly.
One way to work around this is using the Client-side HTML library(clientlibs) feature provided by CQ5(AEM). This allows you to organize your component specific styles and scripts within the corresponding clientlibrary folders and using the cq:includeClientLib tag you can include them in your JSP.
But this would include a <link> or <script> at the corresponding location where the cq:includeClientLib is used, which again is an invalid markup according to the w3c validator. Also, adding the component multiple times in the same page, leads to inclusion of multiple link tags in the document.
To overcome this, you could use the embed feature available in clientlibs to embed all the component specific client libraries of your project into another clientlibrary within your design folder present in /etc/designs. Then you can include the embedded clientlib in your page's head section along with your projects global clientlibs. This makes sure that all your component specific styles are added only once, as well as access is restricted to application specific folders to the end users as your files are delivered from /etc and not /apps.
For more on creating and using Client-Side HTML Libraries, refer this doc.
The best way to organize this is using an specific namespace on your component such as:
<!-- jsp component -->
<div class="namespace">
<!-- your stuff here -->
<h1> <%= title%> </h1>
</div>
and then create an specific design as a custom-skin and then using that namespace:
/* newDesign - css file */
.namespace h1{ color:red }
or with less:
/* newDesign - less file */
.namespace{
h1{ color:red; }
}
hope it can help.
Related
How can I add CSS to github's markdown language?
I've been able to do so by using the style property inside html tags, like:
<p style="text-align: center;">This is some random text</p>
But if I move the css to the beginning, like:
<style>
p {
text-align: center;
}
</style>
<p>This is some random text</p>
Github doesn't recognize it, and just writes to the screen the css code.
I'm using Atom, and the package Markdown Preview actually recognizes this correctly, even though on the remote repository it shows wrong. And so does the Google Chrome extension Markdown Preview Plus.
Is there a way to do this? Writing css within html tags just feels plain wrong.
After GitHub converts Markdown to HTML,
The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.
style tags are not included in GitHub's whitelist, so they are removed. I'm actually surprised that inline style attributes work; they don't seem to be included in the whitelist, either, and are explicitly mentioned in the previous paragraph.
In any case, GitHub does not permit arbitrary HTML to be included in Markdown.
Here is how you can accomplish what you're looking for. As the other answer states, Github doesn't support this syntax, but if you pop this Markdown into another preview tool you'll see that the bullets are removed from this list.
|Signal|Description|
|---|---|
|DOP|Horizontal Dilution of precision|
|FIX|GPS Fix Quality indicator: <ul style="list-style-type:none;"><li>0 - fix not available</li><li>1 - GPS fix</li></ul>|
Signal
Description
DOP
Horizontal Dilution of precision
FIX
GPS Fix Quality indicator: 0 - fix not available1 - GPS fix
You can trivially override what CSS Github uses by supplying it with your own style.css file, nested as ./assets/css/style.css (which is stylesheet URL that gets pointed to in the HTML source code that Github build off of your markdown).
Note that if you want to just "add" any CSS, you'll want to copy Github's CSS first, so you can create a file with the same content after which you place your own rules. You can find this on any view-source:https://username.github.io/repo-name/assets/css/style.css with the obvious replacements for username and repo-name.
E.g.
/* CSS as copied from github's own stylesheet here, which is all one line anyway */
...
/* And then your own CSS */
/* remove the repo name as some kind of weird super-title */
h1:first-child { display: none }
/* and better emphasise the _real_ title */
h1:nth-child(2) { font-size: 3em; }
/* let's also give images a subtle border */
img { border: 1px solid #DDD; }
I opened Adobe Dreamweaver's Starter Template named 'Email-Fluid' and everything seems pretty straight forward other than there are some CSS classes that are being used but i can't locate the styles for them.
So for instance there is the following line of code:-
`<div style="display:inline-block; max-width:50%; margin: 0 -2px; vertical-align:top; width:100%;" class="stack-column">`
You will see that there is a class defined as 'stack-column' however this class cannot be found within the header of the document. There is also no links to outside documents or calls to Bootstrap.
In addition there are tags (that i think are HTML) that i don't recognise like <webversion> and <unsubscribe>.
Can anyone help me understand what these are so that i can edit the classes?
Basically what I'm trying to do is copy this style (from a word doc) but using rst.
I was thinking I might need a custom directive which I can can include the header and style the internal checkboxes.
Ideally I would like to be able to do something like:
.. handson::
The title
- Check one
- Check two
The bulltet items inside the handson block would be styled as checkboxs but the rest of the document would just have normal bullet points.
I had a look at the custom directive stuff but I'm not sure if that would be the best way to tackle this. I'm also using rst2pdf if that has any impact on the results.
If you don't want to go down the route of creating a custom directive, you could use a normal admonition block and "fake" the check boxes. Your markup could be standard reStructuredText:
.. admonition:: The title
- Check one
- Check two
You can then include some custom CSS markup within your reStructuredText file to target list items in admonitions:
.. raw:: html
<style>
.admonition ul { list-style-type: none; }
.admonition li:before { content: "\2610"; }
</style>
Here the CSS targets any list item element which is a child of any element with the class "admonition" and replaces the list item bullet points with simulated check boxes using the Unicode Ballot box character, ☐.
Docutils applies an additional class to generic admonitions which is a concatenation of "admonition" and the admonition title. So in the above example we could be more specific with the element we target with the CSS rule:
.admonition-the-title ul { /* ... */ }
This could be used to target a single admonition within your document.
Credit goes to these two answers to the SO question How to create a checklist in reStructuredText (reST)?
Obviously the above targets HTML output. However, I have not used rst2pdf, so can't comment on how the above needs to be modified to work with this program. Hopefully someone else will provide an answer to this. As far as I know, rst2pdf does support a cascading stylesheet mechanism, so it should be straightforward (for someone who knows rst2pdf style sheet syntax) to add an additional .. raw:: pdf role and to modify the above list styles.
The basic question I'm wondering about is what is preferred in terms of readability, reuse, coding style, etc. One thing to note is that this JSP could be used in multiple parts of a page, for this naive example lets say its just a div that needs to be styled a certain way and put on a page several different times.
I realize I could externalize the class to a shared CSS file, but this class will only ever be used by this part of the page, say for instance this box is the only one that will ever need to be purple in the entire product, in my opinion it doesn't make sense to dirty up a shared CSS in order to clean up my JSP. So what is better
Option 1 (Using ID selectors)
<% String contextName = request.getParameter("myContext"); %>
<style type="text/css">
#<%=contextName %>_myDiv
{
font-weight: bold;
background-color: purple;
height: 20px;
}
</style>
<div id="<%=contextName %>_myDiv">
<div>Blah Blah Blah!</div>
</div>
Option 2 (Using class selectors)
<% String contextName = request.getParameter("myContext"); %>
<style type="text/css">
.<%=contextName %>_myDiv
{
font-weight: bold;
background-color: purple;
height: 20px;
}
</style>
<div class="<%=contextName %>_myDiv">
<div>Blah Blah Blah!</div>
</div>
It seems to me that option 2 would make things easier to debug since they are using a shared class, however if there are (for example) 50 of these boxes on the page then it will result in this class being declared 50 times. Does this create extra leg work for the browser. Alternately if I use the ID selector method then I create 50 unique styles that do the exact same thing causing extra work for the browser to match up all the IDs.
So what is better? NOTE: both these ways work, I'm just looking for the pros and cons of each method.
You shouldn't have style elements in the body anyway, so you should put the style in a style sheet. As an id should be unique in the page, you would use a class.
If you don't want to do that, then there is no reason to have a style tag either. Just put the style in the element:
<div style="font-weight:bold;background-color:purple;height:20px;">
<div>Blah Blah Blah!</div>
</div>
If a style is used once, use an ID.
If a style is used more than once, use a class name. The class only needs to be declared once, but is referred to in any element using that class name.
Multiple class names can be used to handle variation from a "base" class.
In general, you should use an external stylesheet to allow the browser to cache the file.
You will want to use classes. This is because you may have more than one instance on the page of that object.
However, For what you are doing it would still be better to hard code your different style options and place them in a css file.
It does not have to be shared with other pages just link it directly on your given view. This will also keep you from having 50 duplicates of one style reference. Then just generate the class for that particular object.
You should check the hierarchy.
"ID are unique, Class is not unique"
check out this article
http://css-tricks.com/the-difference-between-id-and-class/
I'm having difficulty in inserting html tags through CSS and for it to be interpreted as html.
I want to write <noscript><h2>Please enable javascript!</h2></noscript> after the h1 header on all pages; so I have
h1:after
{
content: "\003cnoscript\003e\003ch2\003ePlease enable javascript! \003c/h2\003e\003c/noscript\003e";
}
in my CSS.
Whilst this successfully writes
<noscript><h2>Please enable javascript!</h2></noscript>
It is treated as a string literal and displays it on the page as part of the original h1 header.
For obvious reasons I cannot use javascript for this particular task :P
From W3 :
Generated content does not alter the document tree. In particular, it
is not fed back to the document language processor (e.g., for
reparsing).
Content in <noscript> is displayed only when javascript is disabled.