Solved

asp.net calendar CSS Title

Posted on 2014-12-10
2
348 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 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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

747 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now