stylesheet with masterpage

Discussion in 'ASP .Net' started by Keith G Hicks, Feb 28, 2008.

  1. 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
     
    Keith G Hicks, Feb 28, 2008
    #1
    1. Advertising

  2. 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:eek:utset;
    }

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

    Keith
     
    Keith G Hicks, Feb 28, 2008
    #2
    1. Advertising

  3. 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 G Hicks" <> wrote in message
    news:...
    > 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:eek:utset;
    > }
    >
    > That's ok now I guess but I'll still need my other quesitons answered.
    >
    > Keith
    >
    >
     
    Keith G Hicks, Feb 28, 2008
    #3
  4. 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:eek:utset 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" wrote:

    > 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 G Hicks" <> wrote in message
    > news:...
    > > 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:eek:utset;
    > > }
    > >
    > > That's ok now I guess but I'll still need my other quesitons answered.
    > >
    > > Keith
    > >
    > >

    >
    >
    >
     
    Paulus E Kurniawan, Feb 28, 2008
    #4
  5. 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.



    "Keith G Hicks" <> wrote in message
    news:Oh#...
    > 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 G Hicks" <> wrote in message
    > news:...
    > > 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:eek:utset;
    > > }
    > >
    > > That's ok now I guess but I'll still need my other quesitons answered.
    > >
    > > Keith
    > >
    > >

    >
    >
     
    Keith G Hicks, Feb 28, 2008
    #5
  6. 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" <> wrote in message
    news:...
    > 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:eek:utset 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" wrote:
    >
    > > 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 G Hicks" <> wrote in message
    > > news:...
    > > > 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:eek:utset;
    > > > }
    > > >
    > > > That's ok now I guess but I'll still need my other quesitons answered.
    > > >
    > > > Keith
    > > >
    > > >

    > >
    > >
    > >
     
    Keith G Hicks, Feb 28, 2008
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?QWxleCBNYWdoZW4=?=

    MasterPage -> Page -> MasterPage Code Access

    =?Utf-8?B?QWxleCBNYWdoZW4=?=, Apr 10, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    7,951
    Steven Cheng[MSFT]
    Apr 14, 2006
  2. ThunderMusic
    Replies:
    2
    Views:
    476
    Gregory Gadow
    Sep 27, 2006
  3. Randy Smith
    Replies:
    9
    Views:
    468
    Mark Rae
    Apr 14, 2007
  4. mr t
    Replies:
    0
    Views:
    443
  5. Torben Laursen
    Replies:
    4
    Views:
    603
    clintonG
    Mar 15, 2008
Loading...

Share This Page