search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Styling Indicator and Row Selecting ?

Asked by Daniel
7 years ago.

Hi!

Where to style the the "Real-Time Selection Position Indicator" and the "Row Selecting"?

I updated my js and css-files, but did not find where to style?! F.a. the Indicators (left+right) do not have a border.

Thanks
daniel

Answer posted by Dan Letecky [DayPilot]
7 years ago.

The new theme elements that were introduced in 7.8 are defined like this (in the built-in theme, i.e. "scheduler_default"). You can copy these styles to your theme.

The other themes in the package and the theme designer (http://themes.daypilot.org/) will be updated soon.

Drag and drop indicator (left):

.scheduler_default_event_move_left { 
  box-sizing: border-box; 
  padding:2px;
  border:1px solid #ccc;
  background:#fff; 
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));
  background: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee);
  background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee);
  background: -ms-linear-gradient(top, #ffffff 0%, #eeeeee);
  background: -o-linear-gradient(top, #ffffff 0%, #eeeeee);
  background: linear-gradient(top, #ffffff 0%, #eeeeee);
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#eeeeee");
}

Drag and drop indicator (right):

.scheduler_default_event_move_right {
  box-sizing: border-box; 
  padding:2px;
  border:1px solid #ccc;
  background:#fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));
  background: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee);
  background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee);
  background: -ms-linear-gradient(top, #ffffff 0%, #eeeeee);
  background: -o-linear-gradient(top, #ffffff 0%, #eeeeee);
  background: linear-gradient(top, #ffffff 0%, #eeeeee);
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#eeeeee");
}

Selected row header cells:

.scheduler_default_rowheader.scheduler_default_rowheader_selected {
  background-color: #aaa;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),	color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  -webkit-background-size: 20px 20px;
  -moz-background-size: 20px 20px;
  background-size: 20px 20px;
}

Cell belonging to a selected row:

.scheduler_default_cell.scheduler_default_cell_business.scheduler_default_cell_selected,.scheduler_default_cell.scheduler_default_cell_selected {
  background-color: #ccc;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,	color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),	color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  -webkit-background-size: 20px 20px;
  -moz-background-size: 20px 20px;
  background-size: 20px 20px;
}

Event delete icon:

.scheduler_default_event_delete {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAI5JREFUKFNtkLERgCAMRbmzdK8s4gAUlhYOYEHJEJYOYOEwDmGBPxC4kOPfvePy84MGR0RJ2N1A8H3N6DATwSQ57m2ql8NBG+AEM7D+UW+wjdfUPgerYNgB5gOLRHqhcasg84C2QxPMtrUhSqQIhg7ypy9VM2EUZPI/4rQ7rGxqo9sadTegw+UdjeDLAKUfhbaQUVPIfJYAAAAASUVORK5CYII=) center center no-repeat; 
  opacity: 0.6; 
  -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)';
  cursor: pointer;
}
.scheduler_default_event_delete:hover {
  opacity: 1;
  -ms-filter: none;
}
Comment posted by Daniel
7 years ago.

i put your css code into my theme. no changes??! i can put f.a. "color: green" into "scheduler_default_event_move_left" to see an effect. The text is still black. and no border around the "left text"!?

I am using your js version 923.

What am i doing wrong??

daniel.

Answer posted by Daniel
7 years ago.

i downloaded "DayPilotProJavaScriptTrial-7.8.923.zip", but cant find the "scheduler_default"??

Where to put your code to?

Thanks!
DAniel

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.