Skip to content

Commit 7941c45

Browse files
Oliviercheeaun
Olivier
authored and
cheeaun
committed
A better looking Theme
Silk Icons Rounded corners (modern browsers only: FF+Safari) Regrouped standard+extra icons as one master icon file Signed-off-by: Lim Chee Aun <[email protected]>
1 parent 381a42e commit 7941c45

23 files changed

+130
-0
lines changed

‎Assets/MooEditable/MooEditable.SilkTheme.css

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
A change to the original MooEditable style
3+
4+
* Famfamfam Silk Iconset
5+
* Darker gray color for mouse over selections
6+
* Rounded corners for buttons and overlays (only supported on WebKit and FireFox)
7+
8+
Usage:
9+
Include MooEditable.SilkTheme.css to overwrite the default settings
10+
11+
<link rel="stylesheet" type="text/css" href="../../Assets/MooEditable/MooEditable.css">
12+
<link rel="stylesheet" type="text/css" href="../../Assets/MooEditable/MooEditable.Extras.css">
13+
<link rel="stylesheet" type="text/css" href="../../Assets/MooEditable/MooEditable.SilkTheme.css">
14+
15+
16+
Author: Olivier Refalo
17+
*/
18+
19+
20+
.mooeditable-ui-toolbar .mooeditable-ui-button .button-icon{
21+
background: transparent url(images/mooeditable-toolbarbuttons-silk.png) no-repeat 0 -8px;
22+
}
23+
24+
.mooeditable-ui-toolbar .bold-item .button-icon{ background-position: 0 -16px; }
25+
.mooeditable-ui-toolbar .createlink-item .button-icon{ background-position: 0 -32px; }
26+
.mooeditable-ui-toolbar .indent-item .button-icon{ background-position: 0 -48px; }
27+
.mooeditable-ui-toolbar .insertorderedlist-item .button-icon{ background-position: 0 -64px; }
28+
.mooeditable-ui-toolbar .insertunorderedlist-item .button-icon{ background-position: 0 -80px; }
29+
.mooeditable-ui-toolbar .italic-item .button-icon{ background-position: 0 -96px; }
30+
.mooeditable-ui-toolbar .outdent-item .button-icon{ background-position: 0 -176px; }
31+
.mooeditable-ui-toolbar .redo-item .button-icon{ background-position: 0 -208px; }
32+
.mooeditable-ui-toolbar .strikethrough-item .button-icon{ background-position: 0 -224px; }
33+
.mooeditable-ui-toolbar .toggleview-item .button-icon{ background-position: 0 -240px; }
34+
.mooeditable-ui-toolbar .underline-item .button-icon{ background-position: 0 -256px; }
35+
.mooeditable-ui-toolbar .undo-item .button-icon{ background-position: 0 -272px; }
36+
.mooeditable-ui-toolbar .unlink-item .button-icon{ background-position: 0 -288px; }
37+
.mooeditable-ui-toolbar .urlimage-item .button-icon{ background-position: 0 -304px; }
38+
39+
.mooeditable-ui-toolbar .justifycenter-item .button-icon,
40+
.mooeditable-ui-toolbar .justifyright-item .button-icon,
41+
.mooeditable-ui-toolbar .justifyfull-item .button-icon,
42+
.mooeditable-ui-toolbar .justifyleft-item .button-icon{
43+
background-image: url(images/mooeditable-toolbarbuttons-silk.png);
44+
}
45+
.mooeditable-ui-toolbar .justifycenter-item .button-icon{ background-position: 0 -112px; }
46+
.mooeditable-ui-toolbar .justifyfull-item .button-icon{ background-position: 0 -128px; }
47+
.mooeditable-ui-toolbar .justifyleft-item .button-icon{ background-position: 0 -144px; }
48+
.mooeditable-ui-toolbar .justifyright-item .button-icon{ background-position: 0 -160px; }
49+
50+
.mooeditable-ui-toolbar .mooeditable-ui-button:hover,
51+
.mooeditable-ui-toolbar .mooeditable-ui-button.hover{
52+
-webkit-border-radius: 3px;
53+
-moz-border-radius: 3px;
54+
border-radius: 3px;
55+
}
56+
57+
.mooeditable-ui-button-overlay{
58+
-webkit-border-radius: 5px;
59+
-moz-border-radius: 5px;
60+
border-radius: 5px;
61+
}
62+
63+
.mooeditable-ui-toolbar .mooeditable-ui-button.active,
64+
.mooeditable-ui-toolbar .mooeditable-ui-button.onActive{
65+
background-color: #bbb;
66+
-webkit-border-radius: 3px;
67+
-moz-border-radius: 3px;
68+
border-radius: 3px;
69+
}

‎Assets/MooEditable/Silk/anchor.png

523 Bytes
Loading

‎Assets/MooEditable/Silk/bold.png

304 Bytes
Loading

‎Assets/MooEditable/Silk/createlink.png

343 Bytes
Loading

‎Assets/MooEditable/Silk/indent.png

353 Bytes
Loading

‎Assets/MooEditable/Silk/insertorderedlist.png

357 Bytes
Loading

‎Assets/MooEditable/Silk/insertunorderedlist.png

344 Bytes
Loading

‎Assets/MooEditable/Silk/italic.png

223 Bytes
Loading

‎Assets/MooEditable/Silk/justifycenter.png

234 Bytes
Loading

‎Assets/MooEditable/Silk/justifyfull.png

209 Bytes
Loading

‎Assets/MooEditable/Silk/justifyleft.png

209 Bytes
Loading

‎Assets/MooEditable/Silk/justifyright.png

209 Bytes
Loading

‎Assets/MooEditable/Silk/outdent.png

351 Bytes
Loading

‎Assets/MooEditable/Silk/palette.png

856 Bytes
Loading

‎Assets/MooEditable/Silk/picture.png

606 Bytes
Loading

‎Assets/MooEditable/Silk/redo.png

591 Bytes
Loading

‎Assets/MooEditable/Silk/strikethrough.png

269 Bytes
Loading

‎Assets/MooEditable/Silk/toggleview.png

578 Bytes
Loading

‎Assets/MooEditable/Silk/underline.png

273 Bytes
Loading

‎Assets/MooEditable/Silk/undo.png

650 Bytes
Loading

‎Assets/MooEditable/Silk/unlink.png

657 Bytes
Loading

‎Assets/MooEditable/images/mooeditable-toolbarbuttons-silk.png

8.77 KB
Loading

‎Demos/MooEditable/MooEditable.Extras.SilkTheme.html

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>MooEditable example with extra toolbar items</title>
6+
7+
<style type="text/css">
8+
body{
9+
font-family: sans-serif;
10+
font-size: .9em;
11+
}
12+
#textarea-1{
13+
width: 720px;
14+
height: 200px;
15+
padding: 10px;
16+
border: 2px solid #ddd;
17+
}
18+
</style>
19+
20+
<link rel="stylesheet" type="text/css" href="../../Assets/MooEditable/MooEditable.css">
21+
<link rel="stylesheet" type="text/css" href="../../Assets/MooEditable/MooEditable.Extras.css">
22+
<link rel="stylesheet" type="text/css" href="../../Assets/MooEditable/MooEditable.SilkTheme.css">
23+
<script type="text/javascript" src="../assets/mootools.js"></script>
24+
<script type="text/javascript" src="../../Source/MooEditable/MooEditable.js"></script>
25+
<script type="text/javascript" src="../../Source/MooEditable/MooEditable.UI.MenuList.js"></script>
26+
<script type="text/javascript" src="../../Source/MooEditable/MooEditable.Extras.js"></script>
27+
28+
<script type="text/javascript">
29+
window.addEvent('load', function(){
30+
$('textarea-1').mooEditable({
31+
actions: 'bold italic underline strikethrough | formatBlock justifyleft justifyright justifycenter justifyfull | insertunorderedlist insertorderedlist indent outdent | undo redo | createlink unlink | urlimage | toggleview'
32+
});
33+
34+
// Post submit
35+
$('theForm').addEvent('submit', function(e){
36+
alert($('textarea-1').value);
37+
return true;
38+
});
39+
});
40+
</script>
41+
42+
</head>
43+
<body>
44+
45+
<h1>MooEditable example with extra toolbar items</h1>
46+
47+
<form id="theForm" method="post" action="http://xrado.hopto.org/post.php">
48+
49+
<label for="textarea-1">Textarea 1</label>
50+
<textarea id="textarea-1" name="editable1">
51+
&lt;p&gt;&lt;strong&gt;This&lt;/strong&gt; is cool!&lt;/p&gt;
52+
</textarea>
53+
54+
<input type="submit">
55+
56+
</form>
57+
58+
<div id="data"></div>
59+
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)