[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 995
  • Last Modified:

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

0
nsdlsandy
Asked:
nsdlsandy
  • 3
  • 2
3 Solutions
 
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 new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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
 
nsdlsandyAuthor Commented:
I was looking for a CSS file which I could attach to my page
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now