BACKGROUND TRANSPARENCY - how to create background gradients using CSS

Travelify
1

Hi there,

I found a solution on this support forum i put it in my child CSS and also in Theme option / other bud it is not working.

#main {
background: #f8f8f8;
}
.wrapper {
background-color: transparent;
}
#branding {
background: rgba(255,255,255,0.3);
}

Can you help me with this problem

Thank you

WIMA

2

To make wrapper for your theme transparent you can add this code to Appearance >> Theme Options >> Other >> Custom CSS by replacing code you are using now.

.wrapper, #main {
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: none;
}

This will not affect content area and it will still be light gray but white space around it will now be transparent.

Let me know if this is what you were looking for.

3

Thank you for this quick response i tried this solution it works bud seeing it I have to say it does not look as good as I thought it would be. There is one more posibility i would like to try. Now the background is gray bud is it posible to change it in to a collor patern from dark to light, something like the file i uploaded with this question. If this is posible fore the background maybe it is also posible for the the content area.

4

These are called gradients and you can use them like this:

#main {
  background: #ea9d27; /* Old browsers */
  background: -moz-linear-gradient(top, #ea9d27 0%, #ffffff 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea9d27), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ea9d27 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ea9d27 0%,#ffffff 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ea9d27 0%,#ffffff 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ea9d27 0%,#ffffff 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea9d27', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

#content article {  background: #ea9d27; /* Old browsers */
  background: -moz-linear-gradient(top, #ea9d27 0%, #ffffff 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea9d27), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ea9d27 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ea9d27 0%,#ffffff 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ea9d27 0%,#ffffff 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ea9d27 0%,#ffffff 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea9d27', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

For this example I used the exact same color you provided on your image. If you want to play around to get different gradients you can use this handy tool.

First part of above mentioned code will change background for website itself and second part will change background for content area, so you can use two separate gradients.

5

Hi Aigars,

Thank you verry much this is what i’m looking for, so far so good bud is it possible to do this also for the background of the widgets. When you look at this URl http://www.info-suriname.com/english/ you will see that the background color of the widget is solid i would like it to be also a gradient.

thank you

WIMA

6

For widget background you should use code like this:

.widget {
  background: #ea9d27; /* Old browsers */
  background: -moz-linear-gradient(top, #ea9d27 0%, #ffffff 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea9d27), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ea9d27 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ea9d27 0%,#ffffff 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ea9d27 0%,#ffffff 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ea9d27 0%,#ffffff 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea9d27', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

Again you can use gradient tool to generate CSS code that you can use for background color.

7

Aigars,

Again thank you so much the widget background color is now also a gradient. I noticed that you have a lot of experience may i ask you if you can tell me wich slider they are using on the next website surinaamseten.nl/. I have been searching for many hours bud can’t find out how they did it. Maybe you know if they are using a plugin and if they do is it possible to use it in your theme Travelify.

8

Its the most basic slider that there is - FlexSlider but it is just a JavaScript library and doesn’t work for WordPress by default. Most slider plugins available on WordPress.org does use this slider. Our Dazzling and Sparkling themes uses this slider as well.

Travelify slider which comes with theme is very similar to this slider as well but it is more advanced with more transitions effects.

The only thing that is unique about slider you mentioned is border around but but that’s not a bide deal at all.

9

Didn’t notice that there is another slider at the bottom. That one you can get from here.