all icons replaced with font awesome
This commit is contained in:
Matthias Kretschmann
parent
75824ca4db
commit
7506275913
15
README.md
15
README.md
|
|
@ -4,14 +4,21 @@ My own url shortener based on [yourls - Your Own URL Shortener](http://yourls.or
|
|||
|
||||
It has a public front page under http://krt.mn with the latest shortened url. The backend is a completely restyled interface based on the YOURLS default styles (which are quite ugly). Here's what it looks like in the admin area:
|
||||
|
||||
|
||||
|
||||
|
||||
Everything custom is happening in `/user`:
|
||||
|
||||
- `user/plugins/my-own-stuff/plugin.php` adds css file link and a bit more dynamically to the html `head`
|
||||
- `user/css/krtmn.css` overwrites the default styles
|
||||
|
||||
|
||||
## License & Usage
|
||||
|
||||
As the original YOURLS you're free to do whatever you want with this. But using this without further modifications as your own url shortener isn't a good idea either.
|
||||
As the original YOURLS you're free to do whatever you want with this. But using this without further modifications as your own url shortener is probably not a good idea.
|
||||
|
||||
|
||||
## Acknowledgements
|
||||
|
||||
Many thanks to:
|
||||
* Ozh Richard ([@ozh](https://twitter.com/ozh)) for creating yourls
|
||||
* Fort Awesome ([@fortaweso_me](https://twitter.com/fortaweso_me)) for creating the [Font Awesome icon font](http://fortawesome.github.com/Font-Awesome)
|
||||
- Ozh Richard ([@ozh](https://twitter.com/ozh)) for creating yourls
|
||||
- Fort Awesome ([@fortaweso_me](https://twitter.com/fortaweso_me)) for creating the [Font Awesome icon font](http://fortawesome.github.com/Font-Awesome)
|
||||
|
|
@ -28,7 +28,7 @@ $items = yourls_api_stats( 'last', 1 );
|
|||
<body id="public">
|
||||
|
||||
<header>
|
||||
<h1 class="icon link"><a href="/admin">krt.mn</a></h1>
|
||||
<h1><i class="icon-bookmark"></i><a href="/admin">krt.mn</a></h1>
|
||||
</header>
|
||||
<article role="main">
|
||||
<?php foreach( $items['links'] as $item ) { ?>
|
||||
|
|
@ -39,7 +39,7 @@ $items = yourls_api_stats( 'last', 1 );
|
|||
<footer>
|
||||
|
||||
<p><small>personal url shortener of web & ui designer <a href="http://mkretschmann.com">matthias kretschmann</a>. You should follow me on <a href="http://twitter.com/kremalicious">twitter</a>.</small></p>
|
||||
<p><small>icon font <a href="http://iconsweets.com/">iconsweets</a></small></p>
|
||||
<p><small>icon font <a href="http://fortawesome.github.com/Font-Awesome/">Font Awesome</a></small></p>
|
||||
|
||||
</footer>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '../fonts/font-awesome/css/font-awesome.css';
|
||||
|
||||
html, body {
|
||||
background: #516062;
|
||||
}
|
||||
|
|
@ -78,82 +80,59 @@ a:hover {
|
|||
/* Icons */
|
||||
/* ============================================================== */
|
||||
|
||||
@font-face {
|
||||
font-family: 'iconSweetsRegular';
|
||||
src: url('../fonts/iconsweets-webfont.eot');
|
||||
src: url('../fonts/iconsweets-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/iconsweets-webfont.woff') format('woff'),
|
||||
url('../fonts/iconsweets-webfont.ttf') format('truetype'),
|
||||
url('../fonts/iconsweets-webfont.svg#iconSweetsRegular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.icon:before,
|
||||
td.actions .button:before,
|
||||
li#admin_menu_logout_link:before,
|
||||
#admin_menu li.admin_menu_toplevel a:before,
|
||||
li#admin_menu_help_link a:before,
|
||||
.error:before {
|
||||
font-family: 'iconSweetsRegular';
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.icon.link:before {
|
||||
content: "Q";
|
||||
}
|
||||
|
||||
li#admin_menu_logout_link:before {
|
||||
content: "d";
|
||||
margin-right: .5em;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#admin_menu li.admin_menu_toplevel a:before,
|
||||
li#admin_menu_help_link a:before {
|
||||
margin-right: .7em;
|
||||
margin-left: -.7em;
|
||||
font-size: 16px;
|
||||
color: #191e1f;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.1);
|
||||
font-size: 24px;
|
||||
vertical-align: text-bottom;
|
||||
position: relative;
|
||||
top: -.1em;
|
||||
}
|
||||
|
||||
li#admin_menu_admin_link a:before {
|
||||
content: "0";
|
||||
}
|
||||
|
||||
li#admin_menu_tools_link a:before {
|
||||
content: "m";
|
||||
}
|
||||
|
||||
li#admin_menu_plugins_link a:before {
|
||||
content: "l";
|
||||
}
|
||||
|
||||
li#admin_menu_help_link a:before {
|
||||
content: "?";
|
||||
margin-right: .7em;
|
||||
}
|
||||
|
||||
#public h1.icon.link:before {
|
||||
#public h1 i {
|
||||
display: block;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
/*additional font-awesome definitions*/
|
||||
.error:before,
|
||||
li#admin_menu_logout_link:before,
|
||||
#admin_menu li.admin_menu_toplevel a:before,
|
||||
td.actions .button:before,
|
||||
#toggle_plugins {
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.error:before {
|
||||
content: "!";
|
||||
content: "\f071";
|
||||
margin-right: .7em;
|
||||
margin-left: -.7em;
|
||||
font-size: 32px;
|
||||
vertical-align: top;
|
||||
line-height: .3em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li#admin_menu_logout_link:before {
|
||||
content: "\f007";
|
||||
margin-right: .5em;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#admin_menu li.admin_menu_toplevel a:before {
|
||||
margin-right: .7em;
|
||||
margin-left: -.7em;
|
||||
font-size: 18px;
|
||||
color: #191e1f;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li#admin_menu_admin_link a:before {
|
||||
content: "\f015";
|
||||
}
|
||||
|
||||
li#admin_menu_tools_link a:before {
|
||||
content: "\f000";
|
||||
}
|
||||
|
||||
li#admin_menu_plugins_link a:before {
|
||||
content: "\f085";
|
||||
}
|
||||
|
||||
/* Action Icons */
|
||||
|
||||
table.tblSorter tbody td.actions {
|
||||
|
|
@ -163,7 +142,7 @@ table.tblSorter tbody td.actions {
|
|||
td.actions .button {
|
||||
overflow: hidden;
|
||||
color: #191e1f;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
background: none;
|
||||
text-indent: 0;
|
||||
height: 32px;
|
||||
|
|
@ -174,28 +153,30 @@ td.actions .button {
|
|||
td.actions .button:before {
|
||||
margin-right: 1em;
|
||||
margin-left: .2em;
|
||||
margin-top: .3em;
|
||||
font-size: 1.5em;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.2);
|
||||
}
|
||||
|
||||
td.actions .button:hover:before {
|
||||
td.actions .button:hover:before,
|
||||
#toggle_plugins:hover:before {
|
||||
color: #28cbc3;
|
||||
}
|
||||
|
||||
td.actions .button_stats:before {
|
||||
content: "*";
|
||||
content: "\f080";
|
||||
}
|
||||
|
||||
td.actions .button_share:before {
|
||||
content: "w";
|
||||
content: "\f045";
|
||||
}
|
||||
|
||||
td.actions .button_edit:before {
|
||||
content: "8";
|
||||
content: "\f044";
|
||||
}
|
||||
|
||||
td.actions .button_delete:before {
|
||||
content: "X";
|
||||
content: "\f05c";
|
||||
}
|
||||
|
||||
td.actions .button_delete:hover:before {
|
||||
|
|
@ -212,6 +193,20 @@ td.actions .button.disabled, #add-button.disabled {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#toggle_plugins {
|
||||
background: none !important;
|
||||
text-indent: 0 !important;
|
||||
overflow: hidden;
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
margin-left: 1em !important;
|
||||
}
|
||||
#toggle_plugins:before {
|
||||
content: "\f022";
|
||||
font-size: 20px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================================== */
|
||||
/* Forms & Inputs */
|
||||
|
|
|
|||
Loading…
Reference in New Issue