I have a page that I set the styles of it dynamically with all sort of settings
For example here is an element of a table that I am trying to print:
<td *ngFor="let attribute of attributes"
[class.table-vertical]="styles.template['displayVerticalLines']"
[style.border-left-width]="styles.template['displayVerticalLines']?styles.template['verticalLineSize'] + 'px':null"
[style.border-right-width]="styles.template['displayVerticalLines']?styles.template['verticalLineSize'] + 'px':null"
[style.border-left-color]="styles.template['displayVerticalLines']?styles.template['verticalLineColor']:null"
[style.border-right-color]="styles.template['displayVerticalLines']?styles.template['verticalLineColor']:null">
This is the function I print with:
public print(): void {
window.print();
}
I see the styles affect the element all fine but when I try to print all the inline styles are ignored and only the ones that are in css files are visible.
I realize it is because the media type of the inline css is not print, but I don't see a way to set it as such.
I also tried to add a dynamic <style> element but the compiler just ignores it and skims over it.
Here is a simple plunker of the phenomenon:
https://plnkr.co/edit/vm1AgWP33LL2Gslylvkp?p=preview
How can I overcome this problem?
Related
I'm using Ghost as blogging platform.
I put my code between ``` just like it's one on stackoverlfow.
This works well but the text size of my code is to big.
I know some css but I don't know how or where I can change this size somewhere?
Those code blocks are wrapped in an element (most-likely code or pre wrapped in <>) but you can check what element to apply the CSS to by right clicking on it in your browser and selecting 'inspect'. Inspect will let you look at the code and see what kind of html element it is wrapped in.
Ex:
This is inside code element
This is inside pre element
Once you know what element you need to alter you can target it with CSS and add it to your css style files.
pre{
font-size:18px;
color:red;
}
code{
font-size:16px;
color:blue;
}
<pre>Sample code using pre</pre>
<code>Sample Code using code</code>
In a MediaWiki page, I'd like to set the background color for a specific table row. The site's global stylesheet already has a style for <td>, so the cells do not inherit the style from <tr> as they do by default:
td {
background-color:Salmon;
}
<table border="1">
<tr><td>Salmon</td></tr>
<tr style="background-color:Olive;">
<td>Olive</td>
</tr>
<tr><td>Salmon</td></tr>
</table>
Since this is MediaWiki, I can only set attributes on table tags. Can I somehow override :td{background-color} style to the default inherit for the table with them without having to copy it into each cell?
Judging by https://www.w3.org/TR/css-style-attr/#syntax , this doesn't seem likely.
If you can't edit the CSS, then the answer is no - you have to add the inline style to every table cell. This is why Wikipedia has templates like {{n/a}} that add the inline styles for you.
The best way of doing this is to edit the CSS yourself. If you can't do that, but you are in a position to install extensions (or persuade someone else to install them), you could try the TemplateStyles extension which allows you to add custom CSS to individual templates. Failing that, you could create a template like {{n/a}} which adds the styles to every table cell, but saves you some typing. Or you could just bite the bullet and add all the styles inline to every table cell manually.
Is there a specific reason you are trying to do this inline (you wont be able to if you have a global - you will have to use CSS) Just give the table cell that you want a different color on a class. Since this will be more specific, it will override your global on those elements.
ie:
td class="othercolor"
td.othercolor{
background-color:#some other color
}
The TemplateStyles extension (which is a work in progress but very nearly done; will probably work fine if you apply all the open patches) allows attaching CSS rules to wiki pages. So you can do things like
table.mytable td {
background-color: Salmon;
}
This might be too general for your purposes, but changing
td {
background-color:salmon;
}
to
tr {
background-color:salmon;
}
will display the second row only in Olive, and the other rows in Salmon.
An existing style sheet has a whole bevy of styles defined for the A element strewn all over the place. I find it pretty difficult to track and trace everything.
I then have:
<ul class="nav navbar-nav navbar-right">
<li>xxxxx</li>
<li><a href='...'>yyyyy</a></li>
</ul>
I don't want the A element above to inherit what are in the style sheet. I also do not want to remove the classes for the UL element as there are other side effects. I know I can override the A styles by specifically setting inline styles, but that would be a lot to override. Is there a way to make that A element discard what is defined for A and have every style at its default?
I'm afraid you can't...
Have you thought about javaScript? You could create a snippet that works like this:
function resetCss(element) {
element.style.color = '#000000';
element.style.textDecoration = 'none';
// ...
}
function reset() {
var elements = document.getElementsByTagName('*');
for (element in elements) {
if (element.className == 'reset') {
resetCss(element); // This function is called on every tag with the reset class.
}
}
}
Call reset() when the DOM is ready and give the class reset to all your to-be-reset elements. Example: Link.
No it's not possible I'm afraid (with standard CSS anyway, maybe with a precompiled like LESS). The "normal way" here is to add an identifier to and make a #mylist a { }. You would then have to change each attribute you don't like.
Of course the best thing would be to start over and make the CSS less of a living hell :)
There is one possibility that you can try. It way can rewrite (overload) styles every that you need. Use strict selecting via ">" selector in styles from you body element to you target 'a' (It's important write strict rules from body, but in several case don't need). And place this overloads style after all - rule for overloads styles - should be placed after all or last included. I use this method every day and with bootstrap, select2, foundation, and other libs, i just overwrite styles.
Example (Just consider that you html example placed in "body" and "header" elements):
body > header > .nav.navbar-nav.navbar-right > a { /* You styles that overload all previous for this element */}
When a page with theme is rendered, the stylesheets link tags in the given theme are rendered right before the closing head tag. Does anyone know of a way to change that? Is there a way that I could have those tags be placed right after the opening head tag?
I know it can be down with jquery by just selecting all the link tags and placing it right after the opening head tag, but is there a way to set it on the server end?
Clarification
Let us say I have a single css file (themed.css) in my theme. In that css file, I have a single style definition for a div tag with an id of test:
#test {background-color:red; color:white;}
Let us also say I have a second css file (standard.css) that is NOT in my theme, but it has another definition of the div tag with an id of test:
#test {background-color:yellow;}
I have my page to use the theme, and I have a handwritten link tag to use standard.css. When the page is executed, the link tag for standard.css is before themed.css. When that happens my div tag with id of test has a red background and white forecolor. If I want the themed.css to apply and then standard.css to overwrite the necessary properties (yellow background with white forecolor), I would want themed.css and THEN standard.css. I can't do that because ASP.NET places the theme files right before the closing head tag.
I don't want to have to know that my theme's css files are the nth link tag in my head tag and then manual change any index whenever i may add a new css file outside of my theme.
Thanks!
I did a little checking in Reflector, and found something you may find interesting. The framework calls the SetStyleSheet method of a PageTheme-derived object to inject link controls in the header. This code snippet shows the relevant logic:
int num = 0;
foreach (string str in this.LinkedStyleSheets)
{
HtmlLink child = new HtmlLink { Href = str };
child.Attributes["type"] = "text/css";
child.Attributes["rel"] = "stylesheet";
if (this._styleSheetTheme)
this.Page.Header.Controls.AddAt(num++, child);
else
this.Page.Header.Controls.Add(child);
}
Translation? StyleSheetThemes inject the style sheets at the beginning of the header tag, and Themes inject the style sheets at the end.
This is consistent with the intended difference between themes and stylesheet themes; that is, that a theme always wins when there is a conflict between the skin and the control settings. Sure, a style in a non-themed .CSS file using the !important attribute could still override a theme style, but the positioning of the CSS files within the head tag strategically facilitates override-ability stylesheet themes.
Note that you can have both a stylesheet theme and a regular theme. Naturally, leave to the stylesheet theme things you design to be override-able, and to the theme things that should not be overridden.
One final observation is that the method is internal and non-virtual, so interfering with these two options would take some kung-fu-MMA-mad-reflection skills, and is probably not in the best interest of stability or maintainability.
As soon as your head element has runat="server" you can rearrange the collection in Page_PreRender:
protected void Page_PreRender(object sender, EventArgs e)
{
ControlCollection container = this.Page.Header.Controls;
foreach (var control in container.OfType<System.Web.UI.HtmlControls.HtmlLink>().ToArray())
{
container.Remove(control);
container.AddAt(0, control);
}
}
I use CMS for client and client doesn't know CSS he use WYSIWYG editor to put content in pages. Client adds Paragraphs, images, images in paragraph (left or right floated), ordered and unordered list, Tables. Problems comes when he want to add images in paragraph (left or right floated). and without adding css class it's not possible. And i don't want to add <div> in content because WYSIWYG editor can't manage div and client works in WYSIWYG mode.
How to style content of pages without using css class?
You will need your user to add a CSS class/style attribute to the image somehow - without adding something to the image to tell it to float right or left it won't float right or left.
If your question is how the client can add the class without having to manually edit the HTML I reckon the only way is to dive into the WYSIWYG editor's javascript and write something a bit like this towards the end of the image-adding process:
var alignment = prompt("Type l to align the picture to the left, and r to align the picture to the right","l").strToLower();
if(alignment == 'r')
{
//line of code to add class "right" to the image tag
} else {
//line of code to add class "left" to the image tag
}
What the code to add the classes should depend on how the WYSIWYG editor works
You can try using element selectors or ID selectors to add styles to HTML elements without referencing CSS class in them.
Element selector would add border to all images on the page:
img { border:1px; }
ID selector would do the same only to image with ID 'image1':
img #image1 { border:1px; }
Still you will need to reference the stylesheet from your page.
There are lots of different ways you can make CSS Selectors that don't require CSS classes. For example, to make a rule that applies to all img tags inside p tags, you could write this:
p img { float: left; }
But how are you hoping to determine which images need to be right-aligned and which images need to be left aligned? Does that data exist in the document in any machine readable format?
A WYSWYG should have "align" property for an image (at least those I have seen). You can then use CSS attribute selector img [align=left] { float:left; } or img [align=right] {float:right;} This wont work on IE 6,7 though, you can use JavaScript to mimic this for those browsers.