Today, I would like to discuss about our website background. We will try to identify all of its possible parts that can be changed. Also, I will talk a little about background types and of course the hot topic “full page background”. With this knowledge, we will be able to customize and personalize our own site anytime and wherever part we like. Don’t miss this out, knowing that background has something to do with your theme.
I tried to dissect 4 sites with different themes and lay-outs. Those having banner, no-header, short header, blog, store and the rest. So I came up with the following codes to map your site.
What you’re gonna do is to create a sample page on your site then go to its header and paste the code below. If you don’t know your page head, simply go to Pages > Click on the page you like > Click the advance settings on the right > scroll down > paste the code below on the header box or check these post "3 Ways in Editing Weebly <head>". Now here is the code:
<style>
#header {
background: red !important;
}
#topnav {
background: blue !important;
}
#nav-wrap {
background: yellowgreen !important;
}
#logo-wrap {
background: cyan !important;
}
#main-wrap {
background: green !important;
}
#main-wrap .container {
background: grey !important;
}
#main-wrap .inner-container {
background: silver !important;
}
#main {
background: orange !important;
}
#content {
background: indigo !important;
}
#header-wrap {
background: violet !important;
}
#footer-wrap {
background: yellow !important;
}
#footer {
background: black !important;
}
.blog-sidebar {
background: white !important;
}
.blog-body {
background: purple !important;
}
#banner-wrap {
background: brown !important;
}
</style>
#header {
background: red !important;
}
#topnav {
background: blue !important;
}
#nav-wrap {
background: yellowgreen !important;
}
#logo-wrap {
background: cyan !important;
}
#main-wrap {
background: green !important;
}
#main-wrap .container {
background: grey !important;
}
#main-wrap .inner-container {
background: silver !important;
}
#main {
background: orange !important;
}
#content {
background: indigo !important;
}
#header-wrap {
background: violet !important;
}
#footer-wrap {
background: yellow !important;
}
#footer {
background: black !important;
}
.blog-sidebar {
background: white !important;
}
.blog-body {
background: purple !important;
}
#banner-wrap {
background: brown !important;
}
</style>
Publish your site, go to that sample page and now you can easily identify the parts of your site. I used basic colors to help you identify which is which. Remember that we are talking about CSS here so there are rules to follow. Note the the navigation selector (nav) on the code above may vary from site to site, if the color didn't change then you may post your queries below and I will check.
Aside from the very detailed or specific places to edit a background, you may use the most general one. These only includes body as a whole and your site's editable body.
To give you an example, remove the first code you insert on your header and replace with any of the following:
<style>
#main-wrap {
background: red !important;
}
#main {
background: blue !important;
}
</style>
#main-wrap {
background: red !important;
}
#main {
background: blue !important;
}
</style>
or
<style>
body {
background: red !important;
}
#wrapper {
background: blue !important;
}
</style>
body {
background: red !important;
}
#wrapper {
background: blue !important;
}
</style>
Now it's your choice to what part of your site is appropriate to apply.
Different sites has different sizes that's why it is important to know how will you display your backgrounds. You may show it as a full page or tiles. Full backgrounds are often fixed at the viewport while tiled backgrounds start from the upper left then repeated across your site. Usually, these types of backgrounds uses an external file or image rather than HTML colors. You may try the samples below by replacing the code you inserted earlier.
Sample for full page static and fixed background:
<style>
#main-wrap {
background: #ddd url(http://mwtdatabase.weebly.com/files/theme/backgroundopt.jpg) no-repeat center center fixed !important;
background-size: cover !important;
}
</style>
#main-wrap {
background: #ddd url(http://mwtdatabase.weebly.com/files/theme/backgroundopt.jpg) no-repeat center center fixed !important;
background-size: cover !important;
}
</style>
And if you want a tiled background:
<style>
body {
background: #ddd url(http://mwtdatabase.weebly.com/files/theme/bgeggshell.jpg) repeat top left !important;
}
</style>
body {
background: #ddd url(http://mwtdatabase.weebly.com/files/theme/bgeggshell.jpg) repeat top left !important;
}
</style>
Since these tutorial doesnt include much about background types, colors and sizes, I am recommending you to go to w3cschools.com and study it. They have better explanations and once you understand, just apply to your Weebly site. Of course, I can help anyone who has background issue on their sites.
You may want me to insert a slideshow background, a gradient, an image or even a video*, who knows... I may grant your wish.
CONCLUSION
After doing the above tutorial on your test page, you may now initially apply it to your main site.
At the end of the day, it is you who drives your site. Proper background settings is crucial for visitor's first impression. Use contrast to show your page details, be simple as possible. If your and AdSense user, a little experimentation is required.
At the end of the day, it is you who drives your site. Proper background settings is crucial for visitor's first impression. Use contrast to show your page details, be simple as possible. If your and AdSense user, a little experimentation is required.
This tutorial is made possible using the "10 Capsulated Tips that can Change The Way you Edit your Weebly Site". If you don't know those tips, better read it NOW.
Hi Anonymous,
ReplyDeleteIf you want a proper and dedicated help, please post this question on our forum. I need to document every issue so others may use it later.
Hi,
ReplyDeleteJust wanted to know if there is a way that I can create an additional page type in a weebly template that is completely blank. With whatever theme I am using, I want to be able to have a page type that is blank and has no header, no footer, no nav menu, nothing. Just the complete page is a drag and drop area. I do want to be able to control the background colour (or image), whether this is via the css or on the page html itself. Also, I would want the blank page type to be the same width as the rest of the theme. can this be done by just creating a new page type and then what html would the page type need?
many thanks
Gary
Hi Gary,
DeleteTo create a new blank lay out or page type, simple go to Design > Edit HTML/CSS >on the left side you can see the "Add new Lay out".
hi there, you have very useful tutorials in your website, glad i found it. i have a website template with banner width exceeding the width of my main content area (the area where i drag and drop elements). the header + banner looks great with its width spanning 100% width across my computer screen. Im wondering if it is possible to insert images+text in a portion of the current white page with a colored background that spans across 100% of the page? is it possible with weebly?
ReplyDeleteWe could try that out. But you need to open this topic on the forum. Thanks.
Delete