Live Chat Icon For mobile
Live Chat Icon

ASP.NET FAQ - CSS Styles and Themes

Find answers for the most frequently asked questions
Expand All Collapse All

Apply Skin Styles to webcontrols(Textbox,button)


private Style CreateStyle(Color backClr, Color foreClr, int borderWidth, string fntName, int fntSize, bool fntBold, bool fntItalic /*Youcanaddmoreparameters to the method */)
{
	Style s = new Style();
	s.BackColor = backClr;
	s.ForeColor = foreClr;
	s.BorderWidth = borderWidth;
	s.Font.Name = fntName;
	s.Font.Size = fntSize;
	s.Font.Bold = fntBold;
	s.Font.Italic = fntItalic;
	return s;
} 

// This method applies a Style object to a WebControl
private void SetControlStyle(System.Web.UI.WebControls.WebControl ctrl,Style s)
{
	ctrl.ApplyStyle(s);
}

private void Button1_Click(object sender, System.EventArgs e)
{
	Style st = CreateStyle(Color.Green, Color.Yellow, 3,'Verdana', 10, true, true); 
	SetControlStyle(TextBox1, st);
	st = CreateStyle(Color.Red, Color.Black, 2,'Verdana', 12, true, true);
	SetControlStyle(Button1, st); 
}
Permalink

Pseudo-classes are fictional element types that do not exist in HTML. For eg : by creating fictional types of the A element individual style can be applied to each class The three fictional element types are: A as unvisited link, A as active link and A as visited link. Pseudo-classes can be created by a colon followed by pseudo-class’s name as:


A:link {background: cyan; color: blue}
A:active {background: transparent; color:black}
A:visited {background: cyan; color: red}
Click Here
Permalink

Pseudo-elements are fictional elements that do not exist in HTML. They address the element’s sub-part. There are 2 types of pseudo-elements as “first-line pseudo-element’ and ’first-letter pseudo-element’. Pseudo-element is created by a colon followed by pseudo-element’s name,e.g:


P:first-line
H1:first-letter

and can be combined with normal classes;

e.g:


P.initial:first-line

The first line of this paragraph will be displayed in uppercase letters
Permalink

The styles can be changed for the onmouseover and onmouseout events for the TD tags as shown below.

Td.mouseout
{
    background-color: #FAEBD7; 
    BORDER-RIGHT: maroon thick double;
    BORDER-TOP: maroon thick double; 
    BORDER-LEFT: maroon thick double;
    BORDER-BOTTOM: maroon thick double;
    MARGIN: 1px; 
    color: #FFFFFF;
}
 
Td.mouseover
{ 
    background-color: #FFFFFF; 
    color: #000000; 
}
 
 
<table width="100%">
    <tr>
        <td  class="mouseover" onmouseover="className=’mouseout’;" onmouseout="className=’mouseover’;">
             Styles applied for onmouseover & onmouseout
        </td>
    </tr>
</table>
Permalink

The .Net framework recognizes the capabilities of the latest version of the above browsers poorly. This is because, by default, the BrowserCaps section of the machine.config file (usually found under a folder like ‘C:\WINDOWS\Microsoft.NET\Framework\v1.1.4322\CONFIG’) declares the capabilities of the Mozilla based browser poorly. So, you will have to replace the default entry in your install with this one: Mozilla BrowserCaps.

In case the above link didn’t work, this is the content from the above link, captured as of (4/10/2005):


<browserCaps>


		<!-- 
		Name:		BrowserCaps update for modern browsers, http://slingfive.com/pages/code/browserCaps/
		Author:	Rob Eberhardt, http://slingfive.com/
		History:
			2004-11-19	improved detection of Safari, Konqueror & Mozilla variants, added Opera detection
			2003-12-21	updated TagWriter info
			2003-12-03	first published
		-->

			<!-- GECKO Based Browsers (Netscape 6+, Mozilla/Firefox, ...) //-->
			<case match='^Mozilla/5\.0 \([^)]*\) (Gecko/[-\d]+)(?’VendorProductToken’ (?’type’[^/\d]*)([\d]*)/(?’version’(?’major’\d+)(?’minor’\.\d+)(?’letters’\w*)))?'>
				browser=Gecko
				<filter>
					<case match='(Gecko/[-\d]+)(?’VendorProductToken’ (?’type’[^/\d]*)([\d]*)/(?’version’(?’major’\d+)(?’minor’\.\d+)(?’letters’\w*)))'>
						type=${type}
					</case>
					<case> 
						type=Mozilla
					</case>
				</filter>
				frames=true
				tables=true
				cookies=true
				javascript=true
				javaapplets=true
				ecmascriptversion=1.5
				w3cdomversion=1.0
				css1=true
				css2=true
				xml=true
				tagwriter=System.Web.UI.HtmlTextWriter
				<case match='rv:(?’version’(?’major’\d+)(?’minor’\.\d+)(?’letters’\w*))'>
					version=${version}
					majorversion=0${major}
					minorversion=0${minor}
					<case match='^b' with='${letters}'>
						beta=true
					</case>
				</case>
			</case>

			<!-- AppleWebKit Based Browsers (Safari...) //-->
			<case match='AppleWebKit/(?’version’(?’major’\d?)(?’minor’\d{2})(?’letters’\w*)?)'>
				browser=AppleWebKit
				version=${version}
				majorversion=0${major}
				minorversion=0.${minor}
				frames=true
				tables=true
				cookies=true
				javascript=true
				javaapplets=true
				ecmascriptversion=1.5
				w3cdomversion=1.0
				css1=true
				css2=true
				xml=true
				tagwriter=System.Web.UI.HtmlTextWriter
				<case match='AppleWebKit/(?’version’(?’major’\d)(?’minor’\d+)(?’letters’\w*))(.* )?(?’type’[^/\d]*)/.*( |$)'>
					type=${type}
				</case>
			</case>

			<!-- Konqueror //-->
			<case match='.+[K|k]onqueror/(?’version’(?’major’\d+)(?’minor’(\.[\d])*)(?’letters’[^;]*));\s+(?’platform’[^;\)]*)(;|\))'>
				browser=Konqueror
				version=${version}
				majorversion=0${major}
				minorversion=0${minor}
				platform=${platform}
				type=Konqueror
				frames=true
				tables=true
				cookies=true
				javascript=true
				javaapplets=true
				ecmascriptversion=1.5
				w3cdomversion=1.0
				css1=true
				css2=true
				xml=true
				tagwriter=System.Web.UI.HtmlTextWriter
			</case>

			<!-- Opera //-->
			<case match='Opera[ /](?’version’(?’major’\d+)(?’minor’\.(?’minorint’\d+))(?’letters’\w*))'>
				<filter match='[7-9]' with='${major}'>
					tagwriter=System.Web.UI.HtmlTextWriter
				</filter>
				<filter>
					<case match='7' with='${major}'>
						<filter>
							<case match='[5-9]' with='${minorint}'>
								ecmascriptversion=1.5
							</case>
							<case>
								ecmascriptversion=1.4
							</case>
						</filter>
					</case>
					<case match='[8-9]' with='${major}'>
						ecmascriptversion=1.5
					</case>
				</filter>
			</case>


		</browserCaps>
Permalink

Share with

Couldn't find the FAQs you're looking for?

Please submit your question and answer.