stylesheet with masterpage

  • Thread starter Thread starter Keith G Hicks
  • Start date Start date
K

Keith G Hicks

asp.net 2.0

I'm new at so much of this. I'd like to apply a very simple css file to some
asp buttons on content pages via the master page. Not sure if that's
possible but I assume it is from what I've read. I just can't figure out
where to put things.

So here's my master page:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb"
Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css"
href="~\App_Themes\KeithTest\AspButtons.css" />
</head>

Here's my AspButtons.css file:

..WhiteButtons
{
BackColor="#FFFBFF"
BorderColor="#CCCCCC"
ForeColor="#284775"
Height="28px"
Font-Size="11pt"
BorderWidth="2px"
BorderStyle="Outset"
}

I thought I would then put "WhiteButtons" in the cssClass of each button on
each content page but that didn't work and it seems like way more work than
is necessary given what I'm gleaning about stylesheets.

So should I change .WhiteButtons to soemthing else in the css file so that
it would automatically apply to all asp:buttons? What do I need to do and
where to put it in the content pages?

Here's one of the buttons on one of the content pages:

<asp:Button ID="btnSubmit" runat="server" Text="Submit for Approval"
OnClick="btnSubmit_Click" Width="175px" />

I need some clear info on this as I'm sort of stumbling around with it rigth
now. Hope someone can clear this up for me! :-)

Thanks,

Keith
 
Ok. I just discovered that my css file is all wrong. It should be:

..WhiteButtons
{
background-color:#FFFBFF;
border-color:#CCCCCC;
color:#284775;
height:28px;
font-size:11px;
border-width:2px;
border-style:outset;
}

That's ok now I guess but I'll still need my other quesitons answered.

Keith
 
So I tried changing .WhiteButtons to just "input" (wihtout the quotes) to
see what would happen and it worked. My asp button is following the css
below. But I ptu some other "input" types of controls on the page and so do
they. I only want my asp:button controls to follow the css below. What do I
need to do to do that?

Keith
 
Keith,

You can use the CSS attribute selector, but this is not supported on IE6 or
earlier:

input[type="submit"]
{
height:28px;
font-size:11pt;
color:#284775;
background-color:#fffbff;
border:outset 2px #ccc;
}

If you are using ASP.NET 2.0 or later, you can create a skin file to apply
the rules to all the buttons by addding this line to your skin file:

<asp:Button runat="server" CssClass="WhiteButtons" />

This way you don't need to assign the CssClass property for every button
control.

Hope this helps.
 
Progress. I changed all my asp:buttons on the content pages so that they are
CssStyle=WhiteButtons and in the IDE they all take on the correct style.
They follow the below. HOwever, when I run the app in my browser, they do
not. They appear as just standard asp buttons (gray, raised, etc.)
So I decided to check browser compatibility. I generally use FireFox. I ran
my URL in IE6 and the buttons are fine. I read on www.w3schools.com " All
major browsers support Cascading Style Sheets." I consider FireFox a major
browser these days. I have loads of clients and collegues that use it. I
tested my css file here
http://jigsaw.w3.org/css-validator/validator.html#validate-by-upload it
seems like it should be fine.
 
Well using themes seems to have solved the FireFox issue. Thanks for the
info on that. And it seems more flexible too.


Paulus E Kurniawan said:
Keith,

You can use the CSS attribute selector, but this is not supported on IE6 or
earlier:

input[type="submit"]
{
height:28px;
font-size:11pt;
color:#284775;
background-color:#fffbff;
border:outset 2px #ccc;
}

If you are using ASP.NET 2.0 or later, you can create a skin file to apply
the rules to all the buttons by addding this line to your skin file:

<asp:Button runat="server" CssClass="WhiteButtons" />

This way you don't need to assign the CssClass property for every button
control.

Hope this helps.

--
Paulus E Kurniawan
http://www.paulusevan.net


Keith G Hicks said:
So I tried changing .WhiteButtons to just "input" (wihtout the quotes) to
see what would happen and it worked. My asp button is following the css
below. But I ptu some other "input" types of controls on the page and so do
they. I only want my asp:button controls to follow the css below. What do I
need to do to do that?

Keith
Click to expand...
Click to expand...
 
Back
Top