Colorize or tint an SVG image with CSS

This is a quick example of how you can tint an svg image even if it’s added to the page externally (it’s not an inline svg):

.mysvg{
    filter: invert(.5) sepia(1) saturate(10) hue-rotate(150deg);
}

Play with the hue-rotate value to get your preferred hue!

Increment number when creating multiple html elements using emmet

Sometimes you need to create many elements so that each one of them gets a unique, incrementing number. You probably already know about VS Code’s Emmet capabilities which let you type something like .myClass*5 to automatically create five divs with the class “myClass”. So the output of that would be:

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>

If you need a number that is incrementing, you can simply add a $ symbol to the command like this: .myClass$*5

That would result in the following output:

<div class="myClass1"></div>
<div class="myClass2"></div>
<div class="myClass3"></div>
<div class="myClass4"></div>
<div class="myClass5"></div>

If you need to copy and paste long lists of numbers, you can use the multi-cursor editing features of VS Code. If the lines on your clipboard match the number of lines of your multi-cursor selection before pasting, VS Code is smart enough to assume that you want to paste just one number from the clipboard into each line that has a cursor blinking.

Unable to enter your WordPress password when trying to log-in? Here is an easy solution.

I recently encountered a problem in which it was impossible to login to the WordPress backend/admin area since the password field was not accepting any input. The same problem occurred on all the browsers I tested it in. It seems like an update might have broken something in a theme or a plugin. Finally there was an easy solution to the problem:

Just open the developer tools of your browser, target the password input field and delete the bit where it says “disabled” from the source code (displayed typically on the right side of you browser window in the Developer tools panel). Now the form field takes input again and you are able to login and update your plugins/theme if needed.

Examples of Brackets plus the Emmet extension

Here’s how the Emmet extension for Brackets can really speed up your workflow:

-type #mydiv and hit tab to get <div id=”mydiv”></div>
-type lorem and hit tab to get lorem ipsum text
-type #container>.col-sm-4*3 and hit tab to get
<div id=”container”>
<div class=”col-sm-4″></div>
<div class=”col-sm-4″></div>
<div class=”col-sm-4″></div>
</div>

Restore a WordPress site with just the Mysql-database file

Here’s how to restore a WordPress site to a new WordPress installation, perhaps at another web host:

1. Create a database, a database user and assign the user to the database. If this is too much trouble, you can use a one click installer as long as you then delete the WordPress installation files (keep a copy of the wp_config-file though) via FTP and drop all the tables from the database (doing this will give you the basic database setup).

2. Download WordPress, unzip and upload the files to the server

3. Go to your web-address and run the installation

4. OPTIONAL: If you have a backup of your old theme, upload the theme folder into the wp-content –> themes -folder and upload the “uploads” folder inside “wp-content” as well.

5. You site should now be up and running!