Change color of content area

  • 1
  • Question
  • Updated 6 years ago
  • Answered
Can anyone please tell me how I can change the color of the background of the content area. I don't want to change the actual website background, but rather the color of the content area where all the website content goes?
Photo of chad

chad

  • 6 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Chad,

You can create a specific style and then address that for your selected content.
eg.


<style>
#background {
background-color: rgb(0,51,51);
}
</style>



<div id="background"

(Content)
</div>


Another way would be to use the custom panel widget and configure those for use.

I am sure there are other ways too that address the content of the wrappers used in the design of the template but don't know how to manipulate this.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello chad

I have checked Gop's code (thanks), and the rgb detail shown in the first box does unfortunately not work, but you can replace it by a colour code or the colour name (like "green").

In the second code box, above a closing bracket (>) is missing, you will need to add this after "background":
<div id="background">(Content)</div>
I will find out with our code experts if there is a solution to change the whole inside content area background instead of creating
containers.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Sorry, the rgb code as Gop provided it does work, I was just confused by the way it is displayed in the HTML editor.

Chad, to make the changes you required to your Style, you would need to have Yola Silver which enables you to edit your Site CSS. The code for this change will also depend on the Style you are using. Can you maybe post your URL here for us to find you in our system? Thanks.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
You certainly don't need Silver for this as I used this on a free site. You just place the style in an HTML widget.
You don't need to add a closing bracket at the end of background either as the content can follow and then the content is closed with a bracket as per normal.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
I am aware Yola has a living to make but it is poor form to continual push silver and not fully explain other options, I have noticed this before in other threads and it should be deterred.
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
After reviewing this request carefully we are of the opinion that the user is requesting a site-wide CSS change, which is best achieved using the CSS editor. Stefan was checking whether the user already had this feature enabled so he could help him to use it. Notice that he requests the user's URL so that he can check his account status. Obviously there would be an implied recommendation to upgrade if he had not done so already, but the primary intention is one of support.

In general: you will continue to see us recommend Yola Silver whenever someone wants to edit the site CSS. We intend this to be a premium feature. We are aware that there are workarounds available but these are less than ideal in our opinion. For example in this instance the user would have to do it on each page of the site instead of once for the entire site if he were to use the HTML editor. We do not prevent Yola users from sharing workarounds even when the result is that the toolset will not be used in the way that we intended, because we value the freedom and creativity of this forum. However, we do not officially recommend or support some of these suggestions. We always have and always will continue to describe the toolset as it was designed to work. I am sorry if you think this is in poor form, but it is our policy, we are completely transparent about it and this is how we mean to continue.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Monique
Stefans statement

'Chad, to make the changes you required to your Style, you would need to have Yola Silver which enables you to edit your Site CSS'

Is categorically stating there is no other way to achieve this, if Gop hadn't corrected this Chad would have viewed this as the only method available to him which I repeat is poor form.

If you don't wish for comments like this to appear on this forum please fully explain the available options open to your customers.

I am also fully aware you will continue to recommend Yola Silver, as a business you will obviously push your paid for products over anything free you have to offer.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Quote:
"........then in the course of the support interaction the customer service person should point out all the options available. In Yola terms: the free options and what they can do, as well as upgrades that offer more." {Monique}
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
I agree with myself. Thanks for quoting me. I also agree that in this instance the correct approach was taken. Guess what, the customer has Silver and we are going to help him make the most of it. If he had come back saying he had Free we would still have recommended the upgrade, but would have acknowledged that Gop's approach was an option, but why go through all this if we can just show him the easy way?
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Monique
I started building my site in early 2010 as a complete novice, I joined this forum and was giving plenty of help and advise, mainly from Sanja, along the way. It is because I remember this that I try to help other people who are similar to where I was when I first started.

I have noticed in recent months that the forum has changed from an easy going friendly place to something nor quite so nice, the spirit seems to have been replaced by a more hard edged approach, the helpful Champs so evident when I started are now no where to be seen.

Unless I have a specific problem that I cannot fix myself I have decided to curtail my participation within this forum as I don't really like being here any more.
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Your comments seem to be more relevant to a general feeling than this specific case, as can now be seen from the outcome. However, I will address your general concern. I am still here (founder of this forum) and Sanja is still here and many voices have joined along the way. A number of champs have come and gone and we hope that there will be many new ones in future. We are very sorry to hear that you don't like being here anymore and hope that we can change this. From our side have also experienced the challenge of going from a mainly free product to one with a number of premium options. What excites me is that we have continued to provide a free package while being firmly committed to the success of our business, so that we can keep all our sites, both free and paid, running for a long time into the future. We hope that we will continue to provide the space where complete novices can join and get help and advice. And we hope that our users, both new and old will accept that when we recommend and offer support for an advanced feature which is already enabled in a user's account or available on upgrade we are doing so as much to help users achieve success as when we discuss one that is free for all users.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Monique
You are quite correct, it is a general feeling, this thread was the final nail.
I'm astounded by your devotion to the cause, lets analyse this theoretically assuming the customer has a free or bronze account:

1. Stefan's second post was the last of this thread
2. The customer was keen to apply these changes and incorrectly believes this to be the only method of doing so, thus they sign up for a silver account
3. The customer then posts back here for instructions on how to implement the code and finds out then or later that this could have been achieved with a free or bronze account.

So in summary you gain a silver account under false pretences.

A little thought here would have gone a long way:

'Chad, to make the changes you required to your Style, you would need to apply some custom coding to your site, you can achieve this with a free account but we would recommend an upgrade to Yola Silver which enables you to edit your CSS site wide along with many other exciting features to help you build a fantastic website.The code for this change will also depend on the Style you are using. Can you maybe post your URL here for us to find you in our system? Thanks.'
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Hi David

So I have been trying to fall asleep but I can't stop thinking about this thread and how things got so messed up. Thanks for providing better wording for Stefan's response- I don't disagree with you that that would have been a lovely way to answer. I have tried every possible angle to explain where we were coming from on this and I have decided that the best way would be to give you a virtual word for word account of how this case went down in the Yola back office. There is a tremendous amount of team collaboration that goes on behind the scenes to try to get the right answers to as many customers as quickly as possible. Here's a fly on the wall view of what we said about this one today:

Stefan (supreme multi-tasker, catching up on forum threads while simultaneously translating the entire Yola website into German, which is actually his first language): "Francois, I have a user in the forum who is trying to edit the background color of the content area of his style. Someone in the forum gave him a code but it is not working for him. What can I tell him?"

Francois (case maniac who processes several hundred emails a day with a surprising degree of accuracy and personal attention, but he does like to get straight to the point): Dude, find out what style he is using and if he has access to the CSS editor and I will sort him out.

Stefan posts a response, in his mind designed to get the information required and quickly moves on to the next task.

A few hours later, Stefan: Monique I am in trouble in the forum again. Please review the thread and see what I did wrong.

Monique: First of all please make sure François gives the customer the code he is looking for. I will respond to the criticisms. Don't worry - I heard the discussion with François and I think you guys are on the right track.

And the rest, as they say is history. I guess one of my faults is that I am too familiar with where people like Stefan and François are coming from. I am maybe a little too impressed by how often they get it dead right considering the pace at which they operate. And I know for a fact that the very last thing Stefan cares about is getting a Silver sale under false pretenses. But he did come away from this vowing to be much more accurate and careful with his wording. It will probably make him slower. It may even hurt his confidence and make him dread having to put himself out there again tomorrow, and I know it will make him a little less able to sleep tonight. But as we all give a little more thought as you so rightly recommend I hope the end result will be a forum that you are happy to participate in once more. You don't have to accept my explanation of events but I hope that you at least accept that I cared enough to share them because relationships matter desperately to us and we don't feel very good about our day when things get off track the way they did here.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Monique
Thank you for taking the time to reply, firstly let me say I have no problem with Yola making money in what ever way they see fit, secondly my version of Stefans post is not only 'lovely' it's factually correct, thirdly I still feel you're missing the point in attempting to protect your colleagues.

The comment:

"Chad, to make the changes you required to your Style, you would need to have Yola Silver which enables you to edit your Site CSS."

Is misleading, factually incorrect and ethically wrong but not once have you apologised for this, you may have coerced a customer into buying a product they didn't strictly need, as I stated above that's poor form.

There are only two reasons I can think of as to why Stefan would have posted that reply
1. Lack of product knowledge
2. Official Yola policy

To reiterate, make your money however you see fit, just be bold enough to say so.
Photo of chad

chad

  • 6 Posts
  • 0 Reply Likes
I havent completed my site yet so it hasn't been published yet. But the style I am using is called "Inky Night".

As you will see with that style, the content area is transparent, which makes it a bit of a problem with my images. So all I need to do is change it from being transparent to a solid colour, like grey.

I have Yola Silver so can you please tell me the way to do it by editing the Site CSS

Thanks for the replies!
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Thanks for letting us know! We will take a look at get back to you as soon as possible.
Photo of Francois

Francois, Employee

  • 282 Posts
  • 19 Reply Likes
Official Response
Hi chad,

Here is the site wide CSS override you're looking for:



div#content {
background-color:#000000;
_behavior: url(http://s2.yolacdn.net/V0023207/template_resources/0/Nature_Impressions/resources/iepngfix.htc);
min-height:200px;
margin:0 auto;
text-align:left;
padding: 1em;
}


You will need to copy this to your Site CSS Overrides pane and save the change. To do this, click Style -> Edit Custom CSS. Remember to change the #000000 to a hexadecimal colour value of your choice.

Please let me know if this works for you.
Photo of chad

chad

  • 6 Posts
  • 0 Reply Likes
Yip that worked, thanks a lot for the assistance :)
Photo of Lauren

Lauren

  • 4 Posts
  • 0 Reply Likes
Hi,
I am trying to implement a full screen background on my site. I have the code; however I need to modify the html of the entire site. The html widget and text widget using html only allow a box of html to be added to the site. Is there a way to make a full screen? The code I want to use it :
CSS

html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}

#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}

#wrapper {
position: relative;
width: 800px;
min-height: 400px;
margin: 100px auto;
color: #333;
}

HTML

full screen background image

Content goes here...

Photo of Lauren

Lauren

  • 4 Posts
  • 0 Reply Likes
The HTML didn't show..it just basically allows me to insert my image, which is the most important part.. the CSS allows Internet explorer to recognize the full screen format
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Lauren,

The CSS should be OK using the CSS over-ride facility of Yola Silver.

The class names may need to be changed to match the names used by the style as this will then work with you instead of possibly against you to change the style layout. if you superimpose you may have issues that I couldn't predict but possible.

Unfortunately you can't over-ride the HTML for the site as such but with Silver again you may be able to add the HTML to the Site tracking header facility which is a defacto portal into the head section. This should manifest across the entire site.

Your best bet would be to use the Style Squeaky Clean. This is the closest to a liquid style. There are two persistent elements: the Navigation menu, which can be easily ignored essentially and the second persistence: is the top and bottom horizontal delimters. With CSS you can cloak these and possibly remove them (haven't tried removal I don't think).

Give it a go and will be very interested in following your progress if you have the inclination to post that at your convenience :)

I wish you good luck.

PS: to post HTML code wrap it in code tags. See the (some HTML allowed) link on a new Reply to This Topic as this gives you a list of allowable instruction HTML able to be used in these posts
Photo of Lauren

Lauren

  • 4 Posts
  • 0 Reply Likes
Thanks!! Can you tell me what the site tracking header facility is and where I can access it? If you open the site using ie browser with pure css code, the background is not full screen.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Site>Site Settings>Tracking>Site Tracking Code>Header Code
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Do you mean a background image?
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
http://great-sillage.info/intro is a simple illustration of a full-screen background. I haven't removed the nav-menu or the horizontal delimeters. is this what you are referring to (kind of)?
Photo of Lauren

Lauren

  • 4 Posts
  • 0 Reply Likes
Yes :) this is exactly what I am trying to do! How did you achieve that without html??
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I used Squeaky Clean Style and replaced the background with an image. I think I used 1900 x 900 pixels. The best bet here is to adjust your image with an image manipulation program before uploading it. The onsite manipulation facility is not good for this action.This won't cover all possibilities but since the most common is 1200 or thereabouts in width it will cover the vast majority of users. You could take it up to any size. The trick here is to use a relatively random image that doesn't focus on a central theme and then excess is not missed.

I also set it to not scroll so that the background remains pinned and the content scrolls.