BoldGrid offers several themes with a fixed full-page background Image. However, because all of the available BoldGrid themes are heavily customizable, you may notice a blocked background image or covered up by other page elements. If you’ve decided to delete your Call to Action widget, you’ll notice that a large part of your background image is no longer shown. In this tutorial, we’ll walk you through the steps to modify your CSS so you can show your website visitors more of your background image.

DicedFor this example, we’re using a fresh installation of the Diced theme. You may have noticed this theme comes with a Call to Action widget.

Blocked imageIf you delete this widget, the site content below rises up and covers the background image.

Follow along with the steps below to see how you can edit your theme’s CSS file to bring back your background image:

Editing the CSS File

To move the elements on your page and reveal your background image, you will need to edit the theme’s stylesheet. Instead of editing this file directly, you can safely add code to it through the BoldGrid customizer.

  1. Click AdvancedWhile in the customizer, click Advanced.
  2. Custom JS & CSSChoose Custom JS & CSS.
  3. Open EditorUnder Custom Theme CSS click Open Editor
  4.  Add codeAdd the following code: .entry-content {margin-top: 600px;}

Background image visibleThe margin-top code adds margin space above your site content to reveal your image. We set the margin at 600 pixels of space (600px), but you can adjust this to add more space. 800pxwill give you more space and show you 800 pixels worth of your background image. You can adjust this number to meet your individual needs.

Fixing a Blocked Background Image

This is one specific example of how to add this code in a particular theme (Diced). The applicable code may vary depending on which them you are using.

With your Inspiration category selected, you are now ready to select a BoldGrid Inspiration Design. If you would like to preview the designs without installing BoldGrid, you can do so at our BoldGrid themes page.

  1. You will see various themes loaded in the Design tab. Since we chose the “General” category, BoldGrid is showing us themes that match our choice. Simply scroll to see even more results.
  2. Hover over the “Wedge” theme and click on it to Preview. If you like what you see, you can simply click on the Select button to proceed.

Great! We’ve now selected our theme to use for our website and we’re ready to Configure and Install Inspiration Content.

In this article, you will learn how to find more BoldGrid themes. If you would like to preview / install additional BoldGrid themes, you can do so from within your Dashboard. This tutorial will show you how to do this.

  1. Log into your BoldGrid Dashboard
  2. In the left menu, hover over Customize and click Change Themes.
  3. You will then see your installed themes. Click Add New Theme to preview or install additional theme options.
  4. On the Add Themes page, you’ll find a selection of themes you can download. BoldGrid themes have a BoldGrid Certified logo on them.
  5. From here, you can preview and install themes.

    Previewing Themes

    To preview a theme:

    To preview a theme, hover over a theme and click the Preview button.

    To close a theme preview:

    When finished previewing a theme, click the [x] in the top left of the page.

    Installing themes

    To install a theme, click the Install button.

    Installing a theme does not change your site, it simply downloads the theme to your theme library. From here you can:

    1. Live Preview the theme. This allows you to see what your site will look like with this theme, however, no changes are made to your site.
    2. Activate this theme. This will activate your new theme and thus change the look and feel of your site.

    Please note! If you have already installed a site using Inspirations, the homepage you have now was designed specifically for the original theme you installed. If you change your theme, your current homepage will need to be updated to better fit your new theme.

Congratulations, now you know how to find more BoldGrid Themes! Our next guide explains how to Change Themes in BoldGrid.

 

After you have launched your BoldGrid site you may find inspiration from something else and wish to change the look and feel. BoldGrid makes this easy since you don’t need to rebuild the entire website. Additionally, the inspirations of BoldGrid include many industry standard themes. With BoldGrid, you can get a fresh new look for your site anytime in a few quick and easy steps. Continue reading “Changing Themes in BoldGrid”