× Support for Joomla 2.5 templates is discontinued. This forum category is read-only.

How to add Gradient background

More
6 years 4 months ago #3453 by cimi123
cimi123 created the topic: How to add Gradient background
Hello guys,

The template it works just perfect, the only change i would like to make is to add a gradient background.


I tried in here, but culdnt make it work
body {
margin: 0;
padding: 0;
line-height: 1.6em;
background: #F9F9F9;

Would be better if the background color doesnt affect the Sheet color.


Thanks
Cimi

Please Log in or Create an account to join the conversation.

More
6 years 4 months ago #3454 by izabela
izabela replied the topic: Re: How to add Gradient background
Hi,

Check here how gradients may be created -> www.colorzilla.com/gradient-editor/

Please Log in or Create an account to join the conversation.

More
6 years 4 months ago #3456 by cimi123
cimi123 replied the topic: Re: How to add Gradient background
Hello Izabela,

Thanks for responding.

I added the gradient by using rgba codes. The color changed on the website, but not as gradient, then i deleted the code but i still can see the changed color, its like the code stuck somewhere in the website :)

Thanks
Cimi

Please Log in or Create an account to join the conversation.

More
6 years 4 months ago #3457 by izabela
izabela replied the topic: Re: How to add Gradient background
Hi,

So maybe check example of gradient styles in e.g. style1.css of this template
background: rgb(255,138,0); /* Old browsers */
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NTQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGREI5MDAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRjhDMDAiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c2NTQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  rgba(253,185,0,1) 0%, rgba(255,140,0,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,185,0,1)), color-stop(100%,rgba(255,140,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(253,185,0,1) 0%,rgba(255,140,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(253,185,0,1) 0%,rgba(255,140,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(253,185,0,1) 0%,rgba(255,140,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(253,185,0,1) 0%,rgba(255,140,0,1) 100%); /* W3C */

and check if you did not miss something :)

Please Log in or Create an account to join the conversation.

Time to create page: 0.238 seconds

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2019 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.