Solved

Dynamic Calendar CSS

Posted on 2013-01-23
4
318 Views
Last Modified: 2013-01-29
The calendar at the top of this page uses a tweaked generic css file, and I just want to remove the previous and next hovers because they'r difficult to line up properly.

I also use a custom title tag style, but the standard browser ones are showing too giving two titles on both previous and next hovers.

Any help would be great.

Here's the CSS:

/* Overlays */
.ui-widget-overlay { background: #f7f7ba url(images/ui-bg_white-lines_85_f7f7ba_40x100.png) 50% 50% repeat; opacity: .80;filter:Alpha(Opacity=80); }
.ui-widget-shadow { margin: 8px 0 0 8px; padding: 10px; background: #ba9217 url(images/ui-bg_flat_75_ba9217_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
.ui-datepicker .ui-datepicker-header { position:relative;  }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 6px; width: 0.8em; height: 0.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 6px; }
.ui-datepicker .ui-datepicker-prev { left:20px; }
.ui-datepicker .ui-datepicker-next { right:20px; }
.ui-datepicker .ui-datepicker-prev-hover { left:20px; }
.ui-datepicker .ui-datepicker-next-hover { right:20px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -10px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {background:transparent;width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker tr {background:transparent;}
.ui-datepicker td span, .ui-datepicker td a { display: block; padding:3px; text-align: center; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_c02669_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_c02669_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_e1e463_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_88a206_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_ffeb33_256x240.png); }

/* Component containers
----------------------------------*/
.ui-widget { font-family: Gill Sans,Arial,sans-serif; font-size: 1.2em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Gill Sans,Arial,sans-serif; font-size: 1em; }
.ui-widget-content { border: 0px solid #aaaaaa; background:transparent url(images/ui-bg_flat_75_ffffff_40x100.pn) 50% 50% repeat-x; color: #2c4359; }
.ui-widget-content a { color: #2c4359; }
.ui-widget-header { border: 0px solid #2c4359; background: transparent url(images/ui-bg_dots-small_35_35414f_2x2.pn) 50% 50% repeat; }
.ui-widget-header a { color: #e1e463; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #50ACCF; background: #ddd; color: #0B3E49;text-shadow:0 1px 1px white; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #333333; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; color: #ffffff !important; background: #5C5C5C; text-shadow: none !important;}
.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #ff6b7f; background: #db4865;color: #ffffff !important;text-shadow:none !important;}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; text-decoration: none; }
.ui-widget :active { outline: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {text-shadow:0 1px 1px #fff;border: 1px solid #8B9931; background: #ffff38 url(images/ui-bg_dots-medium_80_ffff38_4x4.png) 50% 50% repeat; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #ff6b7f; background: #ff3853 url(images/ui-bg_diagonals-small_50_ff3853_40x40.png) 50% 50% repeat; color: #ffffff; }
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background:transparent url(images/ui-bg_diagonals-small_50_93c3cd_39x39.png) 50% 50% repeat; }

Open in new window

0
Comment
Question by:UName10
  • 3
4 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 38811339
On line 343 of your structure.css file you should see this:
a[title]:hover:after

Open in new window


Just use display:none; or delete it all together.  Although because it's such a broad declaration it could inadvertently hurt other things.

So instead try doing this:

ui-datepicker-prev a[title]:hover:after, ui-datepicker-next a[title]:hover:after{display:none;}

Open in new window

0
 

Author Comment

by:UName10
ID: 38814318
Ok thanks, I think I'll just remove it.

Any ideas on how to remove the previous and next hovers?

Many thanks.
0
 

Accepted Solution

by:
UName10 earned 0 total points
ID: 38814337
It's ok I just fixed it,; I removed the border from here:

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; color: #ffffff !important; background: #5C5C5C; text-shadow: none !important;}

Open in new window


This caused it to do down and not be aligned correctly.
0
 

Author Closing Comment

by:UName10
ID: 38830295
Removed the border from the hover state which caused the misalignment.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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 …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

863 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

24 Experts available now in Live!

Get 1:1 Help Now