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:

http://www.w3.org/Style/Examples/011/firstcss.en.html


http://htmldog.com/guides/css/beginner/


(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

Try:

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

(Marco) #16

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