Gradient Background, Solid Page Body

Dazzling
1

I am trying to figure out how to make a gradient page background, with a solid page body (content).
I believe I am looking for the custom CSS code to do this.
I want the background a gradient/shading from Top to Bottom, dark to light (dark color near top of content, fading as it scrolls down the page).
I also want the Content Itself (page body) to be on a solid white background.
How do I do this?

2

Hi @opus,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Dazzling Options -> Other -> Custom CSS

body{
background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(255,0,0,1),rgba(255,0,0,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(255,0,0,1),rgba(255,0,0,0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(255,0,0,1),rgba(255,0,0,0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(255,0,0,1),rgba(255,0,0,0)); /* Standard syntax */
}
.container.main-content-area {
    background: #fff;
}

Best Regards,
Movin

3

Thank you! that’s perfect.
One more question now.

Top nav, How do I change the color of the buttons in a non-hover state.
I can have them change colors upon hover, but in a static, or non-hovering state, they remain the same color has the header background.
I would like them a different color.
The buttons (or menu items?) themselves, not the font color of the item.
I can find how to change the font color.

4

You are most welcome here :slight_smile:

One more question now.

To help us keep support thread separates could you please create new thread for your other questions here Dazzling - Colorlib Support Forum instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

5

ok, thank you, and done.
New thread created titled Top Nav Button Color.

6

I will reply on your new thread. No need to reply here now.

7

Another question regarding the gradient.
I added the CSS and it worked, thank you, but,
How do i make the gradient “more dramatic”.
As in fade to white/very light, and maybe “up the percent, or distance” the fade, fades?
Its fading now, but to a color that’s very close to the top/nongradient color, and rather hard to see the gradient on certain screens.
If you can tell me which part(s) of the CSS to change i can just do that.
Google’s being, less than helpful on which part of the code controls “percent of fade” if you will.
and if you need it, i am starting with a gray -
#C0C0C0 or 192,192,192

8

You can find information about CSS gradient on the following pages so just make the changes in the shared CSS code by referring the information provided on the below pages.

http://www.w3schools.com/css/css3_gradients.asp
https://css-tricks.com/examples/CSS3Gradient/

http://www.cssmatic.com/gradient-generator