Dylan Hildenbrand – Page 9 – closingtags </>

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.
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.


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.


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.

CSS jQuery

jQuery code to set 2 elements to same height

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);


Plugins Themes WordPress

What is WordPress?

WordPress. You’ve heard about it but you’re not entirely sure what it is. You’ve seen it online while searching for an easy way to setup a website for your business. Well, this is what WordPress is: a Content Management System (CMS).
What is a CMS?
A Content Management System is a platform that is designed to make handling a website easier. They can vary in how they work, but the general idea is that it gives the website owner a simple and easy way to update the website without a lot of technical knowledge. The owner simply logs in to the admin interface of the CMS, clicks a few menu items, and makes the appropriate changes. Simple as that. So where does WordPress fit in?
WordPress is quite possibly the most popular CMS available. This means that it has a large, supportive community. It also has the added benefit of many easy to use features because of this community.
If there’s a feature your website needs, and you’re not sure how to program, it’s not a problem. Someone else has probably already thought of it and done it. With WordPress, you can simply install plugins created by developers. Plugins have been created for just about anything you can imagine. Features range from sharing blog posts to Facebook and Twitter all the way to keeping your site as secure as possible. Plugins are there to make your life simple and they can be installed and setup with a few simple clicks.
The Blog
The blog is actually where WordPress got it’s start. It was developed as a blogging platform in 2003 but it’s become so much more than that since then. Now, it’s a CMS, but the blogging features still remain. Publishing a new post to your blog is just as simple as a few clicks and it allows any company to keep their website up-to-date with the latest information. There is nothing more infuriating for as a potential customer than seeing a website that hasn’t been updated in years. By using the blog, you can keep your customers (and potential customers) informed about what’s been going on lately.
Themes are another huge part of WordPress. They allow you to change the entire look and feel of your website in a matter of minutes. Themes can be downloaded from a number of sites including themeforest.net, wordpress.org, and even from the theme’s creators’ sites. Some of the most popular themes are free while some other less widely used (but higher end) themes are pay-to-use. The advantage of paying for a theme is that fewer other website will be using that same theme, you’re likely to get many more customization options, and you’re supporting a developer’s work.
But what if you can’t find the style you’re looking for in a theme? Just because you can’t find the look of your site in a theme, doesn’t mean it can’t be done. Many people (including myself) develop websites exclusively on top of WordPress. This allows you to have complete control over what is put onto your website. By hiring a developer, or building your website with an underlying WordPress framework, you can take advantage of WordPress’s powerful back-end while controlling exactly how your site is designed and laid out.
You may have heard about security flaws within WordPress itself, most recently, the 160,000 websites that were exploited to attack other sites. Some people claim that WordPress is more vulnerable to attacks than other platforms but their reasoning doesn’t quite hold water. Because WordPress is the largest and most widely used CMS available today, it stands to reason that anyone wanting to attack some websites, would go after instead of the smaller, lesser known sites. Take Microsoft’s Windows OS for an example. Why do so many Windows computers get viruses and not Apples? The chances of an attack being more successful on that platform are much higher, because it is so much more abundant. But Mac computers aren’t invincible either. So this same logic applies to websites as well. What it all comes down to, is being smart about keeping your website safe. After all, your wallet, bank account information, social security number, etc are all only as safe as you make them. By keeping your WordPress site up-to-date, not installing suspicious plugins, and being smart about your passwords, you can keep your WordPress site just as safe as any other site.
So now you know just enough about WordPress to be dangerous. There are infinitely many more resources out there and this blog is still young. For some ideas on how to get a quick site setup, you can check out wordpress.com or wordpress.org

CSS jQuery

HTML and CSS artwork

This is a very simple tool that lets users create artwork based on absolutely positioned HTML elements.

See the Pen gveJz by Dylan Hildenbrand (@Dilden) on CodePen.

jQuery Parallax

Scrolling Shadows

This plugin is derived from the same idea that was posted here, except in a much simpler form and using HTML5 to control the shadow attributes.
The jQuery looks like this:
function calculateShadow(object){

/* 12/5/13 Dylan Hildenbrand */

var blur = object.data(“blur”);
var spread = object.data(“spread”);
var xpos = object.data(“xpos”);
var dir = object.data(“direction”);

var ypos = null;
ypos = (jQuery(window).scrollTop() / object.data(‘speed’));
else {
ypos = -(jQuery(window).scrollTop() / object.data(‘speed’));

object.css(“box-shadow”, xpos+”px “+ypos+”px “+blur+”px “+spread+”px rgba(0, 0, 0, 0.5)”);


var object = jQuery(“#object”);

jQuery( window ).resize(function() {

jQuery(window).scroll(function () {
<div id=”content” class=”site-content” role=”main”>
<!– Elements on object set parameters for box shadow
data-direction: move shadow up or down
data-blur: shadow blur
data-spread: shadow spread
data-speed: speed of shadow movement; less means faster
data-xpos: x-position of shadow
data-ypos: y-position of shadow
<div id=”object” data-blur=”10″ data-spread=”3″ data-xpos=”10″ data-ypos=”20″ data-speed=”8″ data-direction=”down”>
</div><!– #content –>


Live shadow effects on an element

So I got this idea while I was working on a site that used some parallax effects. I thought, “wouldn’t it be cool to be able to change the box-shadow on an element as you scroll past it?” It would give the illusion of the users point of view being a light source that was shining on the page. Well I told a talented friend about this idea and before I could even grasp how to achieve this, he had it all whipped up! But he did it in an even better way than I had previously thought. Take a look at the jsfiddle and see for yourself.

Plugins WordPress

Edit Hopper

The purpose of this plugin is to allow WordPress admin’s to more easily navigate through child and parent pages. This plugin will create a widget in the WordPress admin interface on a Page Edit screen. It will show any child or parent pages and allow you to navigate to those pages by simply clicking the link for that page. The .zip can be downloaded here. Similarly, you can take the following code and copy it into your theme’s functions.php file.
function edit_hopper_main(){
echo “<div class=’ultimate-container’>”;
echo “<div class=’hopper-title’><strong>Click a page to go to the edit page</strong></div></br>”;

$current = get_post($id);
$parvar = $current->post_parent;
if($parvar) {
echo “<div class=’hopper-parent-link’><a href='” . get_edit_post_link( $parvar) . “‘>”
. get_post($parvar)->post_title . “</a></div>”;

echo “<div class=’hopper-current-link’>”.get_post( $id)->post_title. “</div>”;
$args = array(
‘post_type’ => ‘page’,
‘child_of’ => (get_post($id)->ID));
$children = get_pages($args);
foreach ($children as $child) {
echo “<div class=’hopper-child-link’><a href='” . get_edit_post_link($child->ID) . “‘>”
. get_post($child->ID)->post_title . “</a></div>”;

echo “</div>”;

function edit_hopper_custom_box() {
$screens = array( ‘post’, ‘page’ );

foreach ( $screens as $screen ) {

__( ‘Edit Screen Page Hopper’, ‘edit_hopper_textdomain’ ),
add_action( ‘add_meta_boxes’, ‘edit_hopper_custom_box’ );