I have a situation where my H3 tags are styled in an external CSS file, but the color attribute is going to dynamically change based on a database value. I would like to inject some CSS into my master page from code-behind to set the color of the H3 tag globally instead of having to specify it on each tag.
How can I do this? Thanks!
try the !important css attribute
I didn't realize I could put controls in the style section. Here's how I resolved the problem:
<style>
h3
{
color:<asp:Literal runat="server" id="ColorLiteral" />;
}
</style>
Now I set the literal from code-behind and it works great.
Related
I have a Sharepoint 2010 intranet and I am designing the current template with my own css file. I have added my custom css file to the style library and have added this piece of code in a masterpage at the end in my tag:
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>" runat="server"/>
Now I always need to add the !important tag in my css classess which are also used in the default sharepoint css file. I dont want to have to do that every time. Is there some solution where I can override my own custom css over the default sharepoint css file?
After your page is rendered by SharePoint in the browser, view the source. It is likely that your CSS page is listed before out of the box style sheets like corev4.css.
To rearrange this ordering try:
<SharePoint:CssRegistration
name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>"
after="corev4.css"
runat="server"/>
For more information on the After property, see:
CssRegistration.After Property
SharePoint CSSRegistration or Link?
What is new with the CssRegistration control in SharePoint 2010
This sounds like a CSS specificity problem. This article has lots of helpful explanations of the subject.
If you have written the same rule into your external style sheet
twice, than the lower rule in your style sheet is closer to the
element to be styled, it is deemed to be more specific and therefore
will be applied.
e.g. In the following case, the padding would be set as 10px, not 5px.
#content h1 {
padding: 5px;
}
#content h1 {
padding: 10px;
}
To fix your current problem, either as Dipaks suggested add your css directly in the page (as this would take preference over external css files), or even better, and more simply, just add the reference to your css file after the reference to the Sharepoint css, in which case, if they have equal specificity, your css would be applied.
I have a simple website with a master-page. To set properties to elements on a content page (such as Textbox) I use CSS. In designer it works well but when I launch a site a style isn't apllied to controls. The reason is simple. To say, I have a TextBox with id="TextBox1" in content page, it is placed in ContentPlaceHolder1. In CSS file I set properties for object with id #TextBox1. When I launch a site due to master page name mangling it gets an id like ctl00_ContentPlaceHolder1_TextBox1 which is not defined in CSS file included in masterpage.
What is a correct solution of this problem? Hardcoding mangled name doesn't seem to be good.
Use CssClass on the controls, like this: CssClass="myClass", then in your stylesheet instead of this:
#TextBox1 { /* styles */ }
You'd have this:
.myClass { /* styles */ }
It's worth noting that .Net 4 fixes, or allows you to better manage the ID generated in the html, see here for details.
As Nick and SLaks have both said classes are best. You can assign multiple classes in the class property and it will aggregate all the properties from all the classes specified overwrite any of the properties that it shares with earlier classes. The order of the classes definition in the css file sets the order that they get applied.
<style type="text/css">
.genericTextBox
{
background-color: #eee;
color: black;
}
.textbox1
{
background-color: #3ee;
font-size: larger;
}
</style>
<asp:TextBox id="textBox1" CssClass="textbox1 genericTextBox" runat="server"></asp:TextBox>
The order the styles get applied is first genericTextBox, because its the first defined in the style (essentially the order in class gets ignored). It sets the color and the background-color, then the style textbox1 gets applied and it overwrites the background-color and adds font-size to. So in the end you end with the color from generictextbox, the background-color and font-size from textbox1.
EDIT: on the TextBox changed class to CssClass
The simplest solution is to apply your CSS rules using classnames (Which don't get mangled) instead of IDs.
The correct solution is to use the ClientID property, which returns the mangled ID.
For example:
.Something #<%=TextBox1.ClientID %>` {
color: red;
}
However, you can only do that for inline stylesheets.
I’ve noticed that on aspx page IntelliSense doesn’t display the Style property of a web control, even thought the control does have a Style property. Does that mean we shouldn’t declaratively set the Style property:
<asp:TextBox ID="UserName" Style="color:Green; padding:0px; margin:0px;" runat="server"></asp:TextBox>
Style translates to the client-side style property; it's actually a CssStyleCollection collection of styles. It doesn't display the style property directly, but once you type style=" it should start showing you the CSS styles that are available to you.
If you have to set these styles in the same file as your html then it's much better to use an embedded style that targets the ID of your control. The best solution, however, is to reference an external stylesheet (css) that contains your styles.
For example:
<style type="text/css">
#UserName {color:Green; padding:0px; margin:0px;}
</style>
i am using an asp:ImageButton server control; i set the CssClass attribute to my CSS style, in which i defined border:solid 1px red;
.NET automatically renders an inline 'style' attribute as follows:
style="border-width:0px;"
Q1. Can i remove the automatic inline 'style' ? e.g. on the PreRender perhaps inspect the HTML and edit it?
I have tried Attributes.Remove("style") but this does not work (strangely enough does not error either), and i remember reading somewhere i can only remove the attributes that i added manually.
My workaround was to assign BorderWidth=1px property in the aspx page, but what's the point in providing a CssClass property if it's going to be overridden anyway (automatically!) Bug or Feature?
The reason they do this is due to a legacy of HTML where images default to have borders when they have a <a> tag wrapping them. In most situations people don't want these borders which is why ASP.NET does what they do. In order to get around this, you can do the following in your style sheet (assuming you are setting cssclass='redborderbutton'):
.redborderbutton img
{
border:solid 1px red !important;
}
You could use an HTML server control.
<input id="Image1" runat="server" name="ImageButton1" src="images\image.jpg" type="image" />
post render you can remove it with JQuery.
$(document).ready(function() { $("img").removeAttr('style'); }
Replace the "img" with a css style selector -- but keep the quotes.
Actually, I do this a lot in asp.net to "fix" the default rendering of asp.net
ASP is the hackiest set of tags ever. Even if border is "legacy," that can be addressed in CSS.
I have a master page that contains an ASP.NET server side Menu control (System.Web.UI.WebControls.Menu)
I am using the CSSFriendly adapters from here
http://www.asp.net/CSSAdapters/Menu.aspx
and they do make the rendered HTML much cleaner however I am still getting inline styles output into the HEAD element in the HTML like this
<style type="text/css">
.ctl00_SiteHeader1_TabBar1_Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl00_SiteHeader1_TabBar1_Menu1_1 { text-decoration:none; }
.ctl00_SiteHeader1_TabBar1_Menu1_2 { }
.ctl00_LeftColumnContent_LeftHandNavigator1_Menu1_0 { text-decoration:none; }
</style>
</head>
<body>
I thik these styles are being generated by ASP.NET, I don't think I need them as I am using the CSSAdapters so is there any way of stopping them from being generated?
Derek
In .NET Framework 4, ASP.NET menu has a new property, IncludeStyleBlock, that you can set to false to avoid generation of <style> block. However, it still generates a style="float:left" attribute that can only be overridden with a float: none !important in your stylesheet.
The short story is that it isn't easily accomplished. That code is added to the header by the menu during the prerender phase.
A possible workaround might be overriding the menu's onprerender in a custom menu control and don't call base. You could then replace the default menu control with your own using tagMappings.
I'd suggest you stay clear of the menu control if you can.