- This topic has 6 replies, 2 voices, and was last updated 5 years, 3 months ago by Douglas Moxley.
-
AuthorPosts
-
-
December 3, 2018 at 07:30 #3738Douglas MoxleyParticipant
How to add background to surrounding area of website (see attachment)
Thank you!
DougAttachments:
You must be logged in to view attached files. -
December 3, 2018 at 14:41 #3744AndreParticipant
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.
-
December 3, 2018 at 14:52 #3745Douglas MoxleyParticipant
#page!! So mad I couldn’t find that! Thank you so much, Andre!
-
December 3, 2018 at 14:55 #3746AndreParticipant
No worries…. What browser do you use and have you ever used the built-in webmaster tools?
-
December 3, 2018 at 15:00 #3747Douglas MoxleyParticipant
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!
-
December 3, 2018 at 15:19 #3748AndreParticipant
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. -
December 3, 2018 at 15:25 #3750Douglas MoxleyParticipant
OMG Andre, that would be so awesome. I would contribute to help with such a great learning tool!
-
-
AuthorPosts
- You must be logged in to reply to this topic.