Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

asp.net calendar CSS Title

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
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 …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

715 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