Author Archives: tabcom

CSS text-shadow outline effect for keeping text easy to read

When placing text over slider background images the text may be difficult to read. This is especially true if the background image is not blurred and contains both light and dark areas. If some of the slider images are dark, you would need to select a lighter color font and if some of the slider images are light, you would need to select a darker color font. This is not always possible.

The most elegant way of dealing with this problem is by using a text-shadow to create a text outline effect (horizontal offset and vertical offset are set to zero).

.title {
 color: #fff;
 text-shadow: 0 0 5px #000;
}

This will create a text shadow with a radius of 5 pixels.  It is not possible to specify the gradient in more detail; it will transition linear from the specified color towards full transparency.

To create a more pronounced outline you can stack a number of text shadow effects like so:

.title {
 color: #fff;
 text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000, 0 0 6px #000, 0 0 7px #000, 0 0 10px #000;
 }

or with colors inverted:

.title {
 color: #000;
 text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 0 6px #fff, 0 0 7px #fff, 0 0 10px #fff;
 }

It is also possible to create a neutral semi-transparent background color for the container ‘div’ using red-green-blue color codes with alpha for transparency (RGBA):

div#container {
  background-color: rgba(200,200,200,0.5);
}
CSS text-shadow outline effect for keeping text easy to read was last modified: June 9th, 2016 by tabcom

AccessPress Parallax – Background images do not appear correctly in IOS Safari and Chrome browser.

One workaround suggested is to add the below CSS in Appearance -> Theme Options -> Custom CSS tab.

.parallax-section {
     position: static !important;
 }

Another suggestion is to add the below CSS:

.ios .parallax-section {
    background-attachment: scroll !important;
}

When using the above fixes, the Overlay background (e.g. “Dark Black”, “Light White”, or “Black Small Dots”) will no longer work on Safari/Chrome on IOS devices.

Using WordPress 4.5.2 + IOS 9.3.2 Safari + Chrome 51.0.2704.64 parallax background images still do not appear correctly, especially in portrait mode.

AccessPress Parallax – Background images do not appear correctly in IOS Safari and Chrome browser. was last modified: June 9th, 2016 by tabcom

Koozali (SME server) WordPress permalinks

When you change the permalinks settings in WordPress, a new .htaccess file is automatically generated that will execute the correct Apache mod.rewrite rule.

However, Koozali (SME server) by default does not allow loading of .htaccess files as this is considered insecure.

To have Apache allow loading of .htaccess files in an ibay, use the following command:

db accounts setprop IBAYNAME AllowOverride All
signal-event ibay-modify IBAYNAME

Next, we can change the Permalinks setting in WordPress from “Plain” (http://yoursite.com/?p=123) to “Post-name” (http://yoursite.com/sample-post).

However, Koozali (SME server) Apache by default has 2 options disabled that need to be enabled for URL rewriting (= “Post-name” type permalinks) to work:

Options +FollowSymLinks
RewriteEngine On

The .htaccess file generated by WordPress looks something like this:

# BEGIN WordPress
 <IfModule mod_rewrite.c>
 RewriteBase /
 RewriteRule ^index\.php$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.php [L]
 </IfModule>
 # END WordPress

We can simply add the two required instructions like so:

# BEGIN WordPress
 <IfModule mod_rewrite.c>
 Options +FollowSymLinks
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.php$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.php [L]
 </IfModule>
 # END WordPress

It is recommended to change permissions to 640 (rw-r—– admin shared .htaccess) to prevent WordPress from overwriting this .htaccess file whenever Permalinks settings are (accidentally) changed.

If you want you can enable the FollowSymlinks option natively like so:

db accounts show [ibay]
db accounts setprop [ibay] FollowSymlinks enabled
signal-event ibay-modify [ibay]

You will still need to use a .htaccess file for the ReWriteEngine rules though.

Koozali (SME server) WordPress permalinks was last modified: May 14th, 2017 by tabcom