Solved

asp.net calendar CSS Title

Posted on 2014-12-10
2
505 Views
Last Modified: 2014-12-16
I have altered my calendar with CSS to make work as I need however,

I am unable to change JUST the font size an such of where it says December 2014. I would like to see if I can make that custom as well as if there is a way to change the next and previous dates to either show image arrows or say "Next Month" I am sure it is my css.

Code for CSS
table {
    width: 580px;
    color: red;
    height: 50px;
    width: 100%;
}



td {
    /*background-color: #f2f2f2;*/
    border: 1px #e2e2e2 solid;
    font-family: Verdana;
    font-weight: bold;
    font-size: 20px;
    font-family: "Times New Roman";
    color: black;
    height: 50px;
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
    border-radius: 2px;
}

th {
    background-color: #f2f2f2;
    border: 1px #e2e2e2 solid;
    font-family: Verdana;
    font-weight: bold;
    color: black;
}

.dayheaderstyle {
    font-weight: bold;
    color: white;
    background: rgb(66,63,234); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(66,63,234,1) 2%, rgba(64,150,238,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(66,63,234,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(66,63,234,1) 2%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(66,63,234,1) 2%,rgba(64,150,238,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(66,63,234,1) 2%,rgba(64,150,238,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(66,63,234,1) 2%,rgba(64,150,238,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#423fea', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}

.titlestyle {
    color: purple;
}

.otherdaysnotinmonth {
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    color: grey;
}


.calendarposition {
    margin-left: auto;
    margin-right: auto;
}

Open in new window


here is my html/asp

<asp:Calendar ID="Calendar1" runat="server" BackColor="Black" BorderColor="Black" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" NextPrevFormat="ShortMonth" OnDayRender="Calendar1_DayRender" Width="716px" BorderStyle="Solid" CellSpacing="1" DayNameFormat="Full" NextMonthText="Next Month" PrevMonthText="Last Month" CssClass="calendarposition">
                                <DayHeaderStyle CssClass="dayheaderstyle" />
                                <DayStyle HorizontalAlign="Left" VerticalAlign="Top" />

                                <OtherMonthDayStyle CssClass="otherdaysnotinmonth" />
                                <SelectedDayStyle BackColor="#E6BE8A" Font-Bold="True" />
                                <SelectorStyle BackColor="#FFCC66" />
                                <TitleStyle CssClass="titlestyle" />
                                <TodayDayStyle BackColor="#FFCC66" ForeColor="red" />

                            </asp:Calendar>

Open in new window


here is it rendered
<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
	Morgan Financial Agent Portal
</title><link href="css/agentlportal.css" rel="stylesheet" /><link href="css/calendar.css" rel="stylesheet" /></head>
<body>
    <form method="post" action="agentview.aspx?xrefid=160488" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="kCQHld43MP8Qqq3HGNxMIoT6TSY80xlpn+t8/uUi3C79hCjSd7wYe+eQqNsYf2t74S8Q5GwE+tF/r0/M4YNHp03PI0yhzeJ2k6MqGaDI7Rf4rbG7ROr3T0N6BFZxiJ2xkQl/zr68h0ng4efUNCL9ya7fgYg70tkpssv857/JFbhsWuMAJFzdWH3+DZ7Oi+kaiYuQShxlShdYBIBL4MQ5emmj2f1vhzEI1UautaIPwMsGd3Hs1Hk1KaCzIRx9QmKBFqLDhEHvXYpbORyizSmw09F4YLzdTm2G8/U23XJ9VYPIbyWfIxXiS5Q3p63LgheYi0+FYRVhr6kH/ROc8pstAh7YkxQ43MZ7Wd+OuPmbcxQ0D3i4eL+WqUngLh2wtkjWJY4tHFDISI8x/fpr3xOccpxlLJq49GXVrfBkRfyVsL0ChrFUvWbcwubLMgh9A0cjXxd/pVvLEYP+S8CY4K7B3S2XFwRyFX586WgnjkIzlCj/nmzq2HGPpK4HNCnbIRxRZ6jxOYs2xTLZxJ5eUXEdPy/L47J0Uea1sO1luErXYF7QKKUOOibkS8wsPLUrwgFmeI9YNgyDOiiSrhgJe6dTQqXB6H3Xvt0QLgo0ho7FTuzSRIoYeIMEL0FIfwj6jbVc" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZFvsGjWifQIlU_FnKzu1Vg38kMI_N_dyBaLC_pVlvNaLbZFpmevNuXgQmlblaSBK6w2&amp;t=635369998285126825" type="text/javascript"></script>


<script src="/ScriptResource.axd?d=x6wALODbMJK5e0eRC_p1LdVlHLzV_Vi-LuAbiGY8MpcV-6zEYPjzC2jhHuyyE1duiCvcU6f_yFJCEMqQ9huKKx3_9vLvCg-Liw2ZmJRgJi4-BbA9gEh5erR5fxYf5byL0&amp;t=ffffffffda74082d" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=P5lTttoqSeZXoYRLQMIScBMLMmpfImQhSyPlOVR72elJrEj559JzNHCldCGJO46uXOzZ2J9F54JiI7EsKiCCNmvzFhzSMUeAgkBrngM3YoWzZRNIBz49fI5eljlxatG00&amp;t=ffffffffda74082d" type="text/javascript"></script>
<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="52CE06AE" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="pbWtsT9q2nN4RtsNr8mExLux/0IH0brRI4yoth1K5c9lZCWiIME7e0PQgo8xCTw+yKSNNkQ1P87Mv4B6lX3ka9N4lliwMBKA8znRzI7JbSmPRjQT9Wv3MebfZ6icZmKp/j+YLvP81zyvJB2gi2FKxpEXTa3x8FK0zOqriCrR75F3Hb9ywFJdCEL/35OZYurbac/rs47EwnjoXF8S8Z88E3aq0EHtSflhyH5OLWRjNBqgQ4Su8zYRrofH4ePWfDutT2yeTDtfKpZAQ3gqv6pXZeaw9S9NoP+KojP7BqLCvLtO4iPS88cbrk185vII51GeWN3Q1iP7BAplqp2oEEJGJprIuFRKUU2Bc2n6/hHzimaCh8XmrpdV4ZrcCaF9/m2KAFkc88ngCoL+OQCvbI+FvMSdLer8sG877JOmG2CHVw5+AyKRWnqKrfYqCFg1364kVk4qJA4D5z1ikd4pDny9OPJNHFpgfzRPmcid+RzVaTcblOSkLfHRbb5AHDzBM8TnRwXzZz4A2dPk9rALE/L9Z6Kc/xpbxgQ6A/dR569JiYJmT6alBY61y2bIV4Qe/kUjD+auNMSGwO/WcI9IkJA/d0GAGoq27RJvDfReBXcsPUW8FILUCmTCdaG83YQyAxUjMJmugLMWGYrz0SqscAb2uxiGs+LFA7QkS10iwVmv6wlyadcXO/USXgpVSuQkQ8LKh31KdIfhlUOrgsP3OOVxgGArmAhri6UGA6i8Ej37SpKhPlfImmqVLwrVRl/tyFisf6953COsyaf3r4bue/qbsyxlSm4pNWEueCJH89RTFg9v6qVYeexXwRZjn2oDFmgVSWhWaWYiwl/r3hjs3U8P3Ip22UeVhn3/tLUWP7o9uDiYFlVUEjz4Jnb+qV7Gkabs0ZSi8zvaFkVYGqMUesmwX5BF5kjcTzV2ghgkpA7TjiVPEY9+p09kAbBYnN1zB/lBGHNCYfppzD0yhFK90b177E4lqjRY2hU4Pes3qDsHe0puI3CqrTqZl47D1udXbtnainu4L7xmYKUuBbMyBaGepGDEKXlcyWIpq3/5Tv5TMjQw7G3y09xxVl2duBiWLB92" />
</div>

        <div id="wrapper">
            <div class="header">
            </div>
            <div id="Panel1" title="Click &quot;LOGOUT&quot; to log off." class="fieldlog" style="background-color:#E4E0E0;">
	
                You are currently logged in as:
                    <span id="LoginName1">gashlin@gmail.com</span>
                &nbsp;<a id="LoginStatus2" href="javascript:__doPostBack(&#39;LoginStatus2$ctl00&#39;,&#39;&#39;)">Logout</a>
            
</div>
            <input type="submit" name="Button1" value="Back To Client List" id="Button1" class="btn" />
            <div class="losquare">
                <div class="tophalf2">
                    <div class="loaninformation1">Borrower Information</div>
                    <div class="loaninformation">
                        <span class="loaninformation"></span>
                        <span class="loaninformation">
                            <span id="Label2">Borrower Name: Corey P Gashlin</span></span>

                        <span class="loaninformation">
                            <span id="Label3">Loan Officer: Yena M Morgan</span></span>


                        <span class="loaninformation">
                            <span id="Label5">Loan Processor: Alyssa Hultgren</span>
                        </span>
                        <span class="loaninformation">
                            <span id="Label4">Loan Type: FHA</span></span>
                        <span class="loaninformation"></span>
                         <span class="loaninformation">
                            <span id="Label1">Loan Status: Loan submitted to Underwriting</span>
                        </span>
                        <span class="loaninformation">
                            
                        </span>
                       
                        <span class="loaninformation">
                            
                        </span>

                    </div>
                </div>
                <hr />
                <div class="tophalf">
                    <div id="Panel2" class="fieldlog1" style="background-color:#E4E0E0;">
	
                        Timeline Calendar for Borrower
                 
                    
</div>
                    <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', ['tUpdatePanel1','UpdatePanel1'], [], [], 90, '');
//]]>
</script>

                    <div id="UpdatePanel1">
	
                            <table id="Calendar1" class="calendarposition" cellspacing="1" cellpadding="2" title="" style="width:716px;height:250px;font-size:9pt;font-family:Verdana;color:Black;border-width:1px;border-style:Solid;border-color:Black;background-color:Black;">
		<tr><td colspan="7" style="background-color:Silver;"><table class="titlestyle" cellspacing="0" style="color:Black;font-family:Verdana;font-size:9pt;width:100%;border-collapse:collapse;">
			<tr><td style="width:15%;"><a href="javascript:__doPostBack('Calendar1','V5418')" style="color:Black" title="Go to the previous month">Nov</a></td><td align="center" style="width:70%;">December 2014</td><td align="right" style="width:15%;"><a href="javascript:__doPostBack('Calendar1','V5479')" style="color:Black" title="Go to the next month">Jan</a></td></tr>
		</table></td></tr><tr><th class="dayheaderstyle" align="center" abbr="Sunday" scope="col">Sunday</th><th class="dayheaderstyle" align="center" abbr="Monday" scope="col">Monday</th><th class="dayheaderstyle" align="center" abbr="Tuesday" scope="col">Tuesday</th><th class="dayheaderstyle" align="center" abbr="Wednesday" scope="col">Wednesday</th><th class="dayheaderstyle" align="center" abbr="Thursday" scope="col">Thursday</th><th class="dayheaderstyle" align="center" abbr="Friday" scope="col">Friday</th><th class="dayheaderstyle" align="center" abbr="Saturday" scope="col">Saturday</th></tr><tr><td class="otherdaysnotinmonth" align="left" valign="top" style="height:100px;width:150px;">30</td><td align="left" valign="top" style="height:100px;width:150px;">1</td><td align="left" valign="top" style="height:100px;width:150px;">2</td><td align="left" valign="top" style="height:100px;width:150px;">3</td><td align="left" valign="top" style="height:100px;width:150px;">4</td><td align="left" valign="top" style="height:100px;width:150px;">5</td><td align="left" valign="top" style="height:100px;width:150px;">6</td></tr><tr><td align="left" valign="top" style="height:100px;width:150px;">7</td><td align="left" valign="top" style="height:100px;width:150px;">8</td><td title="Your Application has been submitted" align="left" valign="top" style="background-color:LightGrey;height:100px;width:150px;">9<span style="display:inline-block;color:Navy;border-color:Transparent;border-style:Solid;font-family:Times New Roman;font-size:10pt;">Application Submitted</span></td><td title="Appraisal is ordered and you will be notified once it is recieved" align="left" valign="top" style="color:Red;background-color:LightGrey;height:100px;width:150px;">10<span style="display:inline-block;color:Navy;border-color:Transparent;border-style:Solid;font-family:Times New Roman;font-size:10pt;">Appraisal Ordered</span></td><td align="left" valign="top" style="height:100px;width:150px;">11</td><td title="Apprisal has been recieved and underwriting is checking over" align="left" valign="top" style="background-color:LightGrey;height:100px;width:150px;">12<span style="display:inline-block;color:Navy;border-color:Transparent;border-style:Solid;font-family:Times New Roman;font-size:10pt;">Appraisal Recieved</span></td><td align="left" valign="top" style="height:100px;width:150px;">13</td></tr><tr><td align="left" valign="top" style="height:100px;width:150px;">14</td><td title="Conditions to meet approval of loan" align="left" valign="top" style="background-color:LightGrey;height:100px;width:150px;">15<span style="display:inline-block;color:Navy;border-color:Transparent;border-style:Solid;font-family:Times New Roman;font-size:10pt;">Conditions Sent</span></td><td align="left" valign="top" style="height:100px;width:150px;">16</td><td title="Conditions from borrower to approve loan." align="left" valign="top" style="background-color:LightGrey;height:100px;width:150px;">17<span style="display:inline-block;color:Navy;border-color:Transparent;border-style:Solid;font-family:Times New Roman;font-size:10pt;">Conditions Recieved</span></td><td title="Borrower must obtain Home owners insurance quote" align="left" valign="top" style="background-color:LightGrey;height:100px;width:150px;">18<span style="display:inline-block;color:Navy;border-color:Transparent;border-style:Solid;font-family:Times New Roman;font-size:10pt;">Home Owners Insurance Requested</span></td><td align="left" valign="top" style="height:100px;width:150px;">19</td><td align="left" valign="top" style="height:100px;width:150px;">20</td></tr><tr><td title="This is the date you close" align="left" valign="top" style="background-color:LightGrey;height:100px;width:150px;">21<span style="display:inline-block;color:Navy;border-color:Transparent;border-style:Solid;font-family:Times New Roman;font-size:10pt;">Closing Date</span></td><td align="left" valign="top" style="height:100px;width:150px;">22</td><td align="left" valign="top" style="height:100px;width:150px;">23</td><td align="left" valign="top" style="height:100px;width:150px;">24</td><td align="left" valign="top" style="height:100px;width:150px;">25</td><td align="left" valign="top" style="height:100px;width:150px;">26</td><td align="left" valign="top" style="height:100px;width:150px;">27</td></tr><tr><td align="left" valign="top" style="height:100px;width:150px;">28</td><td align="left" valign="top" style="height:100px;width:150px;">29</td><td align="left" valign="top" style="height:100px;width:150px;">30</td><td align="left" valign="top" style="height:100px;width:150px;">31</td><td class="otherdaysnotinmonth" align="left" valign="top" style="height:100px;width:150px;">1</td><td class="otherdaysnotinmonth" align="left" valign="top" style="height:100px;width:150px;">2</td><td class="otherdaysnotinmonth" align="left" valign="top" style="height:100px;width:150px;">3</td></tr><tr><td class="otherdaysnotinmonth" align="left" valign="top" style="height:100px;width:150px;">4</td><td class="otherdaysnotinmonth" align="left" valign="top" style="height:100px;width:150px;">5</td><td class="otherdaysnotinmonth" align="left" valign="top" style="height:100px;width:150px;">6</td><td class="otherdaysnotinmonth" align="left" valign="top" style="height:100px;width:150px;">7</td><td class="otherdaysnotinmonth" align="left" valign="top" style="height:100px;width:150px;">8</td><td class="otherdaysnotinmonth" align="left" valign="top" style="height:100px;width:150px;">9</td><td class="otherdaysnotinmonth" align="left" valign="top" style="height:100px;width:150px;">10</td></tr>
	</table>
                            </div>
                        
</div>


                </div>


            </div>
    </form>
</body>
</html>

Open in new window


here is what it looks like now.

Current Look
0
Comment
Question by:desiredforsome
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 10

Accepted Solution

by:
Walter Padrón earned 500 total points
ID: 40492460
How to: Format Calendar Web Server Control Elements Using Styles
See http://msdn.microsoft.com/en-us/library/w4s946c9%28v=vs.100%29.aspx

You can also use a developer tools in the browser to see if your styles are overrrided, use the !important attribute to overrride other styles.
0
 

Author Comment

by:desiredforsome
ID: 40503425
Thank You. The CSS attribute worked for me :-)
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

628 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question