mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-22 09:56:51 +01:00
hard_wrap fixes for button rows
This commit is contained in:
parent
cc26ede465
commit
03678257ed
@ -26,17 +26,15 @@ The plugin is localized in english & german, which is only important for the set
|
|||||||
You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
|
You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
|
||||||
|
|
||||||
<p class="clearfix">
|
<p class="clearfix">
|
||||||
<a href="http://wordpress.org/extend/plugins/badged" class="btn btn-primary btn-block icon-wordpress-alt col2">Plugin Page</a>
|
<a href="http://wordpress.org/extend/plugins/badged" class="btn btn-primary btn-block icon-wordpress-alt col2">Plugin Page</a> <a class="btn btn-primary btn-block icon-github-alt col2" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn btn-block col2">Donate</a>
|
||||||
<a class="btn btn-primary btn-block icon-github-alt col2" href="https://github.com/kremalicious/Badged">GitHub</a>
|
|
||||||
<a href="http://krlc.us/givecoffee" class="icon-heart btn btn-block col2">Donate</a>
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
The plugin is hosted on github and will always be mirrored in the WordPress plugins directory. But in case you want to install the plugin manually:
|
The plugin is hosted on github and will always be mirrored in the WordPress plugins directory. But in case you want to install the plugin manually:
|
||||||
|
|
||||||
1. Upload the badged plugin folder to the `/wp-content/plugins/` directory
|
1. Upload the badged plugin folder to the `/wp-content/plugins/` directory
|
||||||
2. Activate the plugin through the _Plugins_ menu in WordPress
|
2. Activate the plugin through the _Plugins_ menu in WordPress
|
||||||
3. Enjoy
|
3. Enjoy
|
||||||
4. (optional) Adjust options under _Settings > Badged_. Upon activation the plugin sets both options by default:
|
4. (optional) Adjust options under _Settings > Badged_. Upon activation the plugin sets both options by default:
|
||||||
|
|
||||||
![](/media/badged-settings.png)
|
![](/media/badged-settings.png)
|
||||||
|
|
||||||
@ -69,24 +67,24 @@ If you find any problems you can [open an issue on Github](https://github.com/kr
|
|||||||
|
|
||||||
|
|
||||||
**v0.3.4**
|
**v0.3.4**
|
||||||
|
|
||||||
* more descriptive readme and settings footer with links to blog post & github page
|
* more descriptive readme and settings footer with links to blog post & github page
|
||||||
* updated translation
|
* updated translation
|
||||||
|
|
||||||
**v0.3.2**
|
**v0.3.2**
|
||||||
|
|
||||||
* Make the plugin work if symlinked
|
* Make the plugin work if symlinked
|
||||||
|
|
||||||
**v0.3**
|
**v0.3**
|
||||||
|
|
||||||
* initial beta release
|
* initial beta release
|
||||||
|
|
||||||
|
|
||||||
**v0.2**
|
**v0.2**
|
||||||
|
|
||||||
* added options to control whether the badges show up in admin menu or toolbar (default is both)
|
* added options to control whether the badges show up in admin menu or toolbar (default is both)
|
||||||
|
|
||||||
**v0.1**
|
**v0.1**
|
||||||
|
|
||||||
* initial alpha release
|
* initial alpha release
|
||||||
|
|
||||||
|
@ -33,9 +33,7 @@ So if you value quality and want pixel perfect icons in your admin area you need
|
|||||||
|
|
||||||
I’ve put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away:
|
I’ve put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away:
|
||||||
|
|
||||||
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn btn-primary icon-download">Download Template & Code</a>
|
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn btn-primary icon-download">Download Template & Code</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github btn">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
|
||||||
<a href="https://github.com/kremalicious/wp-icons-template" class="icon-github btn">GitHub</a>
|
|
||||||
<a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
|
|
||||||
|
|
||||||
|
|
||||||
### Usage
|
### Usage
|
||||||
@ -93,7 +91,7 @@ function custom_post_type_icon() {
|
|||||||
only screen and ( -o-min-device-pixel-ratio: 3/2),
|
only screen and ( -o-min-device-pixel-ratio: 3/2),
|
||||||
only screen and ( min-device-pixel-ratio: 1.5),
|
only screen and ( min-device-pixel-ratio: 1.5),
|
||||||
only screen and ( min-resolution: 1.5dppx) {
|
only screen and ( min-resolution: 1.5dppx) {
|
||||||
|
|
||||||
/* Admin Menu - 16px @2x */
|
/* Admin Menu - 16px @2x */
|
||||||
#menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
|
#menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
|
||||||
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
|
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminmenu16-sprite_2x.png') !important;
|
||||||
@ -107,10 +105,10 @@ function custom_post_type_icon() {
|
|||||||
-webkit-background-size: 32px 32px;
|
-webkit-background-size: 32px 32px;
|
||||||
-moz-background-size: 32px 32px;
|
-moz-background-size: 32px 32px;
|
||||||
background-size: 32px 32px;
|
background-size: 32px 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<?php }
|
<?php }
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
@ -138,13 +136,13 @@ So all this combined leads to this snippet:
|
|||||||
/**
|
/**
|
||||||
* Option Page Icon for Admin Menu & Option Screen
|
* Option Page Icon for Admin Menu & Option Screen
|
||||||
*/
|
*/
|
||||||
|
|
||||||
add_action( 'admin_head', 'option_page_icon' );
|
add_action( 'admin_head', 'option_page_icon' );
|
||||||
|
|
||||||
function option_page_icon() {
|
function option_page_icon() {
|
||||||
?>
|
?>
|
||||||
<style>
|
<style>
|
||||||
/* Admin Menu - 16px
|
/* Admin Menu - 16px
|
||||||
Use only if you put your plugin or option page in the top level via add_menu_page()
|
Use only if you put your plugin or option page in the top level via add_menu_page()
|
||||||
*/
|
*/
|
||||||
#toplevel_page_PLUGINNAME-FILENAME .wp-menu-image {
|
#toplevel_page_PLUGINNAME-FILENAME .wp-menu-image {
|
||||||
@ -157,12 +155,12 @@ function option_page_icon() {
|
|||||||
#toplevel_page_PLUGINNAME-FILENAME:hover .wp-menu-image, #toplevel_page_PLUGINNAME-FILENAME.wp-has-current-submenu .wp-menu-image {
|
#toplevel_page_PLUGINNAME-FILENAME:hover .wp-menu-image, #toplevel_page_PLUGINNAME-FILENAME.wp-has-current-submenu .wp-menu-image {
|
||||||
background-position: 6px -26px !important;
|
background-position: 6px -26px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Option Screen - 32px */
|
/* Option Screen - 32px */
|
||||||
#PLUGINNAME.icon32 {
|
#PLUGINNAME.icon32 {
|
||||||
background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important;
|
background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media
|
@media
|
||||||
only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
||||||
only screen and ( min--moz-device-pixel-ratio: 1.5),
|
only screen and ( min--moz-device-pixel-ratio: 1.5),
|
||||||
@ -177,18 +175,18 @@ function option_page_icon() {
|
|||||||
-webkit-background-size: 16px 48px;
|
-webkit-background-size: 16px 48px;
|
||||||
-moz-background-size: 16px 48px;
|
-moz-background-size: 16px 48px;
|
||||||
background-size: 16px 48px;
|
background-size: 16px 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Option Screen - 32px @2x */
|
/* Option Screen - 32px @2x */
|
||||||
#PLUGINNAME.icon32 {
|
#PLUGINNAME.icon32 {
|
||||||
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
|
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
|
||||||
-webkit-background-size: 32px 32px;
|
-webkit-background-size: 32px 32px;
|
||||||
-moz-background-size: 32px 32px;
|
-moz-background-size: 32px 32px;
|
||||||
background-size: 32px 32px;
|
background-size: 32px 32px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<?php }
|
<?php }
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
@ -22,9 +22,7 @@ The above picture might be blurry depending on the device you're using so here's
|
|||||||
|
|
||||||
They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project.
|
They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project.
|
||||||
|
|
||||||
<a class="btn btn-primary" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
|
<a class="btn btn-primary" href="http://lab.kremalicious.com/kbdfun/">Demo</a> <a class="btn btn-primary icon-download" href="https://github.com/kremalicious/kbdfun/zipball/master">Download</a> <a class="btn icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
|
||||||
<a class="btn btn-primary icon-download" href="https://github.com/kremalicious/kbdfun/zipball/master">Download</a>
|
|
||||||
<a class="btn icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
@ -44,7 +42,7 @@ You also need to add all the Roboto font files from assets/fonts to your project
|
|||||||
|
|
||||||
### LESS
|
### LESS
|
||||||
|
|
||||||
There're some variables in the kbdfun.less file you can customize.
|
There're some variables in the kbdfun.less file you can customize.
|
||||||
|
|
||||||
For the Android style, there's roboto.less as include at the end. But the font files won't load unless you uncomment the .font-roboto line in kbdftw.less. This is to make sure, users won't download all the font files if you don't use the Android style.
|
For the Android style, there's roboto.less as include at the end. But the font files won't load unless you uncomment the .font-roboto line in kbdftw.less. This is to make sure, users won't download all the font files if you don't use the Android style.
|
||||||
|
|
||||||
|
@ -34,13 +34,10 @@ The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple
|
|||||||
Download the whole package with all the sizes included or grab the individual ones from the list, all linked to the image files:
|
Download the whole package with all the sizes included or grab the individual ones from the list, all linked to the image files:
|
||||||
|
|
||||||
<a class="btn btn-block icon-download" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
|
<a class="btn btn-block icon-download" href="/media/project-purple-kremalicious.zip">Download <span> zip</span></a>
|
||||||
|
|
||||||
* [Desktop/rMBP/iPad 3 (3200x2048)](/media/project-purple-kremalicious.png)
|
|
||||||
|
|
||||||
* [Laptop/Nexus 7/Galaxy Nexus (1280x800)](/media/project-purple-nexus-kremalicious.png)
|
|
||||||
|
|
||||||
* [iPad (1024x1024)](/media/project-purple-ipad-kremalicious.png)
|
|
||||||
|
|
||||||
|
* [Desktop/rMBP/iPad 3 (3200x2048)](/media/project-purple-kremalicious.png)
|
||||||
|
* [Laptop/Nexus 7/Galaxy Nexus (1280x800)](/media/project-purple-nexus-kremalicious.png)
|
||||||
|
* [iPad (1024x1024)](/media/project-purple-ipad-kremalicious.png)
|
||||||
* [iPhone (640x960)](/media/project-purple-iphone4-kremalicious.png)
|
* [iPhone (640x960)](/media/project-purple-iphone4-kremalicious.png)
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
Loading…
Reference in New Issue
Block a user