CSS Background modified

(Marco) #1

Its possible to add a background like this one?
From this:

To that:

(John Muhl) #2

Looks like you can apply background colors to #main and #main-outlet to do that.

(Marco) #3

I tried to change the colors from the admin panel, but obviously it takes a background…

(cpradio) #4

He was trying to say using

#main { background-color: #333; }
#main-outlet { background-color: #FFF; }

gets you close to the result you are seeking.

(Marco) #5

Great! It works!
However, you can enter more distance from the white board?
In addition, you can place a shadow on the sides as the head of the forum?

(cpradio) #6

Can you screenshot what you are thinking?

(Marco) #7

I wish that the edges were more distant…

From this:

To that:

(cpradio) #8

Change the CSS to

#main { background-color: #333; }
#main-outlet { 
  background-color: #FFF; 
  box-shadow: 0px 0px 25px #000;

(Marco) #9

Thank you @cpradio!

If I want to move the margins that parameter I have to change?

(cpradio) #10

If you want to change the shadow length, change the 25px to whatever you want to do, a larger number for a larger shadow, smaller for a short shadow.

(Marco) #11

And to increase the margin in general?

(John Muhl) #12

You may benefit from a quick introduction to CSS such as:



(cpradio) #13

Increasing the margin is a big task. But you want to change the .wrap width

.wrap {
  width: 70%;

Be aware, this could break things or make some of the pages look really awkward.

(Tom Newsom) #14

Also, the contents of the Inspector (right click, Inspect Element in Chrome)

(Kane York) #15


  padding-left: 20px;
  padding-right: 20px;

(Marco) #16

Thank you all! =D
I now do the tests ^^