In light of GMail's questionable support for CSS, I'd like to apply style elements to everything in the HTML email I'm assembling.
I'm currently using MVC3's Razor to construct the email, then sending off the generated HTML. Is there any way for me to write the template with a style sheet, then transform it such that each element gets a style attribute with the appropriate styles?
For instance, in a normal web page, I would have something like
<style>
a { color:#1c5567; }
</style>
Click here!
If a GMail user looks at this, they won't see it in that shade of teal. However, if I do
Click here!
they will. But that is a huge maintainability headache. Thus I want a process that can take HTML with the former style and output it in the latter.
. For this, I want to take that existing CSS style and transform it such that style="color:#1c5567;" gets added to every <a> on the page.
It might be the lamest way to do this but you could use a simple CSS parser like this one CSS Parser and add style attribute as required.
Since you're overriding the style in gmail from an external stylesheet, you need to use !important to override the style.
a {
color:#1c5567 !important;
}
Related
I am using Kentico 8.2 and running into the issue where I need to have different styles for my forms. I have been able to alter the input attributes without a problem, and thereby create different styling for the forms in the site. However, I cannot get the .FormButton to change style if attached to my CSS for the button, ie .newPage .FormButton { background:red color:white }.
Is there another way to populate a CSS on top of the form button in 8.2 without having to add a class attribute in the code behind?
You don't have to touch the code behind. You can just wrap the form in a div with a CSS class using either content before/after or a web part container and leverage CSS Specificty by creating a more specific CSS selector including your new class (e.g. .myRedForm). The resulting selector would look something like this: .newPage .myRedForm .FormButton { background:red color:white }. The last resort would be using the !important directive which I would rather avoid.
Best way to do this is to render the form on a page and inspect the element by using F12 or FireBug. Either one will allow you to view the source and inspect the elements in order for you to get your selector to style it accordingly.
You can also specify a css class by creating your form layout manually and adding CSS around the button. Not ideal because you'd have to build your forms manually each time.
I have a Rails 3.2 app. I use a partial _invoice_pdf.html.erb to display an invoice. The same partial is used to create an invoice pdf. I'm using wicked pdf and it does not include the CSS when creating the pdf. That's ok - it looks fine.
But, I would like to turn off the CSS when I display the partial on the screen.
Is there a command to not include the css on a particular view (partial)?
Thanks for the help!
You can do this with just HTML and CSS, but with the caveat that the CSS technique is not supported on IE and some mobile browsers. You could get full browser support by changing the CSS to override every individual property being applied to your invoice.
CSS
#your_invoice {
all: initial;
* {
all: unset;
}
}
HTML
<div id="your_invoice">
<%= render "_invoice_pdf.html.erb"%>
</div>
Generally css isn't included in partials, but in the layout or view file that includes the partial. in which case simply either don't include the css in the particular view if appropriate or conditionally exclude it in the layout. Something along the lines of:
<%= stylesheet_link_tag 'application' unless #flag_set_in_controller %>
You could utilize a custom layout and CSS file for this aspect of your application. However, that seems less than ideal or workable based on your comment to Camden's answer (the partial does not need the CSS but the 'outer' elements do).
Otherwise, I think you are looking at conditionally removing the CSS with JavaScript placed in an appropriate block in your partial.
You can remove an external CSS file altogether with a snippet of JS like this:
$('link').remove(); // would remove all <link> elements
$('link').not('.myCSSToKeep').remove(); // would remove all <link> elements except for one with class='myCSSToKeep'
Should that not be possible for your application, I believe you're down to manually changing styles via their class with jQuery or similar.
$('.myClass').css('color', #fff); // and so on
If the styles for the PDF could be collected/used from their own CSS file, the first approach should work fairly well ... assuming I'm understanding the requirements correctly :)!
I have changed my css sheet for my entire site and it works great. The change has to do with the background color of rows in tables. Although it does what I want, there is one view that I would like to be exempt from this alteration. Is there a way to exclude this view from the change or create a new css sheet for this specific view?
Well, I would come up with a CSS styling strategy. The goal should be to minimize CSS and overrides. Also, having an extra CSS file for just one page will cause an extra HTTP round trip to get the resource. My recommendation is to stick extra CSS classes on this view. Then, override precisely the styles that you need in your global CSS styles.
I figured out the solution which ended up being much easier than I expected. Since I am very new to using CSS and HTML I was unaware of the style tag. However, that is what I was looking for. For anybody looking at this in the future, just use:
<style>
(CSS that you would like to override)
</style>
Problem: An existing resource dependency (which I'm not permitted to alter or remove from the build) which contains a stylesheet that dictates an unwanted button style. I want to somehow overcome the influence that this stylesheet has on the button style in my page.
Question: Using my own local stylesheet, how can I revert to the default Windows css button style (background, shape, text)? -I dont know what the css attributes should be, etc. (I assume I would have to use the "!important" phrase, etc.)
Each browser has its own set of default CSS rules. There is no "Windows" CSS unless you're explicitly referring to IE which does its best to match said style. You'll need to find your preferred browser's defaults and append them after the new CSS to overrule them back to the default theme.
Some common browser default styles:
Firefox
Chrome
IE
Don't use !important
Instead define your button styles with higher specificity and give your buttons the desired look. So if in the original stylesheet you have
button { ... }
then in your stylesheet do
#parent button { ... }
You won't, and shouldn't, use !important. You just need to properly override following the principles of CSS specificity and inheritance.
Explanation of CSS Inheritance
For example--let's say your 'unwanted' button style is something like this:
<input type="button" class="unwanted" />
And you've got CSS in your (uneditable) style sheet:
.unwanted {
fooRule: whatever;
barRule: whatever;
}
Using inheritance, you just need to write your own external stylesheet. Things to remember:
(1) You should put it below the existing that contains the 'unwanted' stylesheet reference. Inheritance processes external stylesheets sequentially. This follows the 'closest rule wins' principle.
(2) The way you write the CSS rule must be MORE specific than the rule that currently applies the unwanted style. Again, the above link really helps explain this.
Going back to our previous example, the unwanted style is being applied simply by a class of 'unwanted'. Your rule can override without editing the HTML. Alternately you can edit the HTML--it's up to you. It also depends on how globally you want to affect button styles.
If you want to globally affect all buttons with 'unwanted' class, you would do:
input[type='button'] .unwanted {
fooRule:override;
}
If you only want to change SOME of the buttons that have a style of unwanted, you would instead do:
.unwanted.newRule {
fooRule:override;
}
And then you would mod your HTML to be:
<input type="button" class="unwanted newRule">
Note that .unwanted.newRule means it will only impact 'elements' with a class of both unwanted and newRule. It would not change anything if the unwanted style is set up like this:
<form class="unwanted">
<input type="button" class="newRule" />
</form>
The reason being .unwanted.newRule means 'both classes are on the same element'. You would change it to :
.unwanted .newRule {foo}
So--my point is, there are a ton of semantically correct ways to CORRECTLY utilize CSS specificity and inheritance, and do what you want to do, without having to use !important.
On a side note, the only reason you'd have to use !important is if the css styling the button is actually being applied using javascript that writes 'style' attributes to the HTML element. If that is the case, (1) don't use that JS, as that is a horrible method for styling using JS, (2) you will have to use !important to override the inline style being applied by the JS. Again, this is because of how cascading works--in this case, CSS is applied by (1) browser (user agent), (2) external css, (3) internal 'head' css, (4) internal inline css, (5) author !important declarations, (6) user !important declarations.
I've developed a dynamic ad banner that consits of html and styles loaded into the host site via javascript. On one particular site, certain styles in the stylesheet for the main page are affecting the html that I'm dynamically loading.
Is there a technique for having the dynamically loaded html only render styles from the css I have loaded along with the html, and ignoring any styles in the host page?
Any advice appreciated.
Put your banner into an iframe.
Add !important to your CSS like
p { color: #ff0000 !important; }
Yeah there is a real easy way. Why dont you have your classes separated form the main page HTML. Give them a unique identification if you want there to be no conflict.
Example
Your main page has a css class .input
Give your dynamically loading page as .Dybamically_input this will server something as a namespace.Also you can use !important to the properties which you definitely want to added.
There is an evolving standard to introduce scope blocks to CSS but that isn't yet supported enough to be of any use. You can use the !important directive, but that is likely also to affect the underlying document if you don't apply it carefully.
The best solution is to create a scope by including all the the HTML in your add banner inside a div with a uniquely named class (and use your own namespace eg. 'cog_myAd' to try to guarantee uniqueness. Then apply styles just to that class, using !important where you might need to override styles that could be changed lower down the cascade of styles.
If you have attached your CSS file to the HTML page then the only solution to it would be using !important for all conflicting CSS properties -
.className{
color: red !important;
}
Use inline styles (the style attribute on all your banner elements you want to style) instead of external css file - this way you will never have a conflict.
The other option as others suggested is to use IFrame.