[Webinar] Streamline your web hosting managementRegister Today

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 327
  • Last Modified:

Dynamic Calendar CSS

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

  • 3
1 Solution
On line 343 of your structure.css file you should see this:

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

UName10Author Commented:
Ok thanks, I think I'll just remove it.

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

Many thanks.
UName10Author Commented:
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.
UName10Author Commented:
Removed the border from the hover state which caused the misalignment.

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now