Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

asp.net calendar CSS Title

Posted on 2014-12-10
2
Medium Priority
?
670 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
2 Comments
 
LVL 10

Accepted Solution

by:
Walter Padrón earned 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
High user turnover can cause old/redundant user data to consume valuable space. UserResourceCleanup was developed to address this by automatically deleting user folders when the user account is deleted.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

824 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