Introducing Solo Pine Mods | An affordable & reliable way to customize your theme

Okay
  Print

Make Oleander's Featured Area Slider as wide as the content container

Please note: This article is specifically for the Oleander theme. 




By default, Oleander's Featured Area Slider will display at 100% width of your website. If you would prefer to instead have your Featured Area Slider only be as wide as the content's container, this is an easy customization! 

First, we will need to access the Featured Area Slider's theme file. In order to do so, we recommend installing the code editor plugin called WPide (http://wordpress.org/plugins/wpide). Once WPide is installed and activated, you can navigate to WP Dashboard > WPide > themes > oleander > "inc" folder > "featured" folder > and open up the file titled "featured.php". 

On the first line of this document, you will see this code:

<div class="featured-area">


Push this line of code down in order to make the first line within the document blank. 
Next, on what is now the first, blank line of the document, you can copy and paste the following bit of code:

<div class="container">


The first few lines of within your "featured.php" file will now look like this:

<div class="container">
<div class="featured-area">

    <div class="sideslides">


Lastly, you can scroll to the very bottom of the document. 

On the last line of the document, you'll see this bit of code:

</div>


Directly below this on a blank line, you will repeat this same bit of code. 
The last few lines of code in your "featured.php" file will now look like this:

     </div>
    
</div>
</div>


Be sure to save changes when finished. 
If you have a cache tool operating on your WordPress and/or browser, you may need to clear the cache in order to see the changes. 

If you would like to add some spacing between your Featured Area Slider and the navigation menu, you can then navigate to Appearance > Customize > Custom CSS and copy & paste in the following. 
I've set the spacing to be 50px, however you are of course very welcome to adjust this to whatever you prefer. 

.featured-area {
margin-top: 50px;
}


Save changes when finished.