I have an html document that I generate with clojure hiccup. When I send the file as an attachment to an email, the css gets stripped out. The css is external and being referenced in the head of the file like below:
[:head
[:title "My Title"]
(include-css "css/mycss.css")]
I heard mail servers strip out all external css so it does not interfere with theirs. One solution I was able to fin was to do an inline styling. For example if I have the below html, how do I perform inline styling on it.
[:thead
[:tr [:th "First column"] [:th "Second column"] [:th "Third column"]]]
Additionally, feel free to suggest if there is a better answer to what I want to do. Thanks!
hiccup supports attributes right out of the box with the {} syntax, so you could simply use this for settings style attributes on elements easily, e.g., [:p {:style "color:#E0E0E0"} "My paragraph"] will put the color on the paragraph. But I guess in your case, it might be more convenient to put the general style definitions in the head element, using the style element. hiccup supports :style for this as one would expect, e.g.
[:head [:title "My title"]
[:style "body { padding-top: 60px; }"]].
Related
Instead of creating a whole other id and ruleset, why can’t I just put multiple values (ex. font-family: cursive; color: blue) in a single ruleset? I tried it and it works and seems like a quicker way to do it. For example, if I want to change the font, color, and uppercase/lowercase of a title, can't I just put all those values into one ruleset?
The preferred way to do this is using Cascading Style Sheet (CSS). This allows you to edit the visual aspects of the site without having to deal much with the HTML code itself.
Explanation :
<[tag] style="[css]"> Content </[tag]>
Where [tag] can be anything. For example "p" (paragraph), "span", "div", "ul", "li".. etc.
and where [css] is any valid CSS. For example "color:red; font-size:15px; font-weight:bold"
The recommended way to add style to a html element is by assigning it a "class" (a identifier that can be repeated on the document) or a "id" a unique identifier that shall not be repeated in the document.
For example:
<[tag] id="element1" class="red"> Content </[tag]>
<[tag] id="element2" class="red"> Content </[tag]>
Where tag is any html valid tag. id is a unique arbitrary name and class is an arbitrary name that can be repeated.
Then in the CSS (inside the tags of your document):
<style type="text/css">
.red {
color:red;
}
#element1 {
background-color:black;
}
</style>
For this example and to keep it simple to new users I named the class "red". However class="red" isn't the best example of how to name . Better to name CSS classes after their semantic meaning, rather than the style(s) they implement. So class="error" or class="highlight" might be more appropriate. ( Thanks to Grant Wagner for pointing that out )
For a complete guide to CSS you can visit this link: http://www.w3schools.com/css/
Remember:
Keep your HTML Code clean and use CSS to modify ANY visual style that's needed. CSS is really powerful and it'll save you a lot of time.
Yes you can and it’s okay to do that.
Actually this is the right way!
so you create a ruleset with a specific selector, then you write all the properties that you wish and element to have (if the selector applies to the element)
I have an ionic/angular app which autogenerates a custom tag element with a different _ngcontent attribute each time e.g.:
<tag _ngcontent-hgr-c2>...</tag> (1st refresh)
<tag _ngcontent-agj-c7>...</tag> (2nd refresh)
<tag _ngcontent-cfx-c5>...</tag> (3rd refresh)
Is there a way to use regex to target the custom tag attribute?
This didn't work:
tag[^=_ngcontent-] {
color: red !important;
}
Nor did just targetting the tag app e.g.:
tag {
color: red !important;
}
According to this answer, there is kind of regex in CSS, but it can be only applied to attribute's value, not to attribute itself. The W3C documentation says the same, so because Angular creates custom attributes, I'm afraid that it can be hard to achieve by regex.
If you want to style your tag like in the second example you can do it by defining its styles in global styles.scss. This is not the best solution, but should work.
This angular-blog article recently helped me understand the idea behind the style ecapsulation.
Unfortunately, there is no wildcarding support in CSS for attribute names.
If you have access to the application code which generates the custom tags, you should add classes to these elements (if the app supports it).
See also this question.
I would like to have a <ul> inside the help_text of a django form field.
Unfortunately django renders the help_text inside a <span>.
According to the HTML spec a <span> must not contain a <ul>. At least that is what my validation tool says.
Here is the source of django: https://github.com/django/django/blob/master/django/forms/forms.py#L283
def as_table(self):
"Return this form rendered as HTML <tr>s -- excluding the <table></table>."
return self._html_output(
normal_row='<tr%(html_class_attr)s><th>%(label)s</th><td>%(errors)s%(field)s%(help_text)s</td></tr>',
error_row='<tr><td colspan="2">%s</td></tr>',
row_ender='</td></tr>',
help_text_html='<br><span class="helptext">%s</span>',
errors_on_separate_row=False)
What can I do to get <ul> in the help_text and valid html.
Overriding as_table() does not work, since the form is from "core_app" and the field is from a plugin. Both are two different git repos and I don't want to modify the core just because of this.
As you already mentioned, in HTML there is a concept of block and inline elements.
In short block elements generate a new line and may contain other block and inline elements. Inline elements don't generate a new line and may contain other inline elements, but not block elements.
MDN web docs offers more information on block and inline elements.
Since span is an inline element, you can't place ul which is a block-level element inside. Or, you could, but then it's not a valid HTML, and that's not what you want.
Since you're using a third-party code, modifiying it could introduce other problems.
You could fork it, modify the parts you need and then use your fork. But when that third-party code gets updated, you have to repeat the whole process.
In cases like that you could just do monkey patching.
For your particular problem we could therefore do something like this:
from django import forms
class MyBaseForm(forms.BaseForm):
def as_table(self):
"Return this form rendered as HTML s -- excluding the ."
return self._html_output(
normal_row='%(label)s%(errors)s%(field)s%(help_text)s',
error_row='%s',
row_ender='',
help_text_html='<div class="helptext">%s</div>',
errors_on_separate_row=False)
BaseForm.as_table = MyBaseForm.as_table
You can place this code in your forms.py or any other file that is suitable to you.
Now the help_text will be rendered as a div element, which is a block-level element. You can place an unordered list ul inside and have a valid HTML.
Monkey patching isn't the most beautiful way of solving problems, but it is in my opinion a pragmatic way to overcome some tricky issues.
I think what you want is not exactly to "have an <ul> inside your help_text" but rather "display a bullet list inside your help text".
So if you don't have the ability to override as_table() or use something other than as_table(), I hope you are still able to change the stylesheet. In which case you can fake your ul with a span:
from django.utils.safestring import mark_safe
help_text=mark_safe(
'<span class="fake-ul">'
'<span class="fake-li">foo</span>'
'<span class="fake-li">bar</span>'
'</span>'
)
And here is your CSS:
.fake-ul {
display: block;
padding-left: 40px;
list-style-type: disc;
}
.fake-li {
display: list-item;
}
So probably it is too late, but I think you may find Django widget tweaks usefull.
I've build a page with a form and for some reason my button for the form and my footer element is not showing up on the page.
I have added a link so you can check out my code. And I know its a HOT MESS! so if you can give me any tips on the css and html please feel free to let me know.
http://jsfiddle.net/jeramiewinchell/j6n0w1tj/
enter code here
Fair point in the edit. I said it was a mess without giving anything positive.
Here are some tips that could improve the HTML (with links for reference):
You should specify a doctype (e.g.: <!doctype html>) instead of having an empty <!DOCTYPE> tag.
http://www.w3.org/TR/html-markup/syntax.html#doctype-syntax
It would be nice to have a <html> wrapping everything, and a <head> wrapping the title and links. I'm not clear if it's technically valid not to have them (the W3C HTML validator will not validate a page without a <head> although it will validate without the <html>), but it's nice and it will help keep things organized.
The links should have a type indicating the mime type (in this case type="text/css").
http://www.w3schools.com/tags/tag_link.asp
Closing empty elements (e.g.: img, link, input) is not mandatory in HTML5, but it is in XHTML. Depending on the doctype that you choose, you should close them accordingly. Using /> at the end is valid for both HTML5 and XHTML, so you may want to consider it.
http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/
Don't nest <p> tags. Paragraphs are block elements that should contain only phrasing content (= not block/paragraph elements). How to fix it: replace <p class="site_section1"> with a <div class="site_section1">.
http://www.w3.org/TR/html5/grouping-content.html#the-p-element
Always close the block tags that you open. For example, you never close the <p class="site_section1"> (altough as I said in the previous point, you should making it a <div>... and then close it). The result in the browser may be unpredictable.
I mentioned in my comment above (sorry, I don't know the name in English), you should avoid crossed tags/nesting of tags. This is incorrect: <label>...<select></label>...</select>, it should be <label>...</label><select>...</select>.
Again, not mandatory but it could be nice to set a value attribute in the <option> tags. If you don't specify a value, the value sent will be the content inside between the <option> tags (that may be what you want in this case).
Don't forget all the code and to close the tags correctly! Things like this: <button type="submit">Save</buttons </div> can have disastrous results (although it looks more of a typo to me).
Don't close tags twice (e.g.: you have </body> twice)
And for the CSS (also with some links for reference):
Avoid unnecessary styling. E.g.: border-radius:0px is unnecessary because 0 is the default value for border-radius (unless you have defined some previous style and you want to overwrite it).
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
Specifying units is required for values different than 0. E.g.: margin-left:15 is that 15 in px or em?
http://www.w3.org/TR/CSS21/syndata.html#length-units
The units are optional when the value is 0. Some people find it more readable and better because it is shorter; I personally like them. Your call, but always:
Be consistent: if you omit the units for a zero value, do it in all your definitions. It looks awkward to me to see a padding:0 (without units) next to a margin:0px. It will help you read and maintain the code later.
You could merge many styles together. For example: .zonelist23, .zonelist24, and .zonelist25 are the same, you could define one style only (e.g.: .zonelist_bml30) or set all of them together: .zonelist23, .zonelist24, .zonelist25 { ... }
Not mandatory, but nice: The font-family tag should have several names as a "fallback" system. That way, if the browser does not support the first font, it will go to the next and so on.
http://www.w3schools.com/css/css_font.asp
Just out of curiosity: did you meant to put in the stylesheet .header or is it header? I personally try to avoid classes/ids with the same name as a tag to keep the code easier to understand, but that's a personal choice. As far as I know there's nothing against naming a class like a tag.
One way of having fun and learning (you may now think that I have a strange way of having fun and learning):
Go to the W3C HTML Validator.
Click on the the "validate by direct input" tab.
Copy your code in the box.
Click on the "Validate" button.
View the first error, and read the comments (visit the links for reference).
Fix the code according to what you've read.
Click on the "Revalidate" button.
Repeat steps 5-7 until no errors are found.
(You can do the same with the CSS in the W3C CSS Validator)
Please see this fiddle : http://jsfiddle.net/j6n0w1tj/1/
I have corrected your code.
Kindly follow the steps mentioned by #monty82, who has given an excellent explanation on how to proceed with your code.
Wrong html:
<label>..<select></Label><option></option></select>
Correct html
<label>..</label><select><option></option></select>
Tags like <input>,<br> are self closing tags,close it like <input
type="radio"/> and <br/> not as </br>.
Please make sure whether your opening and closing tags match
I make heavy use properties from bundles in my application as I strive to keep code maintainable in future. Because of this all HTML text is fetched from a key/value properties file eg. 'index_en.properties'
This has become problematic where I need the browser to render bold text and I don't find any topics online that address this problem.
Best solution I can then up would be to break every fetched value down with use of the
<h:outputText> tags that are child elements of the `<b>` tags.
What I need here is a methodology/tips/solution from someone who uses property files often.
I tried using html escape codes directly in the properties file, but this does not work.
Any tips?
Thank you,
Yucca
PS I doubt CSS will help me here.
Put HTML <b> in bundle and use escape="false" on <h:outputText> to disable standard HTML escaping by the component:
<h:outputText value="#{msg.text}" escape="false" />
Be sure that you never do this on user-controlled input as it would put XSS attack holes open. Also be sure that you don't go overboard with putting HTML in bundles. For basic text formatting with <b>, <u>, <i>, <s> and so on it's okay, but not for semantic markup like <p>, <div>, <h1>, etc.