The following code adds Bootstrap classes to the default WordPress comment form. You are free to customise this as you need, only the default HTML has been copied here.
Tag: code
BootstrASP – Our first open source project
We are very excited to announce our first open source project that we’re calling BootstrASP. It’s a simple framework for building websites with ASP and twitter’s Bootstrap with some added CSS3 candy thrown in for good measure!
You’ll find all the info on the project’s github page. If you spot something wrong, you have an idea for a new feature or you have a better way of doing something, please submit a pull request and we’ll review your code. It’s an ever evolving project and new features are being regularly added.
BootstrASP is licensed under CC BY-SA 2.0 which means you are free to copy, distribute, hack, slice, make derivatives and even to make commercial use of it provided that you both credit Trippnology and release your work under an identical license. We’re big fans of open source software (and hardware for that matter) so we’re really pleased to be giving a tiny something back to the community.
Let us know what you think in the comments here or on twitter and remember to share this post with your networks.
HTML5: What’s that all about then?
We’ve had lots of questions about HTML5 recently. What is it? Do I need to update my website code? Will my Google ranking be affected?
Unless a client specifically requests otherwise, we now build all of our sites using HTML5 (and usually with a responsive layout). We are a forward thinking web company and we firmly believe that HTML5 is the future of the web. Contact us if you would like to have a shiny new HTML5 website developed for you or would like to bring your existing site up to date.
Before writing this post, I had a quick search to see what other people are saying and I stumbled across this great post from HTML5 Doctor. Rather than reinvent the wheel, I will just link you off to their great Q and A about HTML5.
Let us know what you think in the comments here or on Facebook and remember to share this post with your networks.
Scrollable box without using an iframe
Here’s a super simple CSS tip to create a scrollable box on your website, without having to use the dreaded iframe tag. Scrollable boxes are great for cramming lots of content into a small space. They are perfect for announcements or short news feeds.
The solution which forms the basis of this technique is the overflow attribute. It can be set to .scrollable { width:250px; height:300px; overflow:scroll; }
Give a div the class you specified above and you’re good to go.
<div class="scrollable">
[Put your content here]
</div>
Example 1:
Ornatus omittam scaevola eos ea, eu his amet quas insolens, nam alii honestatis appellantur id. Vim eirmod imperdiet delicatissimi an, quo pertinax inimicus consetetur at. Id facete euismod mel. Quo mandamus eloquentiam et. Nam ad consul malorum ullamcorper, has ea bonorum verterem. In accusam dissentiunt est, id eos prima mutat solum. Everti percipitur ne vel, ea ubique legimus vix.
Lorem ipsum sea ad molestiae similique repudiandae, qui et habeo reque nonumy. Placerat efficiantur vim ex, eam nulla maiestatis definitiones ei. Duo et inermis definitiones, an vix omittam offendit. At cum noster aliquando constituam. Suas eripuit qui eu, et eam copiosae dissentiet. Labores delicata ad sea, in soluta definitiones eam. Et mea solet nonummy.
Lorem ipsum sea ad molestiae similique repudiandae, qui et habeo reque nonumy. Placerat efficiantur vim ex, eam nulla maiestatis definitiones ei. Duo et inermis definitiones, an vix omittam offendit. At cum noster aliquando constituam. Suas eripuit qui eu, et eam copiosae dissentiet. Labores delicata ad sea, in soluta definitiones eam. Et mea solet nonummy.
The problem with setting overflow:scroll is that it creates both vertical and horizontal scroll bars and often the horizontal bar is not required (or desired).
A better idea is to set overflow-y:scroll (or overflow-x if you need horizontal only scrolling) leaving you with the desired effect.
Example 2:
Ornatus omittam scaevola eos ea, eu his amet quas insolens, nam alii honestatis appellantur id. Vim eirmod imperdiet delicatissimi an, quo pertinax inimicus consetetur at. Id facete euismod mel. Quo mandamus eloquentiam et. Nam ad consul malorum ullamcorper, has ea bonorum verterem. In accusam dissentiunt est, id eos prima mutat solum. Everti percipitur ne vel, ea ubique legimus vix.
Lorem ipsum sea ad molestiae similique repudiandae, qui et habeo reque nonumy. Placerat efficiantur vim ex, eam nulla maiestatis definitiones ei. Duo et inermis definitiones, an vix omittam offendit. At cum noster aliquando constituam. Suas eripuit qui eu, et eam copiosae dissentiet. Labores delicata ad sea, in soluta definitiones eam. Et mea solet nonummy.
Lorem ipsum sea ad molestiae similique repudiandae, qui et habeo reque nonumy. Placerat efficiantur vim ex, eam nulla maiestatis definitiones ei. Duo et inermis definitiones, an vix omittam offendit. At cum noster aliquando constituam. Suas eripuit qui eu, et eam copiosae dissentiet. Labores delicata ad sea, in soluta definitiones eam. Et mea solet nonummy.
Let us know what you think in the comments here or on Facebook.
Blogger Dynamic Views drop down menu
I really didn’t like the Link List solution so I knocked up a jump menu which takes up far less space. To add this to your own blog, simply add a new HTML/Javascript widget and paste in the following code (remember to change the URLs to your own blog).
If you have a better way of doing the same thing (i.e; some better JavaScript), please post in the comments.