Solved

Dynamic Calendar CSS

Posted on 2013-01-23
4
323 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
[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
  • 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

Independent Software Vendors: 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

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…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

752 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