Recently, I’ve been trying to find ways to speed up my development time, and I came across a great video showcasing Vagrant. I could spend a lot of time writing a bunch of mumbo jumbo here for you to read, or you could just watch the video that explains it a thousand times better than I would ever be able to.
Category: CSS
It’s been pretty slow on the web development front for me lately, but I have discovered something new and interesting. It’s called DemocracyOS. What is DemocracyOS? Oh, I’m so glad you asked. Well it’s an open-sourced platform that aims to bring democracy back into the hands of the people in a way that makes voting on almost anything, very simple.
Just recently, we had some elections here in the US (Nov. 4th, 2014) and supposedly, Republicans took back control of both the House and the Senate because so many young people didn’t turn out to vote. What DemocracyOS intends to do, is bring the voting to you. No more waiting in lines at the polls, trying to get away from work, attempting to figure out where you’re supposed to go to vote, or filling in the circles ever so perfectly on an outdated technology (paper).
It’s supposed to be as simple to install and use as WordPress, although I haven’t quite gotten that far yet. I’ll keep the blog updated with my findings though. Check it out at Github here or the main site here.
And if you want to chat about this stuff, hit me up on Twitter @awebdevguy.
UPDATE! Google removed the ability to host web pages within Google Drive so my simple and free hosting solution provided here (plus the link to the files) is dead.
I decided a while back that I could do my home page (in browser) better than just the standard google.com page. I tailored an html file especially to my needs, and added in some flair. The page will automatically grab the most recent top post from the subreddit /r/EarthPorn. This subreddit basically just supplies cool wallpapers all day. I hosted the file in Google Drive so that I could sync it across my work computer and home computers in Google Chrome. I used this plugin to open this page on a new tab.
So the actual page is here and if you’d like to download the files and tweak it to however you see fit, you can get those here. Let me know @awebdevguy if you do anything cool, or come up with a better way of doing what I did. I know it can be done better.
If you want to replace the WordPress logo on your admin login page with your own custom image, you can do it with just a couple simple lines in your functions.php file.
add_action(“login_head”, “my_login_head”);
function my_login_head() {
echo “<style>
body.login #login h1 a {
background: url(‘”.get_bloginfo(‘template_url’).”/images/logo_login.png’) no-repeat scroll center top transparent;
height: 181px;
width: 269px;
padding:0 25px;
}
</style>”;
}
Simply upload your file to the proper path and adjust the CSS accordingly.
WordPress is great, but sometimes, when you’re writing a blog post, the WSIWYG is just lacking certain features. Say you want to format your content and make things a little cleaner. Like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel urna ut elit faucibus semper. Morbi dignissim ex enim, et consectetur justo blandit vel. Etiam lobortis nulla vel tellus dictum dignissim. Fusce purus lectus, luctus vitae imperdiet ac, lobortis quis urna. Integer id venenatis quam. Cras ac neque sit amet urna consequat pellentesque.
Nunc vitae laoreet purus. Ut egestas, metus eget accumsan fringilla, erat justo congue tellus, pulvinar vehicula nunc enim nec augue. Praesent gravida blandit risus dapibus pharetra. Proin consequat et nisl quis tincidunt. Proin at massa odio. Cras malesuada porta ultricies. Fusce tristique blandit leo at tempus. Curabitur tincidunt ex quis lacus sodales ornare.
By the way, you can get copy/paste lorem ipsum from http://www.lipsum.com/feed/html
Well, if this is something you’d like to be able to do, you can make a couple quick edits in functions.php and style.css of your theme. The CSS code looks like this:
/*
* Fluid Columns
* —————————————————————————-
*/
.one_half{ width:48%; }
.one_third{ width:30.66%; }
.two_third{ width:65.33%; }
.one_fourth{ width:22%; }
.three_fourth{ width:74%; }
.one_fifth{ width:16.8%; }
.two_fifth{ width:37.6%; }
.three_fifth{ width:58.4%; }
.four_fifth{ width:79.2%; }
.one_sixth{ width:13.33%; }
.five_sixth{ width:82.67%; }
.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth{ position:relative; margin-right:2%; padding-right:2%; float:left; }
.last{ margin-right:0 !important; padding-right:0 !important; clear:right; }
.clearboth {clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;}
And this is what you will put in the functions.php:
function columns_one_third( $atts, $content = null ) { return ‘<div class=”one_third”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘one_third’, ‘columns_one_third’);
function columns_one_third_last( $atts, $content = null ) { return ‘<div class=”one_third last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘one_third_last’, ‘columns_one_third_last’);
function columns_two_third( $atts, $content = null ) { return ‘<div class=”two_third”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘two_third’, ‘columns_two_third’);
function columns_two_third_last( $atts, $content = null ) { return ‘<div class=”two_third last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘two_third_last’, ‘columns_two_third_last’);
function columns_one_half( $atts, $content = null ) { return ‘<div class=”one_half”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘one_half’, ‘columns_one_half’);
function columns_one_half_last( $atts, $content = null ) { return ‘<div class=”one_half last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘one_half_last’, ‘columns_one_half_last’);
function columns_one_fourth( $atts, $content = null ) { return ‘<div class=”one_fourth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘one_fourth’, ‘columns_one_fourth’);
function columns_one_fourth_last( $atts, $content = null ) { return ‘<div class=”one_fourth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘one_fourth_last’, ‘columns_one_fourth_last’);
function columns_three_fourth( $atts, $content = null ) { return ‘<div class=”three_fourth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘three_fourth’, ‘columns_three_fourth’);
function columns_three_fourth_last( $atts, $content = null ) { return ‘<div class=”three_fourth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘three_fourth_last’, ‘columns_three_fourth_last’);
function columns_one_fifth( $atts, $content = null ) { return ‘<div class=”one_fifth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘one_fifth’, ‘columns_one_fifth’);
function columns_one_fifth_last( $atts, $content = null ) { return ‘<div class=”one_fifth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘one_fifth_last’, ‘columns_one_fifth_last’);
function columns_two_fifth( $atts, $content = null ) { return ‘<div class=”two_fifth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘two_fifth’, ‘columns_two_fifth’);
function columns_two_fifth_last( $atts, $content = null ) { return ‘<div class=”two_fifth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘two_fifth_last’, ‘columns_two_fifth_last’);
function columns_three_fifth( $atts, $content = null ) { return ‘<div class=”three_fifth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘three_fifth’, ‘columns_three_fifth’);
function columns_three_fifth_last( $atts, $content = null ) { return ‘<div class=”three_fifth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘three_fifth_last’, ‘columns_three_fifth_last’);
function columns_four_fifth( $atts, $content = null ) { return ‘<div class=”four_fifth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘four_fifth’, ‘columns_four_fifth’);
function columns_four_fifth_last( $atts, $content = null ) { return ‘<div class=”four_fifth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘four_fifth_last’, ‘columns_four_fifth_last’);
function columns_one_sixth( $atts, $content = null ) { return ‘<div class=”one_sixth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘one_sixth’, ‘columns_one_sixth’);
function columns_one_sixth_last( $atts, $content = null ) { return ‘<div class=”one_sixth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘one_sixth_last’, ‘columns_one_sixth_last’);
function columns_five_sixth( $atts, $content = null ) { return ‘<div class=”five_sixth”>’ . do_shortcode($content) . ‘</div>’; } add_shortcode(‘five_sixth’, ‘columns_five_sixth’);
function columns_five_sixth_last( $atts, $content = null ) { return ‘<div class=”five_sixth last”>’ . do_shortcode($content) . ‘</div><div class=”clearboth”></div>’; } add_shortcode(‘five_sixth_last’, ‘columns_five_sixth_last’);
function columns_formatter($content) {
$new_content = ”;
/* Matches the contents and the open and closing tags */
$pattern_full = ‘{(\[raw\].*?\[/raw\])}is’;
/* Matches just the contents */
$pattern_contents = ‘{\[raw\](.*?)\[/raw\]}is’;
/* Divide content into pieces */
$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
/* Loop over pieces */
foreach ($pieces as $piece) {
/* Look for presence of the shortcode */
if (preg_match($pattern_contents, $piece, $matches)) {
/* Append to content (no formatting) */
$new_content .= $matches[1];
} else {
/* Format and append to content */
$new_content .= wptexturize(wpautop($piece));
}
}
return $new_content;
}
// Remove the 2 main auto-formatters
remove_filter(‘the_content’, ‘wpautop’);
remove_filter(‘the_content’, ‘wptexturize’);
// Before displaying for viewing, apply this function
add_filter(‘the_content’, ‘columns_formatter’, 99);
add_filter(‘widget_text’, ‘columns_formatter’, 99);
Now to use this handy feature, you basically say:
Your content goes here…..
Your content goes here…..
If you wanted three columns, you’d replace ‘one_half’ with ‘one_third’, four columns, you’d replace ‘one_half’ with ‘one_fourth, and so on. Just make sure your last column has the ‘_last’ appended to both opening and closing tags.
Mobile
This is a pretty great feature, but it does break down on mobile devices. So in the media queries of the theme, I find it best to simple break the columns, and set each section to full width. The .clearboth class in the CSS code has pretty much everything you need (but also some extra) so we’ll take a piece out of that and do this in our media queries.
@media screen and (max-width: 758px) {
.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth {
clear:both;
display:block;
width:100%;
}
}
This way, when the device screen gets to a smaller size, your columns will break into full width divs.
Source
Categories
Styling Scrollbars w/CSS
I came across this post while searching for a means of styling some scrollbars on a site I was working on recently. It seems, that styling the scrollbar specifically, ins’t a problem in certain browsers. Some though (Firefox and Opera) are a pain. I’ll cover those another time. For now, let’s just get Chrome and IE taken care of.
Internet Explorer
This is the CSS that you can apply to a particular element for Internet Explorer. Surprisingly, this should work with most versions of IE.
body{
scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}
And these are what each style is affecting:
Chrome (Webkit Browsers)
Now, those styles won’t carry over to Chrome. If you want to do that, you can use these pseudo elements:
::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button { background-color: #666; }
::-webkit-scrollbar-track { background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}
Those elements affect the scrollbars in like so:
Again, this information came from this blog. I’m simply re-hosting this information for the sake of sharing information. But if you’d like to buy me a beer, feel free.
Categories
Getting SASS to work with Sublime Text 2
This tutorial is essentially just going to be the same as this one so you can go read it there if you’d rather. I promise, I won’t be offended. After all, this is the tutorial I used.
Basically, you’ve got SASS installed and ready to go after reading this post. Now, you want to use it with Sublime Text 2 so everything is super easy.
First things, first. Open package control, and install ‘SASS’
Once you install that plugin, you’ll notice SCSS files look fine, but SASS files aren’t color-coded. You’re going to want to open a SASS file, click ‘View’, ‘Syntax’, and then ‘Open all w/current extension as -> SASS’.
Then install the SASS build plugin for Sublime. This plugin activates the keyboard shortcut ‘CTRL + B’ for building which is fine, but you’ll want to install the Sublime Save On Build plugin to make things even simpler. Basically, every time you save your files, it’ll handle everything you need it to and update your CSS so you can move it to your server.
Categories
Setting up SASS
SASS is pretty great. If you haven’t heard about it, you’re behind. Study up cause I’m not going to explain it in great detail but the just of it is, that it’ll make writing CSS much more clear and concise. You can learn about it here.
I use Linux Mint or Windows to develop on. There’s step by step instructions on how to do this on the SASS website but basically, all you’ll need to install ruby:
sudo apt-get install ruby1.9.1
then install SASS
sudo gem install sass
done. That’s SASS installed.
This is a little chunk of jQuery written to set a couple elements to equal heights. It has to take into consideration, the padding on the two elements. The two elements being set to equal heights are entry-content and sidebar_images.
$(window).load(function() {
var finalleft = $(‘.entry-content’).height();
var finalright = $(‘.entry-content’).height();
var padleft = parseInt($(‘.entry-content’).css(‘paddingTop’)) + parseInt($(‘.entry-content’).css(‘paddingBottom’));
var padright = parseInt($(‘.sidebar_images’).css(‘paddingTop’)) + parseInt($(‘.sidebar_images’).css(‘paddingBottom’));
if($(‘.sidebar_images’).height() < $(‘.entry-content’).height()){
var padtot = padleft – padright;
$(‘.sidebar_images’).height(finalleft+ padtot);
}
else {
var padtot = padright – padleft;
$(‘.entry-content’).height(finalright + padtot);
}
});