Tag: How-to

Facebooktwitterredditpinterestlinkedintumblrgoogle_plusmail



The Scenario:

You have just spent your hard-earned cash on the AwesomeOne Pro WordPress theme by FlyThemes. You’re excited to get started on your new web project of awesomeness, however the ultimate nightmare happens. You discover that the Full-Width page template, which you were hoping to use, is a bit wacky.

FlyThemes AwesomeOne Pro theme Full-Page template issue where only left-inner 60% of the page is editable
FlyThemes AwesomeOne Pro theme: Full-Page template issue where only left-inner 60% of the page is editable.

This was exactly my situation just days ago. I was attempting to use the popular Beaver Builder plugin to construct my new website, but the Full-Width page template was only allowing me to place new sections on the inner-left 50-60% of the page. This just wouldn’t do. After searching the internet for anyone reporting a similar issue, I caved and put in a request for help on their support forum.

After a few days of no response and time running short, I decided it was best to take matters into my own hands..



Fixing the Issue:

To fix the issue, first we need to understand what’s wrong. To someone who may not be very familiar with WordPress, or coding in general, this issue may seem quite intimidating. Even so, take a deep breath, we’re here to help after all!

The issue is simple. A width attribute has been set at a fixed width (in pixels) instead of “auto.” To fix this issue, we will first need to locate the selector names of the div tags in question in the appropriate PHP file.

Navigating to the WordPress Editor page via the appearance tab
Navigating to the WordPress Editor page via the Appearance tab.
  1. Navigate to the Admin panel of your WordPress website.
  2. On the left sidebar, hover over the “Appearance” tab and select “Editor.”
  3. On the right, find and select the file named “Full Width Page Template (full-width.php)”

The Code

Now that we’ve done that, look at the first 3 opening div tags. They should read: <div class=”content-area“>, <div class=”middle-align”>, and <div class=”site-main” id=”sitefull”>. 

To ensure we wont have any unnecessary conflicts, we need to rename these two selectors. Copy the code out of your full-width.php file and save it to a safe location as a backup. Once you have done that, copy the following code into place and save the file:

<?php /** Template name: Full Width * The template for displaying all pages. * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site will use a * different template. * * @package Awesome One */ get_header(); ?>
 
 

<div class="content-area-full">
 

<div class="middle-align">
 

<div class="site-main-full" id="sitefull">
 <?php while ( have_posts() ) : the_post(); ?>
 <?php get_template_part( 'content', 'page' ); ?>
 <?php //If comments are open or we have at least one comment, load up the comment template if ( comments_open() || '0' != get_comments_number() ) comments_template(); ?>
 <?php endwhile; // end of the loop. ?>
 </div>

 
 

<div class="clear"></div>

 
 </div>

 
</div>

 
 
<?php get_footer(); ?>

Notice that content-area is now called content-area-full and that site-main is now called site-main-full. These name changes will only affect your full-width template.

Once again, on your WordPress admin sidebar, hover over Appearance. This time, select Theme Options. Select Basic Settings at the top, if it is not already selected, and scroll down until you see the Custom CSS styles input box. Copy and paste in the following code:

.content-area-full {width:auto; margin:0 auto; padding:0;}
.site-main-full {width:auto; margin:0; padding:0; float:none;}

Scroll to the bottom and hit Save Options. The AwesomeOne Pro Full-Width page template should now work as intended! If for some reason you still see the Full-Width template as broken, clear your browser cache.

 

FlyThemes AwesomeOne Pro theme Full-Width template fixed.
FlyThemes AwesomeOne Pro theme Full-Width template fixed.