1
0
mirror of https://github.com/kremalicious/krtmn.git synced 2024-12-22 09:13:25 +01:00

all icons replaced with font awesome

This commit is contained in:
Matthias Kretschmann 2012-03-08 14:44:47 +01:00
parent 75824ca4db
commit 7506275913
3 changed files with 78 additions and 76 deletions

View File

@ -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:
![](http://f.cl.ly/items/3v3z2A2L0L3G3e1v3W3S/krtmn-admin-screen.png)
![](http://f.cl.ly/items/2M0C2N1z0q3S0J0O0c2J/krtmn-admin-screen.png)
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)

View File

@ -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 &amp; 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>

View File

@ -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 */