Problems with my Background

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I put a tile-set on my background. The problem is that I can see it under my blog posts and the other blog widgets, like the About Me. I'd like those things to be covered by another background, one that could make the texts more clear. I don't know how to do that, neither if it's possible. I'm using Cleanslate as a style, if that's any relevant.
Several sites I visit have backgrounds. Although, things such as a text area have an alternative background over the main one, which practically only shows on the borders. That's kind of the style I want.

I hope I could be clear enough.
Photo of TiagoJ7

TiagoJ7

  • 76 Posts
  • 0 Reply Likes
  • unsure

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi TiagoJ7

I know exactly what you mean regarding the background. Here are a couple of options you could consider:

1. Select a different template that has a white center but allows you to change the background such as Tastelessly, Burlap, or Flowershop.

Go to "edit page design", click on "page background", then "format background".



Then make sure you selected the following and make sure that you selected the background image:


2. Another option is to use a watermark script on the templates that don't allow for page background change. By using this watermark script background, then it places the background image behind the white center. An example of this would be KidsCorner. The watermark background would be as follows:

<script language="JavaScript1.2"> /* Watermark Backgound Image Script- © Dynamic Drive (www.dynamicdrive.com) For full source code, 100's more DHTML scripts, and TOS, visit dynamicdrive.com */ if (document.all||document.getElementById) document.body.style.background="url('YOUR IMAGE URL GOES HERE') white center no-repeat fixed" </script>

3. A final option is to create table or div boxes to contain your content. This is a more involved process. I have an example of this on my site: http://littleus.yolasite.com.

If this is an option that you'd like to pursue, please let me know and I can give you more details.
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Thanks Littleus :)
Photo of TiagoJ7

TiagoJ7

  • 76 Posts
  • 0 Reply Likes
Yes, I think the one I want is the third option. Important things inside rectangles.
Instead of transparent, can I make those boxes with a solid opaque color, or another image? Transparent looks good too, but I want to explore all possibilities.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Yep.. you can definitely have opaque background. That's not a problem at all. You can also use images as well (which is what I have on my site). To make a box:

<div style="border: 1px solid black; padding: 10px; background-color: rgb(93, 196, 211); text-align: center;"><font size="3"><b>ABOUT ME<br></b></font></div>

The following you can adjust to your liking:
The border size (1px)
The border look (solid) - it can be dashed
The border color (black) - you can also hex number [e.g. #54c4d3] or rgb [e.g. rgb(12, 130,15)]

padding (10px) - refers to the amount of space between the text and border edge

background-color (rgb(93, 196, 211))

* if you want a background image, then replace background-color with background: url(YOUR IMAGE URL);

text-align (center) - can be left, right

font-size (3) - number ranges from 1-5 (i think)

ABOUT ME - replace with your own text.
Photo of TiagoJ7

TiagoJ7

  • 76 Posts
  • 0 Reply Likes
What do I do if I want to put boxes under things like text boxes I put anywhere in a page, like when I make a description for anything.

I'd like boxes under pretty much everything. The navigation, the blog posts, the other blog widgets that go on the side, how do I do that for each?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Tiago

I think you may be better off using option #2 from the post above. Although I do have a box around my blog and blog widgets, I am not comfortable sharing how to do this as it's causes the page to function a little funny. I'd hate for you to get frustrated with that.

Here's an example of using the watermark script: http://littleustest2.yolasite.com - this is the KidsCorner template. What do you think of using that option?
Photo of TiagoJ7

TiagoJ7

  • 76 Posts
  • 0 Reply Likes
I don't know if I understand the second option.
Is changing the site's style necessary? Is the watermark script a code I can apply anywhere?

Sorry for not understanding.

By the way, how do you make your visitors able to subscribe by e-mail? My blog widgets have a subscription by RSS Feed, which I don't like as much as e-mail. How to have both kinds of subscriptions available?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Tiago

Please don't apologize! =)

You can use this watermark script for any style that has a background that is not customizable. It simply gives you another option should you see a template you really like but don't like the background.

Regarding the e-mail subscription - I did this through www.jotform.com - which is free. You can set it up and then you just have to copy the HTML code and paste inside an HTML widget. If you copy the source code, then you are also able to customize it as well to better blend with your site.

Please let me know if you have further questions.
Photo of TiagoJ7

TiagoJ7

  • 76 Posts
  • 0 Reply Likes
I checked this page (http://www.dynamicdrive.com/dynamicin..., which has a picture of a notebook on the background, which is a watermark.

Maybe it's not that I'm looking for. I want backgrounds behind the things I specify, like the blog and every text box I put in any page. I gave a background to my site, which may be very flashy. It's a drawing I made, re-sized into 100x100, tiled.

I need something that covers the background wherever I think it's necessary.

If I made a new blog post, which could be long or not, I would want something behind. Something that covered the background, so that what I wrote was visible. It could be a transparent rectangle or an opaque one. I want to be able to choose that, and I want the rectangle to know what size to be, without me having to change the html to the proper size anytime I make a new post, or add a new text box, or anything.

There are sites with all that covered. There's a background, but when a new blog post is added, it has something behind that covers the background. It's the same if someone leaves a comment.

Maybe, what I'm looking for should have to be programmed into the posts, the comments and text boxes themselves, so that they would be associated with them, and I didn't have to keep making new ones along with new stuff added. I don't think that can be made with the watermark script.

Is what I want, close to the third option? If so, I think I wouldn't want that to slow the loading of the site.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Tiago

Yes.. what you are describing is definitely the 3rd option. The problem however is applying this option to the blog page. You can use the above div code inside your blog post by clicking on the HTML button. This will create a box with a solid background. You will however, need to add that to each blog post. You cannot add this code to the Blog widgets though (e.g. About Me, Recent Posts, etc..)
Photo of TiagoJ7

TiagoJ7

  • 76 Posts
  • 0 Reply Likes
That's a shame.
OK. I'll see what I can and cannot do. I may create a custom background instead of a tile-set or use another style.

Or I can use a CSS Template. There's a site (freecsstemplates.org), which may have what I need. Is it possible for me to put them on my site? If so, how can I know which templates lets me edit the palette, the banner or the background?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Unfortunately, you are not able to upload any external templates at this time. Here's a great tool to help you determine what option each template has: http://www.yola.com/yola-style-guide
Photo of TiagoJ7

TiagoJ7

  • 76 Posts
  • 0 Reply Likes
I went to http://www.dynamicdrive.com/dynamicin... and I'm now experimenting the watermark.

I just have a doubt. Where do I get the URL of the image? Can I use an image from my site's File Manager?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Tiago

Yes.. you can definitely use an image from your file manager. Your url would look something like this: http://mysite.yolasite.com/resources/...

Please let me know if you need further clarification.
Photo of TiagoJ7

TiagoJ7

  • 76 Posts
  • 0 Reply Likes
I would have to publish the site then, wouldn't I?
If so, or if not, how do I see the URL?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
If you go to your file manager, and hover over your image, it will give you the url. Just remember to add your site domain in front of it.
Photo of TiagoJ7

TiagoJ7

  • 76 Posts
  • 0 Reply Likes
I had an idea. I hope it works.
Since I made a tile-set, maybe I could build an entire background with several copies of the tile, making it look like a tile-set, and add a white (or other color) rectangle in the middle. Then, program the picture to not tile and to come from the middle top. I'll give the picture a large resolution so that it fits in every screen resolution.
The only problem is that the picture could get too heavy. Is there a way to avoid that?
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hi TiagoJ7 - could you explain what you mean by heavy?
Photo of TiagoJ7

TiagoJ7

  • 76 Posts
  • 0 Reply Likes
Heavy in terms of megabytes. But I already tried it out, and it's lighter than some JPEGs I have on the site.

I'll keep doing more experiences. See if I can make it lighter, or just keep editing it until I'm satisfied.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You may be interested in this thread as it talks about how to compress your image files: http://forum.yola.com/yola/topics/pro...