How to Install WP-Backgrounds Lite Plugin, Manually
How to install the plugin and get it working.
Upload wp-backgrounds-lite to the /wp-content/plugins/ directory or use the WordPress plugin installer to install the plugin.
Activate the plugin through the ‘Plugins’ menu in WordPress
We do our best to make WP-Backgrounds Lite/WP-Backgrounds II compatible with all available wordpress themes. Unfortunately not all theme authors take care of coding standards and some of them even use weird html structures to build their themes. WP-Backgrounds Lite/WP-Backgrounds II adds two new layer to your website which will take care of the background slider/image and the pattern/link which covers this background. Thus you need to make sure that our plugin can add these two layers to your website without breaking the content area (where all your text paragraphs, images, etc. can be found). Actually there’re two worst case scenarios:
a) The background and pattern layers cover your text/content area und you see the background but you can’t see any text. This happens when the background layer overlaps the content area.
b) You can’t see the background and/or pattern layer but the text/content layer. This happens when the background layer is overlapped by all other layers including the body layer.
We’ve added 4 options which will help you to get our plugin running with any well coded theme. However, some features (i.e. the fullsize background link) will not work with all themes. It depends on their structure and layout. The best themes for WP-Backgrounds II are boxed themes. When you’re using a boxed theme the content area does not cover the entire screen but just a specfic area of the screen. You can see the background layer on the left/right/bottom/top and i.e. your user can see the video and click on the link which is overlaps the background layer.
If you’re using a fullwidth layout/theme instead then it will be a bit harder to use WP-Backgrounds Lite/WP-Backgrounds II with this theme because you need to change the background of the content area to a semi-transparent background (eg use a rgba color as background color or use semi-transparent png or gif images) and you can’t apply a fullscreen link to the images. WP-Backgrounds Lite/WP-Backgrounds II offers an option to display the links as small icons though which allows you to use the link features with these themes too though.
Let’s explain the 4 options:
1) Custom z-index of the background layer: This option allows you to adjust the z-index value of the background layer. The z-index value tells the browser which priority the layer has compared to other layers. Higher priority means that the layer will overlap other layers, lower means that other layers will overlap this layer. The z-index value can be negative and positive – i.e. -999 and 999 are valid values. During our tests we found out that -1 for the background layer is a sensible value and that it will work in most cases. Values under -1 (like -2, -3, etc.) will probably break the pattern/link layer because WP-Backgrounds Lite/WP-Backgrounds II calculates the z-index of this layer automatically by adding +1 to the background layer. Therefore i.e. the value -2 for the background layer will result in -1 for the pattern/link layer. However -1 is lower than 0 and this is the standard z-index value of all elements without a specific z-index value. Thus the risk is high that one or more elements will overlap the pattern layer and that the background won’t be clickable. I’d suggest to keep the value for the background layer with -1 or use any hihger value but do not use a lower value unless you know what you’re doing or if you don’t want to use the fullscreen background link feature.
2) Content container id or class: This option allows you to specify the content container element. It’s important for WP-Backgrounds Lite/WP-Backgrounds II to know it because if the pattern and/or the background overlaps your content WP-Backgrounds Lite/WP-Backgrounds II gives you an option to increase the z-index value of the content container. The result will be that the content container gets a higher priority and it will overlap the background again. The layer structure will be “Content Container/Area” > “Pattern” > “Background”. It’s hard to say how this container element is called in your case because there’re no standards. Most theme authors use a div with the id “wrapper” or class “wrapper” – in this case you’d need to enter “#wrapper” (for the id) or “.wrapper” (without “”) for the class. If you need any help to locate the id/class of the container element just contact us and we’ll help you asap or ask the theme author for help. If you’re an advanced user or web designer you can also use FireBug or any other web developer console to locate the right element.
3) Custom z-index of the content container layer: This option is pretty self explaining – you need it if the background and/or the pattern layer overlap the content area. I’d insert a value between 1-5 which should give you good results. If it doesn’t work try to increase it to a high value like 999 or even 9999.
4) Custom position of the content container: During our tests we noticed that some theme developers do not add a position to their container element which can cause troubles because i.e. the z-index value for the content container won’t work. Basically you’ll notice this issue if the z-index values don’t have any effect – so i.e. if the patterns always overlap the content area even if the background layer is set to -999 and the content container layer to 999. In this case you probably need to define a position for your content container. In most cases (probably 98%+) the right position value will be “relative” (enter it into the field without the “” signs) but maybe you need to use “absolute” or “fixed” in your case (enter it without “”).
Video
Plugin Not Working?
If any errors or problems with the plug-in then write comments.
