Trying to CSS it, I can CSS the cells, and the days of the week, and I think the top part that says the month, but the area around the month is silver, and no attempt at cssing it will change it - I tried all the different Css properties (I think) but it always ends up being silver. It appears in the designer as silver too. I can't find a way to change this...ideas?
Just add this in the ASPX of your control:
TitleStyle-BackColor="Transparent"
That should solve the problem.
Unfortunately, this style is actually hard-coded into the Render method of the original ASP.NET Calendar object. You can use Reflector to see this. Yes, it's ridiculous. Use an alternative calendar object, or sublclass the calendar and fix the Render method. Not sure if this is fixed in 3.5...
The rendered HTML for the calendar control will probably contain an inline style definition by default e.g style="background-color: silver;", which will take precedence over CSS declarations unless they have the !important flag.
You could change this in the markup for the calendar control as a quick fix
<asp:Calendar id="cal1" runat="server">
<TitleStyle CssClass="classname" />
</asp:Calendar>
Try using IE Developer toolbar/Firebug + Firefox, and hover over the item that you want to change the color of. See if writing CSS for that items works.
can do what i did which is add a first child in your css. The calendar is still an HTML table. the first row how ever is not the header.
.calendar tr:first-child
{
background-color:lime;
}
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.
My site is in asp.net 4 / vb. I'm trying to figure out the best way to make a printer-friendly page that only includes our logo at the top and pertinent information, but omits things like navigational bars and other things that aren't necessary. I have a click-to-print icon and it works fine in all browsers, but it doesn't always print out printer-friendly.
I've read things on this site about making a print.css stylesheet, but I'm unsure as to how I'd code the stylesheet, or if I have to assign div attributes to things I want omitted -- and the posts were older posts. Is it recommended that I omit the navigational links, etc., and if so, what is the best way to go about doing this? Thank you for your help!
You can use CSS #media types.
<p> this should be part of the printed page </p>
<div id="navigation_bar_that_should_not_be printed" class="noprint">.....</div>
A simplistic style sheet for the above would be:
#media screen
{
/* whatever styles you have for display */
}
#media print
{
.noprint { display: none; }
}
In the above, the <div> with the class="noprint" will be displayed on screen as usual, but it will not be printed.
Update:
The "C" in CSS stands for "cascading" - meaning the "last" or closest instruction wins. I can only assume that the <span class="bodycontent"... (being the last or closest) is overriding the div.
ASP.Net Controls have a CssClass property, that's how you'd define it:
<asp:HyperLink NavigateUrl="http://www.google.com" runat="server" CssClass="noprint" Text="foo" />
You can even directly type class="noprint" (instead of using CssClass) in any ASP.Net tag - VS may complain but it should be ok:
<asp:HyperLink NavigateUrl="http://www.google.com" runat="server" class="noprint" Text="foo" />
You don't need to actually add additional elements to wrap stuff that you don't want to show when printing. The best way to do a print stylesheet is to apply a class (maybe call it print_hide) on elements you want to hide when your page is printed. For example:
<div>Text</div>
<img class='print_hide' src='some_huge_image.png'/>
In your print.css stylesheet, you would do:
.print_hide {
display: none;
}
To apply the stylesheet, add this to your head:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
The div would still print, but the image would not.
This is, of course, in addition to whatever other style changes you want, like removing background images, changing colors, fonts, etc.
Adding that class to stuff to hide at print is a relatively minimal change to existing code.
The other option is to create a separate printer friendly version of all of your pages, and if your pages are really complicated, this might be the way to do it. That being said, the benefit of print.css (in addition to being less work) is that users don't need to explicitly select Printer friendly version, of course.
I have a Skin File that contains:
< asp:TextBox runat="server" CssClass="FixedFont"/>
In the same folder as the Skin file, is the following css file. The Css file contains:
.FixedFont
{
font-family:Courier;
}
Lastly, I have an ASPX page which contains the following control:
<asp:TextBox ID="TextBox1" runat="server">Test</asp:TextBox>
When I view the ASPX page in design mode or run the page, I see that the font-family attribute on the style does effect the textbox control, namely, it is changed to Courier.
However, what I would also like to do is to define a local style on my ASPX page,
.DefaultWidth
{
width: 300px;
}
...and have all of my TextBoxes so that they are the same width.
If I set the CssClass property of TextBox1 to "DefaultWidth"...
<asp:textbox ID="TextBox1" CssClass="DefaultWidth">Hello</asp:TextBox>
...the width of the textbox is changed to 300px but I lose the effect of the skin appling the fix font Courier style.
To get BOTH effects to be applied, the DefaultWidth and the fixed font textbox effect, I have to set the CSSClass property to "DefaultWidth FixedFont", which to me, seems like it defeats the advantage of having the skin in the first place. I guess I expected the effect to be CUMULATIVE, unless I added a style that conflicted with the SKIN, in which case, I expected the local class to be applied over the skin's effect. For example, If I applied a second class, Class2, that also included a font-family specification in addition to other effects, I would expect the font specified in Class2 to override that in the FixedFont style. But that doesn't appear to be what is going on here.
What is the best way to manage such a situation? I imagine very often wanting to have a series of textboxes that all match in width, so I imagine that I will very often want to specify a CssClass on a control in addition to using the effects applied to the control in type in the skin file.
Is the solution NOT to use CSS in the SKIN itself? This seem like it has disadvantages, too, on the side of maintenance.
A secondary problem that I am having is that if I declare a stylesheet with the following class..
.Button
{
background-image: url('/images/button.gif')
}
...and set the CSSClass property of an ASP Button to "Button", I see the image tiled over the button.
However, if I enter the following code in the skin file
it does not find the image.
The images folder is a first-levl folder off of the root of the website.
Any idea why it is not picking up the image. I;'ve tried various other paths, but that is the only one that seems to make sense to me.
By the way, the image is applied in design mode, but it disappears when ity is run.
I don't know if I understood your question but as I'm seeing from here, what you should have to declare this in your "local" style:
textbox.fixedfont { width:200px; }
or simply to every textbox if you are sure about affecting every textbox with the same width, doesn't matter the skin...
textbox { width:200px; }
If this not what you were asking for, please be clearer.
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.
Want to edit things like DIV size, color, positioning (absolute), height/width etc.
You can just output the CSS like any other with Response.Write or the <%= someValue %> methods.
Here are some of the other methods:
http://cfouquet.blogspot.com/2006/06/making-dynamic-css-content-with-aspnet.html
If by "on the fly" you mean while the user is interacting with the page then you're going to need to use some javascript. I suggest learning jQuery as it provides an easy and effective way interact with the DOM.
Ryan, you may want to look into Themes if you want to change the appearance of your site based on user preferences (Learning about Skins can help as well but master themes first). This is really the right approach in the ASP.NET model unless you are looking just to adapt some specific output to certain data conditions.
I'm not sure of what you're trying to do with the information given, but to add css on the fly you can use jQuery to add the class to an element with those certain specifications.. you can have jquery wait in the background for something to happen on the client and just add the class with that certain style
Example:
<style>
p { margin: 8px; font-size:16px; }
.color { color:blue; }
</style>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("p:last").addClass("color");
});
</script>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>