Changing background to transparent. - HELP!

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Hi, Here i am again. Asking all of you for your generous help.. ;) Seriously, i would like to ask for your help for my website. My website's url is http://nativeproducts.yolasite.com/..... my problem is that i wanna remove the white background color of my website and transform it to transparent so that the only background i have is the rattan. I have included a snapshot image of what i mean to make things clearer. Thank you all. here's my email address samsoft9390@gmail.com.....
Photo of Samuel Reu Delfin Flores

Samuel Reu Delfin Flores

  • 6 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of Brandon

Brandon

  • 243 Posts
  • 33 Reply Likes
Hey Samual,

Please paste the following code in an HTML widget:

<style type="text/css">

div.content {
background:none;
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0);
box-shadow: 0 0 2px rgba(0, 0, 0, 0);
}

div.ys-banner-wrap {
background:none;
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0);
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0);
box-shadow: 0 0 2px rgba(0, 0, 0, 0);
}

</style>



That should make the colour disappear, as well as the shadows. Your content area and banner border should be completely invisible! :)

Kind regards,
Brandon
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Thanks Brandon.
Samuel, please let us know if you need any further assistance.
Photo of ilkestonwebdesign

ilkestonwebdesign

  • 28 Posts
  • 1 Reply Like
I tried the instructions provided but it would not work. I am finding this particular CSS template of mine absolutely horrendous. I just CANNOT identify the ID that controls the background of the content widgets.

http://agra.yolasite.com/

This is my site and as you can see I have managed to use the display:none; command to switch off certain widgets. All I want to do now is make the background of the main content area transparent.

I have ended up so frustrated that I have gone and built this site with someone else's service and got the results I wanted. I am paying for Yola Silver but am not really finding it easy to work with
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi,

On the blue toolbar of your site-builder page select Style>Edit Background>Change Background> (Uncheck use an image for background) and above that select white as your background fill.
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Gop, does that not just make it white? not transparent? As there is nowhere to actually select 'no colour'. ??
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi JC,

This CSS worked with FireBug so try adding this CSS to your CSS over-rides. I removed the background image and set the colour to "none"

body {
background-attachment:fixed;
background-image:none;
background-position:50% 50%;
background-repeat:repeat repeat;
color:none;
font-family:Georgia, Times, 'Times New Roman', serif;
font-size:12px;
text-align:left;
}
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
This hasn't taken into account any settings of your banner. If this works for you and you need adjustment of your banner I'm happy to have a look at that.
Photo of ilkestonwebdesign

ilkestonwebdesign

  • 28 Posts
  • 1 Reply Like
Does that chunk of CSS take into account the fact I have an uploaded jpeg as the main background? I want the content widget that sits on top to be totally transparent, as I will be uploading some .PNG files as graphics which use transparency.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi ikeston,
if this is as you say then you don't really need a transparent background as the background is the deepest layer. You only need to remove the background image (the metallic pattern)

Its the image transparency that is the issue. The widget has no presence it's just a place-holder the content of the widget that is the issue.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
the CSS should work.
Photo of ilkestonwebdesign

ilkestonwebdesign

  • 28 Posts
  • 1 Reply Like
I think you are misunderstanding me - I want the background of the content widget transparent. It is currently set to a shade of white. I want the metallic background to remain.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Can you take a screen shot for me and show me the elements that you are describing ikeston? Then we are on the same playing field. I don't want to misunderstand you.
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Thanks Gop. Ikeston, yes, I had same problem and then decided to use different template. I could not get either the text boxes to be totally 'no colour' ie not white, so that the background could be seen thru, and then the same happened with the banner area, as could not get that to have no colour either, in order for my large image as a background could be seem completely.

Perhaps Yola, could add as upcoming feature, that we are able to select 'no colour' for text highlighting, as well as banner, text boxes???
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi JC,

What's the name of the Style?
Photo of ilkestonwebdesign

ilkestonwebdesign

  • 28 Posts
  • 1 Reply Like
I have changed template style and added the CSS rules to it.. and it worked amazingly. You just need to find the right template with all the customisable options. But really, seeing as CSS is a web standard, I don't see why some templates have limitations, especially for Silver subscribers.

Even Bronze offers workarounds using the HTML widgets if you cannot directly alter the stylesheet
Photo of ilkestonwebdesign

ilkestonwebdesign

  • 28 Posts
  • 1 Reply Like
If anyone is interested, I used the template "Professional Slate" with these rules. Edit the dimensions as you see fit

#sys_banner { display: none;
}

div#menu {
display:none;
}

div.ys_header {

display: none;
}

div.ys_nav_wrap {
display: none;
}

div.post_banner_element {
display: none;
}
div.post_banner_shadow {
display: none;
}

div.page_content { background:url(http://s3.yolacdn.net/V0023261/templa...) repeat top center transparent;
background:transparent;
margin:-4px auto 0;
width:943px;
}
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Thanks ilkeston. What a performance especially as you had to have someone else assist. Am sure others will also appreciate.

Gop, you are wonderful all the help you give people. I gave up in the end and just used a plain site and then worked around and ended up with white as 'box' area for all text, with background showing around it.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes. Very difficult JC. Sorry I wasn't of any help there ikeston.
Can you tell me the name of the Style? I still haven't worked that out either. Good to know in case of others coming in with the same. I can just say "probably impossible"