Google fonts and skinning

[simonrp]

Hi,

I'm not at all new to JS coding but very new to SpiderBasic.

On the face of it it would appear to be an excellent piece of kit but I have a couple of questions and would appreciate it if anyone could answer please ?

1. Is it possible for me to use alternative fonts (IE: Google Fonts) for gadgets, window titles and general other UI components where text is used ?
2. Are there any more "skinning" possibilities open to me for the UI elements? Such as changing the color/size of window title bars etc ?

Many thanks in advance for any help.

[Arbrakaan]

Yep you can use Google font and your own CSS.

But you cant use your own font on a canvas element...





If your OS is on Window :
C:\SpiderBasic\Libraries\JavaScript\themes\flatII\window.css

I am working on my own template :

Code: Select all

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

html {
    margin:0;
	padding:0;
	height:100%;
	width:100%;
  background: url("../../media/background.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;	
}

body {
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	overflow:hidden;
  font:normal 12px 'Open Sans',arial;
}


.spiderwindow {
	margin:0;
	padding:0;
	box-shadow: 0 1px 6px rgba(30,30,30,0.4);
	background-color:rgba(255,255,255,1);
	padding-bottom:28px;
    border-radius: 2px;
	position:absolute;
	z-index:1;
}

.spiderwindow-title {
	margin:0;
	padding:0;
	background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    border-bottom: 1px solid #d3d3d3;
	color:#000;
	font:normal 12px/16px 'Open Sans',Arial,sans-serif;
	height:16px;
	overflow:hidden;
	padding:6px 0 6px 28px;
	text-overflow:ellipsis;
	white-space:nowrap;
	cursor:default;
}

.spiderwindow-menubar {
	background:#fff;
}

.spiderwindow-content {
  background-color:#f2f2f2;
	margin:0;
	padding:0;
	height:100%;
  overflow:hidden;
	position:relative;
}

.spiderwindow-content p {
	margin:0;
	padding:0;
	margin-bottom:10px;
}
.spiderwindow-content img {
	margin:0;
	padding:0;
	background-color:#f1f1f1;
	border:1px solid #ddd;
	float:left;
	margin:0 20px 10px 0;
	padding:1px;
}

.spiderwindow-closebutton {
  background-color:rgba(230,32,32,0.7);
  background-image: url("close.png"); 
  background-repeat: no-repeat;
  background-position: 9px 5px;
  position: absolute;
  top: 2px;
  right:2px;
  height: 22px;
  width: 30px;
  color:#ffffff;
    border-radius:4px;
}

.spiderwindow-closebutton:hover {
  background-color:#c23e3e;
}

.spiderwindow-closebutton:active {
  background-color:#b02a2a;
}

/* Special definition for background windows
 */
.spiderwindow-background {
	margin:0;
	padding:0;
	background-color:#ffffff;
	color:#000;
	font:normal 12px/18px arial,sans-serif;
	height:100%;
  overflow:hidden;
	position:relative;
}

/* Resizeable */
.ui-resizable-handle{display:block;position:absolute;}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle{display:none;}
.ui-resizable-n,.ui-resizable-s{height:7px;left:0;width:100%;}
.ui-resizable-n{cursor:n-resize;top:-5px;}
.ui-resizable-s{bottom:-5px;cursor:s-resize;}
.ui-resizable-e,.ui-resizable-w{height:100%;top:0;width:7px;}
.ui-resizable-e{cursor:e-resize;right:-5px;}
.ui-resizable-w{cursor:w-resize;left:-5px;}
.ui-resizable-se,.ui-resizable-sw,
.ui-resizable-nw,.ui-resizable-ne{height:12px;width:12px;}
.ui-resizable-se{bottom:-6px;cursor:se-resize;right:-6px;}
.ui-resizable-sw{bottom:-6px;cursor:sw-resize;left:-6px;}
.ui-resizable-nw{cursor:nw-resize;left:-6px;top:-6px;}
.ui-resizable-ne {cursor:ne-resize;right:-6px;top:-6px;}





.dijitMenuBar {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    border-bottom: 1px solid #d3d3d3;
    box-shadow: 0 1px 6px rgba(30,30,30,0.1);
    font: 'Open Sans',Arial,sans-serif;
    letter-spacing: 1.1px;
}
/* Menu Item: Hover */
.dijitMenuItemHover td,
.dijitMenuItemHover {
  color: #fff;
  background: #ae1d35;
}
/* Menu Item: Active */
.dijitMenuItemActive td,
.dijitMenuItemActive {
  color: #fff;
  background: #ae1d35;
}
/* Menu Item: Selected */
.dijitMenuItemSelected td,
.dijitMenuItemSelected {
  color: #fff;
  background: #ae1d35;
}
.dijitMenuBar .dijitMenuItemHover {
  background: #ae1d35;
}
.dijitMenuBar .dijitMenuItemActive {
  background: #ae1d35;
}
.dijitMenuBar .dijitMenuItemSelected,
.dijitMenuBar .dijitMenuItemHover.dijitMenuItemSelected,
.dijitMenuBar .dijitMenuItemActive.dijitMenuItemSelected {
  color: #fff;
  background: #ae1d35;
}



.dijitProgressBarFull {
  background: #ae1d35;
  background: -webkit-linear-gradient(#da556b, #ae1d35);
  background: -moz-linear-gradient(#da556b, #ae1d35);
  background: -o-linear-gradient(#da556b, #ae1d35);
  background: -ms-linear-gradient(#da556b, #ae1d35);
  background: linear-gradient(#da556b, #ae1d35);
  -webkit-transition-property: width;
  -moz-transition-property: width;
  -o-transition-property: width;
  -ms-transition-property: width;
  transition-property: width;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  -ms-transition-duration: 0.25s;
  transition-duration: 0.25s;
  height:100%;
}

.dijitTabContainerTop-tabs .dijitTabChecked:before {
  height: 2px;
  background: #ae1d35;
  top: -1px;
  left: -1px;
  right: -1px;
}




.dijitSelect.btn-primary,
.dijitComboBox.btn-primary,
.dijitSpinner.btn-primary {
  border-color: #ae1d35;
}

.dijitTextBoxHover {
  border: 1px solid #ae1d35;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  -ms-transition-duration: 0.25s;
  transition-duration: 0.25s;
}

.dijitTextBoxFocused {
  border: 1px solid rgba(218,85,107,0.8);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15) inset;
  -webkit-transition-duration: 0.1s;
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  -ms-transition-duration: 0.1s;
  transition-duration: 0.1s;
}



.dijitTextBox {
  background: #fff;
  border: 1px solid #d0d0d0;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1) inset;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1) inset;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  -ms-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}

.spiderwindow-background {
    font: 16px/18px Century Gothic,sans-serif;
    color:#333;
}