ASP.NET Theme stylesheet rendering - asp.net

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);
}
}

Related

CSS not overriding unless I use inspect tool

I'm getting a little confused by a CSS question I've got on a WP site I'm working on.
There's a theme installed which always includes a header class on each new page (.title-banner) and I want to hide this on this one specific page. I don't have access to the stylesheets so I just wanted to use CSS to hide the element on this one page, using display: none;, however it won't work if I put it within a tag directly on my page. If I apply the CSS in the inspect tool, it does however work.
Is there a way I can get this to register by using on-page CSS rather than within the stylesheet, as this isn't an option? I know display: none; and !important isn't ideal but I don't know any other way to achieve this.
You need to be more specific to override existing CSS.
You can add this to your theme, or by going to "Appearance > Customize > Additional CSS" from your wp-admin.
Replace the Page ID with the page ID of your page... You can find it by looking at the admin page ID, or inspecting the <body> tag. Wordpress puts the page-id-xxx class in the body of every page, allowing you to override specific CSS on a page by page basis.
/* Replace Page ID with your page id */
.page-id-336 .title-banner {
display: none;
}
Use this;
<script>
window.addEventListener("load", function(){
document.getElementsByClassName('class_of_your_element').style.display = 'none !important';
});
</script>
You should try Javascript. I think your CSS styles are getting overridden by some default ones.
Use this;
<script>
document.querySelector('.title-banner').style.display = 'none';
</script>

Printing a page with inline styles

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?

GWT - Changing CSS hover property

I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.

table, td style in new theme messes up the Google custom Results, How to Fix?

Today I changed the wordpress theme of my blog but the table, td style in the theme style file is messing up the whole Google custom results. I know one solution is to remove all those styles from the file and let Google use its own style. But I also want to keep those for the tables which I occasionally use in my posts.
Can anyone help me how to keep the existing table, td style of my theme while forcing the Google custom search engine to ignore these classes and load its own??
for example you set TD class like this
.td_class { background-color:red}
you can add the class name to your table and set td_class as child class
.table_class {}
.table_class .td_class {background:red}
EDIT
if you don't want to change each tables classes , you can do it on-the-fly with jQuery Selectors
for example your code is like this :
<html>
<div id="MainDiv">
<table>......</table>
<table>......</table>
<table>......</table>
</div>
//goole code here // separated from MainDiv
</html>
you can use this code to change table's class
$(#MainDiv table).each(function(){
$(this).addClass('addClass')
});

Independent CSS for Fancybox

I have a page from which I call fancybox which contains some html template (something like an email template). The problem is that all CSS from the main page affects the content in the fancybox and vice versa. What I would like is to isolate them somehow, so that their CSSs don't affect each other.
Example: I have background image set for h3 for the main page. Also, in fancybox I have h3 element which has no CSS assigned to it, but it pulls the style from the main page and gets the same background image (which shouldn't happen).
Is this somehow possible?
You could split your CSS into multiple files, only pulling in what you need to for each html. If you aren't able to do that you can give the body a specific #id for your template that gets loaded into the fancybox.
<body id="fancy_content">
and then adapt your styles for that template
body#fancy_content h3 {
color: green;
}
You may still end up with a bit of style clash if you leave it in one file but this will give you a method to go on to get it working.
You have 3 options really.
Run the fancybox content in iframe mode which means the content will have to be on it's own page without the main stylesheet. You can do any styling you like here or none at all.
Reset styles in the fancybox content, though this may be quite tedious depending on the number of elements affected.
Place the fancybox content outside the main #wrapper div of your page, and make all page styles inherit from #wrapper. i.e. instead of h3 {...} use #wrapper h3 {...}
try adding IDs to your html elements then use CSS IDs
h3#idname { color: #FF0000; }

Resources