How to change bg in pages and articles

The code you’re after is

#main-wrapper {
	background-color: X;
}
#main-wrapper .round-div {
	border-color: X;
}

where X can have any valid CSS colour value.

The first rule changes the background-color of #main-wrapper while the second changes the border color of the round images that zoom in on hover. Unfortunately, while background-color property accepts a value of transparent, border-color does not. This basically means you cannot have the zoom-in effect on those images unless your background has an uniform colour.

As an example, here’s set of colour tweaks that might work in your case:

h1, h2, h3, h4, h5, h6 {
text-shadow: 0px 1px 0px rgba(255,255,255,.65);
}
#main-wrapper {
	background-color: #e4d8a9;
}
#main-wrapper .round-div {
	border-color: #e4d8a9;
}
.tc-header {
	border-bottom: 7px solid #e4d8a9;
}
hr {
	border-top: 1px solid rgba(0,0,0,.17);
	border-bottom: 1px solid rgba(255,255,255,.42);
}

You’re welcome, mate.
I like what you did with it. But that menu is a touch too light for my taste. Give these colors a spin (add it to the existing CSS) and let me know what you think (note: make sure you select all the code, not just the visible part):

.social-block a {
	text-shadow: none;
}
.navbar div.navbar-inner {
	background: rgba(26, 26, 23, 0.55);
	box-shadow: -12px 12px 120px rgba(243, 234, 125, 0.15),
			-2px 2px 7px rgba(255,255,128,.12),
			inset 0 0 60px rgba(0,0,0,.65);
	border: 1px solid rgba(255, 240, 155, 0.21);
	border-radius: 0;
	}
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle,
.nav-collapse.collapse {
	background: #212121;
	color: #e9a825;
	}
.navbar .nav > li > a {
	text-shadow: none;
	}
.dropdown-menu > li > a {
	color: #ccc;
	}
.dropdown-menu {
	background: #212121;
	}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a,
.nav-collapse .nav > li > a:hover,
.nav-collapse .nav > li > a:focus,
.nav-collapse .dropdown-menu a:hover,
.nav-collapse .dropdown-menu a:focus {
	background: rgba(255, 240, 155,.07);
	color: #e9a825;
	}
.navbar .nav > li > .dropdown-menu:after {
	border-bottom: 6px solid #212121;
	}
.navbar .nav > li > .dropdown-menu:before {
	border-bottom: 7px solid #444;
	}

You might also want to add an inline style of

background: rgba(33, 33, 33, 0.76);

to that footer center.

From what I see, the yellow texts color is added inline, and that is wrong. For example, in http://birragladium.altervista.org/symphony/, at the bottom, you have

<span style="font-weight: bold;"><span class="color_5" style="color: #ffcb05;">Temp. di Serv. 10 °C</span></span>

That styling is directly editable from the page/post contents but is not not advisable. You should remove all inline styling and rely on CSS to style your contents via classes. For example, normally the text above should be changed to

<span class="color_5"><strong>Temp. di Serv. 10 °C</strong></span>

And now you have control over it from style.css, using:

.color_5 { color: #968F6F; }

If all your color_5 spans are bold, you can remove the <strong> tag and just add “font-weight: bold;” to the CSS and it will apply to all the spans with a class of color_5.

In order to change the footer background color, you need to go into your footer.php (I assume) or wherever you added that <center> tag that holds your footer text. You either add a class to it (<center class="footer-class"> and than you have control over it from style.css, with

.footer-class { background-color: #212121; }

or you can just add the style inline: <center style="background-color: #212121;"> (not recommended, because it is harder to modify. If you add classes, you can change all the styles of your website from a single place: style.css). Besides, it will change the style for every place where you have that class, but if you add style inline you need to go in every place and change them. Not having to do that is why CSS was invented :).

I am not a big fan of proving people wrong, but I think you have the skill to write a custom css. You just don’t have the knowledge. The principle is very simple: instead of putting style=”/* some css here */” you only put class=”put-a-class-name-here”.

Than you open style.css and you write at the end:

.put-a-class-name-here {
	/* some css here */
}

Now, my wild guess is that you are using Visual editor when you are editing your pages and posts. I strongly advice you not to, as you do not see the html tags and you have very limited control over them. Use the Text tab you will see all tags. For example, this is a piece of your page code:

<p class="font_8" style="color: #ffffff;"><span style="color: #000000;"><span style="font-weight: bold;"><span class="color_5">BICCHIERE:</span></span> Balloon </span></p>

The code above says:

<paragraph>
	<make this white and class "font_8">
		<make this black>
			<make this bold>
				<this has class of "color_5">
					BICCHIERE:
				<no more class of "color5">
			</no more bold>
			Balloon
		<no more black>
	<no more white and class "font_8">
<end of paragraph>

Normally, it should only be:

<paragraph>
	<this has class of "color_5">
		BICCHIERE:
	<no more class of "color_5">
	Balloon
<end of paragraph>

Translated in html:

<p><span class="color_5">BICCHIERE:</span> Balloon</p>

And, in your style.css:

.color_5 {
	font-weight: bold; /* make it bold */
	color: #000000; /* make it black */
}

Now, every element that has the class of color_5 will be black and bold, unless some stronger CSS rules apply to it, overriding font-weight or color.

These are the basics of CSS. The rest is here.

Good luck 🙂