NinjaChicks - Webdesign

Using favicons for your website or web application is a nice and handy thing.

Search the internet for a favicon generator
Add your image and let it create you a bundle of favicons

HTML

Theme Color

May 29, 2021

To adjust the theme color of your website on a mobile phone, just add the following meta tag to your HTML <head>:

<meta name="theme-color" content="#000000">

The color given in “content” will be used as theme color of your website.

HTML

SVG polygons

Apr 06, 2021

Create beautiful backgrounds or forms you need with the <svg> tag using the viewBox:

viewBox values: “ min-width min-height width height ”

<svg viewBox="0 0 2000 280" preserveAspectRatio="none" width="100%" height="280">
   <polygon points="0,280 2000,280 2000,20"
            style="fill:#f9f0e6; opacity: .65"/>
</svg>

HTML

Checkbox or radio button with clickable label

Mar 27, 2021

To make the label of a checkbox or radio button clickable, you can either -

Wrap a <label> tag around the input:
<label><input type="checkbox" name="checkbox" value="value">some text</label>

or
Use the id of the input field and make it match the for attribute of the label, like so:
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">some text</label>

CMS

WP update order

Mar 24, 2021

Keeping your WP site updated is very important.

To minimize incompatibility problems when updating plugins or your WP version itself, follow this order:

CSS

div within div positioning

Mar 21, 2021

Want to position a div within another div, for example in the bottom right corner?

outer div: set position: relative;
inner div: set position: absolute; and then with top, bottom, right, left where you want to place it

This also works if the outer div is part of a flex-box.

CMS

WP Child Theme

Feb 24, 2021

Using a child theme is a very smart thing. This way all your extra CSS is saved within the child theme, meaning if the main theme's updated your child theme won't be changed but stays the same. Besides, it's a lot cleaner and better organized. The easiest way's probably to use a plugin for it - some kind of child theme generator.

Hard to crash something on purpose, but still a good practice if you want to knkow how to restore your WP website. I literally deleted everything including the database on the hoster's side, after making a fresh backup.

Here's what I did to restore everything:

Creating a full backup of your WP installation is quite easy:

navigate into your WP folder (best to use a ftp program)
copy all 3 WP folders (wp-content, wp-includes, wp-admin) and all the files in the root folder
navigate to your phpMyAdmin and export the database

That's it - so, basically, a WP backup consists of a database backup and a backup of all WP files.

CMS

WP Firsties

Feb 24, 2021

After having installed a fresh WP in one of your website folders, go through the following list:

WP settings (paths, timezone, SSL settings, etc.)
PHP version check: if the PHP version is outdated, check the PHP settings of your domain (via your hoster) and change the version there to the latest one
database settings: phpAdmin, wp-config