Help with CSS / Theme / Skin for beautifying the page


I have these 2 ASP.NET MasterPage.Master and Home.aspx  pages for Demo website and I want help in making it look pretty. I need help with CSS / Theme / Skin and want kind of outlook theme. Pages need to have curved corners and I should be able to reuse the CSS / Theme / Skin file when I add other pages.


MasterPage.Master

<%@ Master Language="C#" AutoEventWireup="true" Inherits="MasterPage" Codebehind="MasterPage.master.cs" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2009.3.1314.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
    Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register TagPrefix="ud" TagName="Notes" Src="Controls/NotesControl.ascx" %>
<!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>Master Page</title>
     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
   </head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
	   <tr>
		<td id="GlobalTitleAreaImage" class="ms-titleimagearea"><img id="ctl00_onetidHeadbnnr0" src="Images/MLogo.JPG" alt="" style="border-width:0px;" /></td>
		<td></td>
		<td class="ms-sitetitle" width="100%">
		  <h1 class="ms-sitetitle">
		   <a id="ctl00_PlaceHolderSiteName_onetidProjectPropertyTitle" href="/tso/">
			 Demo Tool
		   </a>
		  </h1>
		</td>
		</tr>
		<tr><td colspan="3"></td></tr>
	</table>	

    </div>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            <div>
                <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Outlook">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Home" NavigateUrl="Home.aspx">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Open DLT" NavigateUrl="Testing.aspx?DLTPgStatus=Open">
                          </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="New DLT" NavigateUrl="Testing.aspx?DLTPgStatus=New">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text=" View SCR" NavigateUrl="Testing.aspx?DLTPgStatus=Edit">
                        </telerik:RadMenuItem>
                         <telerik:RadMenuItem runat="server" Text="View History" NavigateUrl="Testing.aspx?DLTPgStatus=New">
                        </telerik:RadMenuItem>
                         <telerik:RadMenuItem runat="server" Text="Change Project" checkonclick = "True">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" Text="Help">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenu>
            </div>
        </asp:ContentPlaceHolder>
    </div>
    <br />
    <br />
    <div>
        <asp:ContentPlaceHolder ID="ContentBody" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>



Home.aspx

<%@ Page Language="C#" AutoEventWireup="true" Inherits="Home" MasterPageFile="~/MasterPage.master"
    CodeBehind="Home.aspx.cs" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2009.3.1314.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
    Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="ContentBody">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    </asp:UpdatePanel>
    <br />
    <br />
    <div>
        <table>
            <tr style="font-family: 'Times New Roman', Times, serif; font-size: medium; color: Black;">
                <td>
                    In Progress
                </td>
            </tr>
            <tr style="border-style: ridge; width: 100%; font-family: 'Times New Roman', Times, serif;
                font-size: medium; color: Black; line-height: inherit; background-color: #E0E5F5;
                text-align: center; display: table;">
                <th>
                    Name
                </th>
                <th>
                    Description
                </th>
                <th>
                    School Name
                </th>
                <th>
                    Page Type
                </th>
                <th>
                    Page Number
                </th>
                <th>
                    Change Number
                </th>
                <th>
                    Checked Out
                </th>
            </tr>
            <tr style="width: 100%; font-family: 'Times New Roman', Times, serif; font-size: medium;
                color: black; text-decoration: underline; background-color: #6699FF;">
                <td>
                    <asp:Label runat="server" Text="Full Name" ID="Label1"></asp:Label>
                </td>
                <td>
                    <asp:Label runat="server" Text="Description" ID="Label2"></asp:Label>
                </td>
                <td>
                    <asp:Label runat="server" Text="School Name" ID="Label3"></asp:Label>
                </td>
                <td>
                    <asp:Label runat="server" Text="Record Layout" ID="Label4"></asp:Label>
                </td>
                <td>
                    <asp:Label runat="server" Text="07" ID="Label5"></asp:Label>
                </td>
                <td>
                    <asp:Label runat="server" Text="-1" ID="Label6"></asp:Label>
                </td>
                <td>
                    <asp:CheckBox runat="server" ID="checkout"></asp:CheckBox>
                </td>
            </tr>
        </table>
    </div>
    <div>
        <asp:Button ID="btnReadOnly" runat="server" Text="ReadOnly" OnClick="btnReadOnly_Click" />
        <asp:Button ID="btnDesigner" runat="server" Text="Designer" OnClick="btnDesigner_Click" />
        <asp:Button ID="btnAdmin" runat="server" Text="Administrator" OnClick="btnAdmin_Click" />
    </div>
</asp:Content>

Open in new window

LVL 1
nsdlsandyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nsdlsandyAuthor Commented:
just wanted to add. .. I am using Telerik RadMenu controls on the page.
0
HicanCommented:
For curved round corners you need to use the border-radius property. Note to you: this only works in CSS3.0 (and later, though 3.0 is the latest up till now). Check this W3 website for explanation: border-radius explanation

To be able to reuse your style, make sure to give all your div / elements the class property. Do this instead or next to the ID property. Classes are reusable, ID's are not.
0
nsdlsandyAuthor Commented:
I tried using border-radius file initially with CSS file directly and then with MS Expression but I did not see border-radius property. Do you know how I can check what CSS version I am using. I am using Visual Studio 2008. Does it mean I am using CSS 3.0 ??  
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

PJBXCommented:
Have you look at the themes and CSS at the CSS Zen Garden site You can review the link below and then pick and choose your CSS:

http://www.mezzoblue.com/zengarden/alldesigns/
0
HicanCommented:
This link could help to check in which version of CSS you are working. If you are not sure which version you use or how to get the border-radius property to work, you could always choose to use small rounded border images to create the nice effect. This 'technique' could also be re-used. Check this link for small tutorial: http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm and this is a good site as well: http://24ways.org/2006/rounded-corner-boxes-the-css3-way
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
nsdlsandyAuthor Commented:
I was looking for a CSS file which I could attach to my page
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.