m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 01:46:51 +01:00
Code

hard_wrap fixes for button rows

Browse Source
This commit is contained in:
Matthias Kretschmann 2014-07-11 12:27:52 +02:00
parent cc26ede465
commit 03678257ed
4 changed files with 25 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
_src/_posts/2011-12-15-badged.md
View File

@ -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.
<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 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 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>
</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:
1. Upload the badged plugin folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the _Plugins_ menu in WordPress
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)
@ -69,24 +67,24 @@ If you find any problems you can [open an issue on Github](https://github.com/kr
**v0.3.4**
* more descriptive readme and settings footer with links to blog post & github page
* updated translation
**v0.3.2**
* Make the plugin work if symlinked
**v0.3**
* initial beta release
**v0.2**
* added options to control whether the badges show up in admin menu or toolbar (default is both)
**v0.1**
* initial alpha release

26
_src/_posts/2012-05-15-wp-icons-template.md
View File

@ -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:
<a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn btn-primary icon-download">Download Template &amp; 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/zipball/master" class="btn btn-primary icon-download">Download Template &amp; 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>
### Usage
@ -93,7 +91,7 @@ function custom_post_type_icon() {
only screen and ( -o-min-device-pixel-ratio: 3/2),
only screen and ( min-device-pixel-ratio: 1.5),
only screen and ( min-resolution: 1.5dppx) {
/* Admin Menu - 16px @2x */
#menu-posts-YOUR_POSTTYPE_NAME .wp-menu-image {
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;
-moz-background-size: 32px 32px;
background-size: 32px 32px;
}
}
}
</style>
<?php }
<?php }
?>
@ -138,13 +136,13 @@ So all this combined leads to this snippet:
/**
* Option Page Icon for Admin Menu & Option Screen
*/
add_action( 'admin_head', 'option_page_icon' );
function option_page_icon() {
?>
<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()
*/
#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 {
background-position: 6px -26px !important;
}
/* Option Screen - 32px */
#PLUGINNAME.icon32 {
background: url(<?php bloginfo('template_url') ?>/images/icon-adminpage32.png) no-repeat left top !important;
}
@media
only screen and (-webkit-min-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;
-moz-background-size: 16px 48px;
background-size: 16px 48px;
}
}
/* Option Screen - 32px @2x */
#PLUGINNAME.icon32 {
background-image: url('<?php bloginfo('template_url') ?>/images/icon-adminpage32_2x.png') !important;
-webkit-background-size: 32px 32px;
-moz-background-size: 32px 32px;
background-size: 32px 32px;
}
}
}
</style>
<?php }
<?php }
?>

6
_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md
View File

@ -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.
<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" 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>
## Usage
@ -44,7 +42,7 @@ You also need to add all the Roboto font files from assets/fonts to your project
### 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.

9
_src/_posts/2012-08-07-projectpurple.md
View File

@ -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:
<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)
## License