desiredforsome
asked on
asp.net calendar CSS Title
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
here is my html/asp
here is it rendered
here is what it looks like now.
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;
}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>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&t=635369998285126825" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=x6wALODbMJK5e0eRC_p1LdVlHLzV_Vi-LuAbiGY8MpcV-6zEYPjzC2jhHuyyE1duiCvcU6f_yFJCEMqQ9huKKx3_9vLvCg-Liw2ZmJRgJi4-BbA9gEh5erR5fxYf5byL0&t=ffffffffda74082d" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=P5lTttoqSeZXoYRLQMIScBMLMmpfImQhSyPlOVR72elJrEj559JzNHCldCGJO46uXOzZ2J9F54JiI7EsKiCCNmvzFhzSMUeAgkBrngM3YoWzZRNIBz49fI5eljlxatG00&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 "LOGOUT" to log off." class="fieldlog" style="background-color:#E4E0E0;">
You are currently logged in as:
<span id="LoginName1">gashlin@gmail.com</span>
<a id="LoginStatus2" href="javascript:__doPostBack('LoginStatus2$ctl00','')">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>here is what it looks like now.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER