Add and Remove Background Card from your Ignite theme in Classic SharePoint

BindTuning themes and page layouts will help you brand your infrastructure beyond what Out-of-the-box SharePoint allows.

After deploying an Ignite theme on your Classic environment, you'll notice that a background card extends to the entirety of the page.

On classic pages, you're able to further customize that same look and feel by adding and removing the background card at will.

This same article will guide you through the necessary adjustments to the page layouts, so you feel comfortable mixing and matching this functionality, in accordance with your own requirements, hence creating a distinctive page layout, which you'll be able to utilize to the fullest.

If you're looking into completing this same process utilizing the Kraft theme, follow this link.

Remove Background Card

There are two distinct ways of removing the background card from your pages:

Remove the background effect directly on the page: Accomplished by adding the necessary code snippet to a script editor, modifying only the page where the script editor was added to;
Remove background effect from a page layout: Accomplished by modifying one of the provided page layouts, modifying any page that utilizes that same page layout.

Remove the background effect directly on the page

To remove the background effect directly from the page, please follow the steps below:

Edit the page;
On the top of the page, add a Script editor web part. To do this:
1. Go to the top of the page and select the web part zone at the top of the page;
2. Click on Insert;
3. Scroll until you find Media and Content and select Script editor.
4. After adding the script editor web part to the page, select the option Edit Snippet and add the following HTML:
```
<div class="remove-card"></div>
```
5. Select Insert and Save the page.

Remove the background by modifying a page layout

To be able to define which zones should get the transparent background look and feel, you’ll have to customize an Ignite page layout of your choosing.

Note: You can quickly check the page layout you’re using by editing the page, selecting Page on the SharePoint ribbon, and selecting Page Layout.

We recommend proceeding with the below-mentioned steps using SharePoint Designer, due to its ability to revert to a previous version of the page layout, providing us with an extra level of security.

Select All Files;
Open the folder _catalogs;
Open folder masterpage;
Scroll to the bottom of the folder until you find the page layouts corresponding to the Ignite theme;
After locating the page layout you wish to modify, right-click, and select the option Copy;
After copying the layout, simply select Paste and provide the name and description for the layout (the copied layout should be at the bottom of the list);
Note: Use tab to modify the description of the layout. Be sure to fill in the description, as it will allow us to find the newly created page layout later.
Right-click on the newly created page layout and select Check out.
After the check out, proceed to right-click the file again and select Edit File in Advanced Mode.
Now, we will need to remove the background effect on the entirety of the layout. To do this:
1. After, ContentPlaceholderID=”PlaceHolderMain”, add the following class:
```
<div class="remove-card"></div>
```
2. After this is done, simply hit Ctrl+S to save the modifications;
3. Go back to the masterpage folder, and once again, right-click on the item we’ve just modified. Proceed to check in the file and publish it as a major version.
4. After this is done, simply go to your site collection, open your Pages document library, and proceed to create a page using the custom layout we’ve created.

Final Result

In both scenarios, you’ll find that the white background has been removed from the background.

Add Background Card

Alternatively, we may need to add a background effect to a specific zone of the page layout, without compromising the rest of the page where we've removed the background effects, on the above-mentioned steps.

For this demonstration, I’ll be modifying a page utilizing the Ignite Sidebar right with featured.

Note: This same procedure will work, regardless of the BindTuning page layout you're utilizing.

Open your corresponding site collection using SharePoint Designer;
Select All Files;
Open the folder _catalogs;
Open folder masterpage;
Scroll to the bottom of the folder until you find the page layouts corresponding to the Ignite theme;
Find the name of the page layout you wish to modify, right-click and select Copy;
Proceed to re-name the layout, as well as provide a corresponding Description;
After performing the changes, right-click on the file and select Check out;
After checking out, proceed to right-click again and select Edit File in Advanced Mode.

Define which zones you want to add the card to

Before performing any further adjustments, let´s revert to our site, and confirm which zones you’ll want to add the card back to. In this particular scenario, we would like to add the background effect to the section containing the Quick Links web part (Main 33 1).

Note: You can find the corresponding zone name, by editing the page.

Now that we know which zone we want to add the card back to (Main 33 1), let’s go return to our Page Layout on SharePoint Designer:

With the page layout open, let’s locate that same area (page zones sit near the top of the page layout);
After having located the zone, we need to reapply the background effect. This can be done by adding a new class to that same section:
```
<div class="card"></div> 
```
Note: Don’t forget to add the closing </div>.
After this is done, simply hit Ctrl+S to save the modifications;
Go back to the masterpage folder, and once again, right-click on the item we’ve just modified. Proceed to check in the file and publish it as a major version.
After this is done, simply re-edit the page and change it to the newly created page layout.
Note: As you can see, the Description added above provides the name for our newly created page layout.