Dylan Hildenbrand – Page 9 – closingtags </>
Categories
Plugins Themes WordPress

Custom Admin Toolbar in WordPress

I spend a lot of time on StackOverflow, as most people in any programming field do. Well, when I get time, I like to try and answer questions to give back to the community. Sometimes, I can be helpful. Not always, but sometimes.
Yesterday was one of those days. A question came up, about creating a custom interface with the WordPress admin bar. Seeing as how I’d never tried this, I thought I’d give it a shot and figure it out.

After being sidetracked by actual work, I finally got to work on the question and came up with a solution.
add_action(‘wp_before_admin_bar_render’, ‘change_admin_bar’,999);

function change_admin_bar() {
global $wp_admin_bar;
$wp_admin_bar->remove_node(‘edit’)

$args = array(
‘id’ => ‘edit’,
‘title’ => ‘Edit Backend’,
‘href’ => get_edit_post_link(),
);

$wp_admin_bar->add_node($args);
}
This code, when placed in the functions.php file of your theme, will remove the ‘Edit Post’ button from the admin bar, and then replace it with a button labeled ‘Edit Backend.’ It’s a super simple piece of code and there’s tons more that can be done with this kind of thing. You can tweak your admin toolbar to your heart’s content.
If you’re looking to do more than this, you can always go to the Codex to get more info or here.
Oh! And this is the link to Stack Overflow thread.

I don’t get to be useful on that website too often as there are so many brilliant minds, it’s easy to get cluttered.

Categories
jQuery

Code School

I know it’s been a while since I’ve written anything here and I really don’t have any excuse other than I got lazy. But this is a short, quality post that I’m writing on my phone while my wife is shopping. How cool is that?
Anyways, if you click this link, you can get two free days of Code School. That’s right. Free. They have excellent courses on jQuery, Ruby, Git, and a lot of other developer tools. So check it out.

Categories
CSS

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
CSS

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
CSS

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.

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

});

Categories
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.
Plugins
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
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.
Security
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

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

Categories
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;
if(dir==”down”){
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)”);
}

jQuery(document).ready(function(){

var object = jQuery(“#object”);
calculateShadow(object);

jQuery( window ).resize(function() {
calculateShadow(object);
});

jQuery(window).scroll(function () {
calculateShadow(object);
})
});
The HTML:
<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”>
obj
</div>
</div><!– #content –>

Categories
jQuery

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.