Recent Updates Page 2 Toggle Comment Threads | Keyboard Shortcuts

  • Jay Versluis 6:21 pm on April 1, 2014 Permalink | Reply
    Tags:   

    Categories: Bookmarks ( 16 )

    Excellent visual gradient generator for your own CSS classes

     
  • Jay Versluis 5:33 pm on March 28, 2014 Permalink | Reply
    Tags: , eMember   

    Categories: Dreamweaver ( 12 )

    How to target a specific row in a table via CSS 

    This week I needed to make use of another CSS Pseudo element which is – like many of its colleagues – a rather sharp tool in the CSS toolbox.

    I was using the eMember plugin for a membership site and wanted tweak the signup form. By default it looks like this (I’ve already removed a rather ugly looking border from the table):

    Screen Shot 2014-03-28 at 17.12.01

    The site I’m working on will provide a free membership, but that’s a technicality that users can’t change – and let’s face it the entire line reading “Membership: Free” could do with vanishing.

    Rather than hack core files, I was able to override it with a CSS tweak and make it disappear. The problem is that this particular row in the table doesn’t have a class or ID to reference it.

    CSS Pseudo Element nth-child to the rescue: with it, we can target a specific occurrence of the table row element (in our case, the fourth one down). Here’s how:

    #wp_emember_regoForm table tr:nth-child(4) {
    	display:none; 
    }

    This looks cryptic, I know – let me explain what’s happening here.

    First we have an ID to target the specific area which is #wp_emember_regoForm. That’s the entire registration form though. In it, we drill deeper into table (which is the table shown above), and in it we have tr and td elements. td is a single cell, whereas tr is a whole row so we choose tr. Those are standard HTML elements.

    But we don’t want to target every tr element in the table, we only want to target the 4th one down, hence we specify tr:nth-child(4). Had it been the second one, we would have said tr:nth-child(2).

    Now all we do is set its display property to none, making it vanish without a trace. Here’s the final result – as if it never happened:

    Screen Shot 2014-03-28 at 17.24.08

    The nth-child selector can do other funky things, and you probably have seen it in action. Ever wondered how designers can make every other row in a table look slightly darker? Instead of a number, they use “odd” or “even”, targeting every other cell (starting with the first or second one):

    table tr:nth-child(even) {
    	background-color: #ddd;
    }

    nth-child even works with formulas, and of course you don’t have to target a table. Imagine making every other p tag disappear, or style every 3rd link in a different colour.

    Have fun experimenting ;-)

     
  • Jay Versluis 5:15 pm on March 28, 2014 Permalink | Reply
    Tags:   

    Categories: Plesk, Podcast ( 32 )

    How to replace an Amazon EC2 instance running CentOS and Plesk 

    Apple_Podcast_logoIn this video I will show you how you can replace a running EC2 instance with a larger one. You may want to do this if you find that you need bigger and better hardware to serve your website, or to move from a development system to a more powerful production system.

    In this example my EC2 instance is an M1 Small which hosts a single WordPress website with about 500-700 hits per day. In the screencast I’m replacing it with an M3 Medium instance which really isn’t big enough to cope with the traffic.

    I have since found that a C3 Large is a better fit. The total downtime to perform this depends on how big your current instance is. You can bring up a larger instance alongside a smaller one and then swap the Elastic IP over for minimum downtime.

    Links referenced in this video:

    If you have any questions, please leave a comment.

     

     
  • Jay Versluis 7:12 pm on March 26, 2014 Permalink | Reply  
    Categories: Linux, MySQL, Plesk ( 40 )

    How to log into MySQL as root user in Plesk 

    Plesk-LogoYou may have noticed that there is no MySQL root user on servers running Plesk. That’s because Plesk renames this user into “admin” by default – for security reasons.

    The password for the admin MySQL account is the same as for the Plesk Panel admin account.

    Even so, when you try to login to MySQL – remotely or locally – you may be puzzled to find that your admin password doesn’t seem to work. Let me assure you of your sanity and your keyboard skills: it’s because Plesk encrypts the password in the database.

    It is the encrypted version that you must present to MySQL, not the clear version. For example, if your password was indeed “password”, then the following command will not grant you access to MySQL:

    mysql -u admin -ppassword

    You can check your unencrypted password by issuing the following command (on Linux servers):

    /usr/local/psa/bin/admin --show-password

    In our example, it will indeed show “password” – so why doesn’t it work? It’s because that command will unencrypted the password for us. MySQL however needs the encrypted version. Here’s how we can extract this from Plesk:

    cat /etc/psa/.psa.shadow
    
    // will show you something like
    $AES-128-CBC$w78TYgIfzDsKjOvEqkg/nQ==$O4xPUtsQe1TI3P601wQgYw==

    This will give you a weird looking output as shown above. Believe it or not, that’s your MySQL admin password!

    If you’re already logged into your server as root and want to issue a MySQL shell command, you can login to MySQL like so:

    mysql -uadmin -p`cat /etc/psa/.psa.shadow`
    
    Welcome to the MySQL monitor.  Commands end with ; or \g.
    Your MySQL connection id is 4231837
    Server version: 5.5.36-cll-lve MySQL Community Server (GPL) by Atomicorp
    
    Copyright (c) 2000, 2014, Oracle and/or its affiliates. All rights reserved.
    
    Oracle is a registered trademark of Oracle Corporation and/or its
    affiliates. Other names may be trademarks of their respective
    owners.
    
    Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
    
    mysql>

    If you’re attempting a remote connection to MySQL then simply paste that cryptic looking password you got in the earlier step.

     
  • Jay Versluis 8:37 am on March 26, 2014 Permalink | Reply
    Tags:   

    Categories: WordPress ( 77 )

    How to remove the Jetpack admin menu from subscribers 

    JetPackThe Jetpack admin menu is visible to everybody, including subscribers. This may not be what you want. You may even want to hide it from other admins, perhaps once you’ve given a site over o a client and you don’t want him to switch off vital functionality by accident.

    Here’s how you can hide the Jetpack admin menu in your WordPress back end.

    Hide Jetpack from Non-Admins (including Subscribers)

    If you would like your admin users to see Jetpack and hide it from everyone else, add this to your theme’s function.php file:

    function pinkstone_remove_jetpack() {
    	if( class_exists( 'Jetpack' ) && !current_user_can( 'manage_options' ) ) {
    		remove_menu_page( 'jetpack' );
    	}
    }
    add_action( 'admin_init', 'pinkstone_remove_jetpack' );
    

    Here we test “is Jetpack actually running”, and if it is, “is this user an administrator”. If all signs point to yes then we’ll remove the menu page. You can replace “pinkstone” with another prefix of course.

    Feel free to change the user capabilities to something else if you’d like to make Jetpack visible to authors or editors. You can read more about those options here:
    - https://codex.wordpress.org/Roles_and_Capabilities

    You can also achieve this functionality by installing a super small plugin courtesy of Jeremy Herve, lead author of Jetpack:
    - http://wordpress.org/support/topic/how-do-i-disable-jetpack-from-subscribers

    Hide Jetpack from everybody

    Here we remove the check for capabilities altogether, hiding Jetpack from all users:

    function pinkstone_remove_jetpack() {
    	if( class_exists( 'Jetpack' ) ) {
    		remove_menu_page( 'jetpack' );
    	}
    }
    add_action( 'admin_init', 'pinkstone_remove_jetpack' );
    

    I have included this functionality in my Zen Dash plugin with the latest version 1.4, where you can now hide Jetpack from admins and other users at the flick of a switch (and bring it back just as easily):

    Have fun, and happy hacking ;-)

     
  • Jay Versluis 11:33 pm on March 25, 2014 Permalink | Reply
    Tags:   

    Categories: Dreamweaver ( 12 )

    How to replace and add HTML text elements with CSS 

    CSS-LogoIn some circumstances you may can replace HTML text elements via CSS. This is useful if you don’t have access to the source files, or if you want to override text in a Child Theme’s stylesheet.

    There are several approaches to this conundrum, I’ll show you two of them. Both require that you have a class, ID or element that you can target. You then either amend more text to it, or replace the existing text completely via the CSS pseudo-elements before and after.

    This isn’t always successful though as the original styling may not survive the surgery. Let’s take a look.

    Option 1: The Visibility Hack

    Here’s the easiest way to replace something. In this example I’ll target a class called myelement:

    .myelement {
    	visibility: hidden;
    }
    
    .myelement:before {
    	content: 'This is new content, replacing existing content';
    	visibility:visible;
    }
    

    What’s happening here? First we grab hold of our element and set its visibility to hidden, making it vanish. Next we’ll add our own content before the original, thereby replacing it, and make it visible again.

    Instead of “visibility” you can also try “display: none” and “display: block”.

    If I had wanted to leave the original words and add something else at the end, I can do this:

    .myelement:after {
    	content: '. Bring it on!';
    }
    

    Or if you’d like to insert something before the original I can use this:

    .myelement:after {
    	content: 'Check this out: ';
    }
    

    The original styling will stay intact, however elements that follow the text (for example hyperlinks) may be destroyed when you replace text. Be as specific as possible when targeting text elements.

    Option 2: The Out-Of-Vision Hack

    A very creative approach is to avoid changing the visibility of existing text by moving it our of vision and then bringing it back. Sometimes changing attributes such as “visibility” or “display” can cause trouble when we try to restore them.

    Here we’re doing just that:

    .myelement {
    	text-indent: -9999px;
    	line-height:0;
    }
    
    .myelement:after {
    	text-indent:0;
    	content:'Welcome Back!';
    	display:block;
    	line-height: initial;
    }
    

    This will completely remove my original text and replace it with “Welcome back!”, hopefully in the same styling as before (but then, it may not survive either).

    CSS isn’t really made for this, but it’s powerful enough and works in many cases. Try it out!

     
  • Jay Versluis 8:50 am on March 20, 2014 Permalink | Reply
    Tags:   

    Categories: PHP ( 23 )

    How to switch between several PHP versions in MAMP 2.x 

    mamp logoSometimes you need to test your projects against multiple versions of PHP.

    If you’re using MAMP that’s fairly easy to do: head over to the MAMP Start Screen, select Preferences and see two versions to choose from.

    Here I’m using MAMP 2.2 (even though 3.x has been released already) and I have PHP 5.2.17 and PHP 5.5.3.

    When I switch to the other version MAMP restarts and I can refresh my browser to see my project running on the other PHP version.

    Screen Shot 2014-03-20 at 08.31.06

    Screen Shot 2014-03-20 at 08.31.12

    That’s all good if I actually needed either version – but sadly 5.2.x is too old for me, and 5.5.x doesn’t quite work and is a bit too cutting edge. I need it to reflect my production environment.

    So what is a boy to do?

    (More …)

     
  • Jay Versluis 10:59 am on March 18, 2014 Permalink | Reply
    Tags: filesize, round   

    Categories: PHP ( 23 )

    How to check the size of a file in PHP 

    PHP-IconPHP has a handy function called filesize() which can help us display how big a file is.

    It does this in bytes by default, but with a bit of tinkering we can easily convert this into kilobytes or megabytes.

    Let’s first see how this works in bytes:

    $file = '/path/to/your/file';
    $filesize = filesize($file);
    
    echo "The size of your file is $filesize bytes.";
    

    Converting bytes into kilobytes works by dividing the value by 1024. PHP is very accurate and will give you 12 decimal digits – perhaps a little overkill. To avoid this we can make use of the round() function and specify how many digits of accuracy we’d like to display:

    $file = '/path/to/your/file';
    $filesize = filesize($file); // bytes
    $filesize = round($filesize / 1024, 2); // kilobytes with two digits
    
    echo "The size of your file is $filesize KB.";
    

    To display the value in megabytes we’ll simply divide by 1024 twice:

    $file = '/path/to/your/file';
    $filesize = filesize($file); // bytes
    $filesize = round($filesize / 1024 / 1024, 1); // megabytes with 1 digit
    
    echo "The size of your file is $filesize MB.";
    
     
  • Jay Versluis 10:00 am on March 18, 2014 Permalink | Reply
    Tags: pathinfo, scandir   

    Categories: PHP ( 23 )

    How to list a directory in PHP and only show ZIP files 

    web-find-iconI wanted to list a directory in PHP. At the same time, I wanted to make sure only files are listed – not subdirectories or dot directories.

    More specifically, I only wanted to include files with the ending .zip.

    Two tools come to the rescue here:

    • scandir() to list the directory and give us an array
    • and the super handy pathinfo() to check a file extension

    Here’s how I did it

    function list_zipfiles($mydirectory) {
    	
    	// directory we want to scan
    	$dircontents = scandir($mydirectory);
    	
    	// list the contents
    	echo '<ul>';
    	foreach ($dircontents as $file) {
    		$extension = pathinfo($file, PATHINFO_EXTENSION);
    		if ($extension == 'zip') {
    			echo "<li>$file </li>";
    		}
    	}
    	echo '</ul>';
    }
    

    Call the function with the directory of your choice – give it a full path like /var/your/directory. Next scandir() creates an array of files and directories which we iterate over with a foreach loop. I’m also formatting the output as an unordered list, hence the presence of some HTML elements in the echo statements.

    The first thing we’ll do in the loop is to have a look at each file’s extension. If it is in fact “zip” then we’d like to list it. Other elements won’t show up.

    I hope it helps ;-)

     
  • Jay Versluis 7:30 pm on March 17, 2014 Permalink | Reply  
    Categories: PHP ( 23 )

    How to test which HTML form button was pressed in PHP 

    execImagine you have a HTML form with several values and two buttons at the bottom. One could say “Do This” and the other “Do That”. How do you know which one was pressed by the user?

    It’s fairly easy – but I keep forgetting this time and time again. We do this by accessing the name attribute of the HTML button in PHP.

    Consider this HTML form:

    <form>
    <input type="submit" name="button1" class="button-primary" value="Do This" />
    <input type="submit" name="button2" class="button-secondary" value="or Do That" />
    </form>
    

    The button classes are WordPress standard “blue” and “grey” button layouts, and the value is what’s written on the button. The secret sauce however is in the name fields here.

    Back in PHP when the form is submitted we can access the $_POST variable which an array of values we’re getting back from the form. We can access them like this:

    if (isset($_POST['button1'])) {
      // Do This was pressed
    } else if (isset($_POST['button2'])) {
      // Do That was pressed
    }
    

    You can access the rest of your form’s elements in the same way (i.e. tick boxes, select options, text fields, etc).

     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel
Google+