Background outside the widget

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Hello
I'm having problem with one thing on my site. I looked around for a solution but couldn't find any so I thought I will ask here.
I'm using Swanky style with single container layout. When I'm adding new widgets to the container, I can customize them but the space around widgets are still white. I wanted to ask is it possible to get rid of that space or change it's colour? I'm adding image so it may be more clear about what I'm talking about.
Thank you in advance.
Photo of Thomas Net

Thomas Net

  • 7 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Thomas,

You're in luck! The Swanky style has a configurable background which can be either an image or a solid colour. The default is white. The widget outlines will always show as white in the sitebuilder, specifically the text and HTML widgets, but on preview and publishing the set background colour will be apparent.

Navigate to:

Page → Page Properties → Background and select your background options. The process at this point on is quite intuitive and if you need a bit of a lead please leave a message here.
Photo of Thomas Net

Thomas Net

  • 7 Posts
  • 0 Reply Likes
Thank you for the quick answer.
The problem is, I already tried changing pages background but it doesn't change the spot I mentioned earlier. Here are 2 more screenshots. One with white background and one with black background. The problem is the white spot around text widgets, that isn't that visible in black preview screenshot I'm adding to this post, but are clearly visible in my 1st post here.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Try this CSS over-ride:

body {
background-color: #000000;
background-position: left top;
background-repeat: repeat-x;
}


You will need to alter your font colour so that it will be in some contrast to the black background

If you're using the free subscription then you will need to add this code another way and to each page. Let me know if this is the case.
Photo of Thomas Net

Thomas Net

  • 7 Posts
  • 0 Reply Likes
Yes I'm using free account so I think I can't add it as custom CSS:(
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You will need to add it as internal CSS. This uses the same style syntax with a style tag: Place this inside an HTML widget on your page.

<style type="text/css">
body {
background-color: #000000;
background-position: left top;
background-repeat: repeat-x;
}
</style>
Photo of Thomas Net

Thomas Net

  • 7 Posts
  • 0 Reply Likes
Unfortunately it didn't change anything. Strange because when I go to firebug FF addon and check that place, I get:
#page {
background: none repeat scroll 0 0 #FFFFFF;
border-top: medium none;
margin: 0 auto;
padding-top: 30px;
width: 900px;

When I change FFFFFF to 000000, the preview of the site works fine, but when I copy paste it to HTML widget as:
.style type="text/css".
body {
#page {
background: none repeat scroll 0 0 #000000;
border-top: medium none;
margin: 0 auto;
padding-top: 30px;
width: 900px;
}
./style.

it changes nothing. In addition, if I add ./div. below ./style. mark, The background of the text and space below it turns black which is nice, but there is still white bar above it left.

This is with 1 text widget and 1html widget.

edit: sorry I didn't notice I can't post <>'s here so I changed them for dots.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Simple solution to the < and > is to wrap the statement in < code > and < /code > tags. Just take out the spaces I left after the < and before the >

You do need to publish the site for the white to disappear I have found a few minutes ago.

Here's an illustration of a published site with the CSS set:



and the Preview:



The preview is by no means a true representation of the final page and it comes up periodically for various reasons ??
Photo of Thomas Net

Thomas Net

  • 7 Posts
  • 0 Reply Likes
That's strange. You got exactly what I wanted to get, but when I do the same, I still get that white space between that "plant" and text.
Here is what I'm getting:
how it looks in site builder, 2 widgets, 1st one is html, 2nd one is text:


Here is what I have in html widget:


and here is how published site looks like:


also thank you for sacrificing so much time for solving my problem.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Thomas,

This is really intriguing. I don't have an intuitive response on this outcome. Wondering if you could publish your site to a free yolasite sub-domain in the interim or let us know the address of the published site if it already is. Happy to have a look at this from afar? Your call.
Photo of Thomas Net

Thomas Net

  • 7 Posts
  • 0 Reply Likes
Of course. The address is: http://echomiasta.yolasite.com/

And about that code I pasted earlier, it gives me something like this:



no idea if it's the right step because I'm a newbie, but it surely looks like one step closer to the end, because there is only one, smaller, white bar left:)

But I left the site with your code applied so you can see the effect.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You're a newbie? I wish I was that talented!

I'll look at it over the next few hours and I hope something jumps out at me :(
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Thomas,

Was able to manipulate this with FireBug. Now I have to get into the page code to find out where it is and suggest a fix snippet.

Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The existing code on your page:
#page {
background: none repeat scroll 0 0 #FFFFFF;
border-top: medium none;
margin: 0 auto;
padding-top: 30px;
width: 900px;
}


The projected new code for you to add within an HTML widget at the top of your page:

<style type="text/css">
#page {
background: none repeat scroll 0 0 #000000;
border-top: medium none;
margin: 0 auto;
padding-top: 30px;
width: 900px;
}
</style>


This is very similar to an earlier posting of yours so I can only presume that it is the combination of the 2 style codes that cracked it. No need to wrap them in divs either as this can limit the application.

Let me know if it works
Photo of Thomas Net

Thomas Net

  • 7 Posts
  • 0 Reply Likes
It worked! Thank you so much! So it's something I posted earlier that I've seen in CSS section in Firebug, but didn't know how to write it in html widget! Now I learned how to use that information here.
You've been a great help and thank you for your patience:)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You're welcome of course. Hope you continue pushing the standard outline. There's lots to develop from a users perspective.