• Author
    Posts
    • #3738
      Douglas Moxley
      Participant

      How to add background to surrounding area of website (see attachment)

      Thank you!
      Doug

      Attachments:
      You must be logged in to view attached files.
    • #3744
      Andre
      Participant

      This theme has a background image feature that should give you close to what you are wanting. Go to the customizer and then you can find the “Background Image” tab and setting. This is actually a WordPress feature that let’s you add a background to your overall page.

      However, this theme is set to give a full width page layout which would cover your background image. To change this, you need to make your page content as a boxed layout by going to Theme Options in the customizer, then on the “Boxed Layout Width” setting, enter in a value (in pixels) of what you want. By default, it’s 2560 (which means 2560 pixels in width). Change it to something like 1170 and then you will see your background image.

      As for the header top area, this might be a problem and is a messy thing to change as the header is part of the content area background.

      The content area background uses this:

      #page {
      background-color: #fff
      }

      This makes the content area and header white.

    • #3745
      Douglas Moxley
      Participant

      #page!! So mad I couldn’t find that! Thank you so much, Andre!

    • #3746
      Andre
      Participant

      No worries…. What browser do you use and have you ever used the built-in webmaster tools?

    • #3747
      Douglas Moxley
      Participant

      I normally stick with Google Chrome and I’ve never used any built-in-webmaster tools but you definitely have my attention. I normally do all my own configuring with CSS, HTML5, and PHP. I can normally code sites exactly how I want them but it makes it hard for customers to update!

    • #3748
      Andre
      Participant

      I use Chrome as well, but the webmaster tools is a big help in finding out what elements in a page uses what styling. So for example, it lets me see the source code and what style is applied to the #page div container. It can also give you the line number where the style is in the theme’s stylesheet. In the case of the screenshot, the full styling for #page is on line 492 of the style.css file.

      I made a note to write a tutorial about webmaster tools…perhaps even with a video.

      Attachments:
      You must be logged in to view attached files.
    • #3750
      Douglas Moxley
      Participant

      OMG Andre, that would be so awesome. I would contribute to help with such a great learning tool!

Viewing 6 reply threads
  • You must be logged in to reply to this topic.