Changing Page colour from white to beige without changing style

  • 1
  • Question
  • Updated 5 years ago
  • Answered
Hi there i have created a page on my site for a client but they want the page to be the colour in enclosed image i really dont want to change the style just make the page colour the same thanks for any help

its not the background colour its the actual webpage colour that needs changing
Photo of Paul Rhodes

Paul Rhodes

  • 79 Posts
  • 7 Reply Likes

Posted 5 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Paul.

Should be able to do this. Wondering if you can tell us the Style your using?
Photo of Paul Rhodes

Paul Rhodes

  • 79 Posts
  • 7 Reply Likes
thanks the style is

TASTELESSLY
Photo of Paul Rhodes

Paul Rhodes

  • 79 Posts
  • 7 Reply Likes
I think the colour code they want is FFFFCC i can make the background that colour but not the actual page thanks again Gop
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Paul,

I think this will work:

#page {
background: none repeat scroll 0 0 #FFFFCC;
}


Add it to your "Site CSS" and it will carry it through all pages of the site.

I don't think that #FFFFCC is the correct colour match though. From the image you posted that seems like #FFF1CC using Colorzilla to analyse it. (Don't know how true the carrying of colour is though through a post and then a subsequent analysis?)

Photo of Paul Rhodes

Paul Rhodes

  • 79 Posts
  • 7 Reply Likes
Hi Gop firstly thanks again for the help
really i only wanted to add this to one page for my client

i am a total novice at this can you explain how i put this in the css and exactly where i put it

thanks again

paul
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Paul,

The process is different for a single page vs sitewide.

If it's just for a single page then you need to add the same code with a couple of extra instruction lines into an HTML widget added to the required page. ie drag an HTML widget onto your page and paste the following code into that HTML widget, (this is called "Inline CSS" as opposed to "Sitewide CSS):

<style type="text/css" media="all">
#page {
background: none repeat scroll 0 0 #FFF1CC;
}
</style>


For across the whole site effect then you do this by navigating to the "Site CSS" as indicated above in the screen shot. You also need a Silver subscription (or Gold) for this to be available but the internal style sheet or the single page addition can be implemented in any subscription.

Process for Sitewide CSS addition:

Select the "site" tab then on the options that are evident, select "Content" and three more options appear. Select "Site CSS" as it appears in the previous screen shot.
This will open a double pane display with your site preview in the right hand pane and the space for adding your sitewide CSS is in the left hand pane. You may see a notice in a salmon coloured box "Alert: Custom CSS is currently disabled.". To enable the feature have a look at the bottom left of that pane and there will be a check box already checked. Toggle this off. Now copy and paste the Sitewide CSS into the left hand pane:
#page {
background: none repeat scroll 0 0 #FFF1CC;
}
into that pane followed by OK.

This will now display the beige coloured page insert across the whole site.

Please feel welcome to ask if this is not clear for you.
Photo of Paul Rhodes

Paul Rhodes

  • 79 Posts
  • 7 Reply Likes
Thanks Gop i will go and try this now thanks a million for the help very kind of you much much appreciated heres a link to how it looks now http://www.aidanobrienfansite.com/pai...
it looks perfect for there requirements but as i say only want this colour on 1 page thanks again Paul
Photo of Paul Rhodes

Paul Rhodes

  • 79 Posts
  • 7 Reply Likes
perfect Gop thanks so much you are a genius thanks alot
kindest regards
Paul
Photo of a1web UK

a1web UK

  • 174 Posts
  • 24 Reply Likes
I just tried both codes and niether of them worked in the "Rounded Glass" template and I have silver account.

cheers
Photo of Paul Rhodes

Paul Rhodes

  • 79 Posts
  • 7 Reply Likes
you just put the code in html widget you only need this in html widget

#page {
background: none repeat scroll 0 0 #FFF1CC;
}

worked perfect for me here is my completed page http://www.aidanobrienfansite.com/aob...

Thanks again Gop
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello a1web UK,

Different styles have different solutions. For Rounded Glass then try:
div.layout div.content {
background: none repeat scroll 0 0 #FFF1CC;
}
Photo of a1web UK

a1web UK

  • 174 Posts
  • 24 Reply Likes
cheers Gop. that worked great for the whole sites pages.
I'm looking for a light silver looking coulour for one of the sites pages all way through if you can help please. (same template) rounded glass.

And single page code for the cream/biege one please.

how would I be able to work this sort of code out for myself in different colours . Any liknks to tutorials would be a massive help.

Thankyou.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Starting with your third query: I find the easiest way to do this is by discovering the code that controls this specific aspect. I use Firebug which is a GUI kind of facility with lots of various modules but the module I use most for this is the element inspector. You first of all click on this then drag your mouse over to the area of the site that you wish to investigate. All the relevant code is displayed in a panel in Firebug. Another approach is to view the code of the site and to some extent the code associated with a feature is intuitive.

With Firebug however, you can change the code and see its effect immediately. This doesn't change the code in your sitebuilder but just the code displayed on your computer only. Youtube have a series of tutorials on using Firebug. I should have mentioned that Firebug is free plugin for FireFox.

Back to your first query. You need to know the colour code you wish to change to. I use Colorzilla for this. It has a colour spectrum selection and you simply copy the code and place it into your site code.

A single page code:

<style type="text/css" media="all">
div.layout div.content {
background: none repeat scroll 0 0 #FFF1CC;
}</style>

The only difference is the adding of a couple of extra lines in the code already submitted. You can compare the two and see the difference. The #FFF1CC is the beige colour code, therefore you need to select an appropriate silver colour code and replace it.
Need further info? Happy to help.
Photo of a1web UK

a1web UK

  • 174 Posts
  • 24 Reply Likes
Cheers gop.. this worked to change all pages colour..

div.layout div.content {
background: none repeat scroll 0 0 #D8D8D8;
}

but not with just single page..
After looking at the content on top of a coloured background now though... I think I will stick with white . .

Some good info here though from gop if annybody else wants to give it a go sometime..

cheers bud
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
I tried it with the Inline CSS/HTML for a single page and it worked so not sure what the issue may be?

Photo of a1web UK

a1web UK

  • 174 Posts
  • 24 Reply Likes
no.. sorry gop.
I tried it with the html widget and all it does is show the code as if it was text in text box.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
<style type="text/css" media="all">
div.layout div.content {
background: none repeat scroll 0 0 #D8D8D8;
}</style>


or div.layout div.content {
background: none repeat scroll 0 0 #D8D8D8;
}


??
Photo of a1web UK

a1web UK

  • 174 Posts
  • 24 Reply Likes
cheers Gop.. the big one did the single page spot on buddy..

glad you you were around.. :)
Photo of a1web UK

a1web UK

  • 174 Posts
  • 24 Reply Likes
cheers Gop.. the big one did the single page spot on buddy..

glad you you were around.. :)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The code with the style tag is used as a so called Inline CSS whereas the code without, added to the Site CSS, is called an Embedded Style. The Inline only affects the single page that it is in whereas the Embedded style is placed in the Head of the document by the Sitebuilder and thus affects the whole site. There's a third when you're ready :)

It's good resource material for someone like yourself building a business/hobby in website construction and CSS is a big benefit.