Website Engineering With A Passion For Quality

Here’s a Bootstrap 4 Carousel with fade transition instead of a slide transition. I find carousels or sliders annoying due to the sudden and hurried transitions from slide/item to slide/item. Example shows the code for three items or slides. Excuse my echo() functions as this example is used in a WordPress theme where the Carousel renders on the front page or home page only. Edit to your specifications.

I have also included the additional CSS required to produce the fade transition effect. Also, my example includes Bootstrap captions. I do not care for captions on-top of carousel images, however, it’s demanded. So, in order to allow the text to be readable or not saturated by the background , I applied a background-color #000 to the container ID and opacity: 1; to .carousel img

It’s assumed bootstrap.css and bootstrap.jsis found in your assets directory. If not, add it of course and if you are using WordPress, add the required Bootstrap dependencies described above into your WordPress theme. How to do that is another topic. I’ll try to write about it.

Below is the HTML mixed with theme specific PHP:

        if ( is_front_page() || is_home() ) : ?>

        <!-- Carousel -->
        <div id="carouselBeadManRedding" class="carousel carousel-fade" data-ride="carousel" data-interval="5000">
            <ol class="carousel-indicators">
                <li data-target="#carouselBeadManRedding" data-slide-to="0" class="active"></li>
                <li data-target="#carouselBeadManRedding" data-slide-to="1"></li>
                <li data-target="#carouselBeadManRedding" data-slide-to="2"></li>
            <div class="carousel-inner">
                <div class="carousel-item active">
                <img class="d-block w-100" src="<?php echo $slider_one; ?>" alt="<?php echo $slider_one_alt; ?>">
                    <div class="carousel-caption d-md-block">
                    <h2><?php echo $slider_one_title; ?></h2>
                    <p class="lead"><?php echo $slider_one_text; ?></p>
                <div class="carousel-item">
                <img class="d-block w-100" src="<?php echo $slider_two; ?>" alt="<?php echo $slider_two_alt; ?>">
                    <div class="carousel-caption d-md-block">
                    <h2><?php echo $slider_two_title; ?></h2>
                    <p class="lead"><?php echo $slider_two_text; ?></p>
                <div class="carousel-item">
                <img class="d-block w-100" src="<?php echo $slider_three; ?>" alt="<?php echo $slider_three_alt; ?>">
                    <div class="carousel-caption d-md-block">
                    <h2><?php echo $slider_three_title; ?></h2>
                    <p class="lead"><?php echo $slider_three_text; ?></p>
        <?php endif; ?>

Below is the custom CSS

/* Carousel
----------------------------------- */
#carouselBeadManRedding {
    background-color: #000;
.carousel.carousel-fade .carousel-item {
    display: block;
    opacity: 0;
    transition: opacity ease-out 1.7s;
    left: 0;
    top: 0;
    position: absolute;
.carousel.carousel-fade {
    opacity: 1 !important;
.carousel.carousel-fade .carousel-item:first-child {
    top: auto;
    position: relative;
    transition: opacity ease-out 1.7s;
.carousel.carousel-fade .carousel-item:second-child {
    top: auto;
    position: relative;
    transition: opacity ease-out 1.7s;
.carousel-item .img-fluid {
    margin: 0 auto;
.carousel img {
    opacity: 0.5;
    filter: alpha(opacity=50);

I found this post on codeply to be very useful in helping me resolve some of the trouble I was having with transition CSS. Here’s a link Codeply Bootstrap 4 Carousel Fade Transition.

Happy Thanks Giving 2016

We’re celebrating Thanksgiving here at home in Redding, California on this last Thursday of November 2016. Just want to wish all of you a very Happy Thanksgiving! I hope you are in good health and near the ones you love. All the same for those that are beyond Thanks Giving, the world is a big place. On this day I extend my own thanks to you, recognizing you for all you have contributed to my world. Thank you!

It’s been a wild year. So much has changed. An amazing amount of good stuff happening and I can’t wait to see what 2017 brings. Anyway, I just want to say:

“I’m thankful for the friendships I’ve made over the past year through SteelBridge Media and the WordPress community. I’m also thankful for all the friends I’ve made via Twitter and other social venues. I have had the honor of meeting some of you and others I’m hoping to meet soon. I can’t tell you how appreciative I am of all the positive, productive and enlightening experiences we have fostered. Incredible! Let’s keep the love going!”

Thank you Keri Perla for being my cornerstone. You add the most to my life. I love you!

To all of you, no matter what you are doing today, I am thankful for you in my life!

Warning: Fatal Error

Plugin Trouble: WordPress

A fairly common occurrence users of WordPress experience is known as the “white screen of death”. Well, it’s not death and really it’s not the end of the world either. Although some of you panic when your website decides to stop working.

Typically the white screen is accompanied by a couple paragraphs of text signaling you with “Warning” and “Fatal Error”. This is happening because WordPress can’t load the contents of your website. If you look at the statements maybe you can see the word ‘plugins’ located in the file directory string. I have included a photo below where I have circled the file folder in question.

fatal error plugins

Most fatal errors are associated with a plugin issue.

So, if you see something like whats pictured above, I’ll share with you the solution to getting your site back.. alive and functioning.

Step 1.

Use your code editor, IDE ( Integrated Development Environment) to FTP (File Transfer Protocol) into your sites root directory. Not sure about this? Call your hosting company. I know of one hosting company that offers great support for customers like you. Find them here SteelBridge Media. I use Coda and Dreamweaver. Atom is another one that I like. Textmate, Sublime are a couple others that have served me well. I stick with the two spendy editors, Coda and Dreamweaver.

Anyway, your goal here is to connect via FTP so you can find the plugins folder within the WordPress file structure.

Step 2.

Once you’ve successfully connected to your host, look for the ‘wp-content’ folder, then find the plugins folder.

Step 3.

Rename the plugins folder to ‘plugins-og’. Renaming the plugins folder deactivates all the software contained inside. If you look inside the plugins folder, you’ll see a series of subfolders all containing the plugins you downloaded. One or more of those plugins are causing the trouble you’re experiencing.

plugins folder

The plugins folder can be accessed via ftp

Step 4.

Go to your browser and access “” (use ‘your’ domain name silly, not my example)

Log-in to your WordPress website and activate another theme. I use one of the default themes that come with WordPress upon installation. Pick the Twenty Sixteen theme and activate it. (From your WordPress dashboard, find themes here Appearance -> Themes. Hover over your the Twenty Sixteen theme or any other theme and select the activate button). Activating another theme allows you to see that your WordPress installation is okay. It’s okay because the newly activated theme works! Test your site out to be sure. If you can’t activate a new theme because there aren’t any themes, upload one. Look for the ‘Add New’ button. And if that still doesn’t work, you need to contact me.

Step 5.

Once you have proven out your site works, go back to your plugins folder you accessed via FTP. Open that folder and rename all your plugin sub-folders to end in ‘-og’ and restore the original name of the parent folder to ‘plugins’ (your parent folder was originally ‘plugins’, put it back to that .

Reactivate your original theme and test your site. Don’t be surprised to find stuff missing or non functional. The goal here is to see if your website loads and you don’t get the ‘Warning’ screen.

Once you can see your website loads with out errors (errors are messages that appear on your screen telling you shit is f’ed up) you’re ready for the next step.

Step 6.

Go back to your FTP client and start renaming/restoring original names of the plugins sub-folders ONE AT A TIME to their original name. That means removing the ‘-og ‘ I instructed you to attach to each file folder name. Again these are the files found in the plugins folder.

As you restore each file folder to original name, take some time to verify your site works. This is the whole point of this stage of the process. We are trying to isolate the offending plugin/folder. Test it, reload it. Clear your browser cache!!!

Eventually you will find the offending plugin when you test the site after restoring any given plugin folder name. You’ll know because the ‘white screen of death appears’.

Step 7.

Rename the folder that caused your site to ‘crash’. Yeah, the “white screen of death” thing. Crash means your site didn’t load. So, you saw the error message again. This means the last plugin you restored is a bad, very bad plugin. Delete it from within your WordPress dashboard. Why? Well, some plugins should go through an uninstall process controlled by a script included within the plugin’s folder. I avoid deleting from my IDE. Better yet.. just leave it renamed, then find the developer and reach out and share your experience. Most developers want to help and learn. Expect a reply!

At this point you can look for another similar plugin that provides the solution the offending plugin did at one time not so long ago. Additionally, Once again, you could try to contact the plugin developer and ask for an update. Or, maybe you shouldn’t be plugging around with any and all plugins online! Why? Because if you do that enough, you’ll catch website-crabs, browsyphilis, firefoxitis, safariamydia.

My advice is pay someone to develop a plugin for you. Someone who will keep your site healthy and produce custom plugins that are sanitary!

I can help you. Build plugins. I do that!

Questions? Send me your comments below.

WordPress function fixes overlapping admin bar

I used to fix the overlapping admin bar issue with CSS. For example:

.logged-in .navbar {
margin-top: 32px;

But that solution doesn’t work unless you’re developing with Bootstrap navigation styles. So, I found a cool way to simply tell your browser to move the


down 32px so it renders below the WordPress admin-bar. I use an inline style that activates upon the presence of the WordPress admin-bar. Place the following code in your header.php file where your navigation menu code is. Look for the


tag and duplicate my example below. Keep in mind you may have class and id names that must not be deleted or pasted over. If you are unsure or not getting the results you hope for, comment below with your questions. I’ll do my best to reply quickly.


if ( is_admin_bar_showing() ){ echo 'style="margin-top:32px;"'; }

Some of you may feel this is sort of a hack. Maybe so. But I sure like the simplicity of this solution.

Wordpress function admin-bar overlap