Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
3AM on a Monday and I'm busy fooling around with custom.CSS. Note to self: get a life. Anyway, to add a color gradient to the main column or page background you can add the following to custom.css, after making sure, of course, that it's applied to the template you're using. Disclaimer: I'm not a coder but I'm pretty good with an axe.
/*page column color gradient
==================================*/
.page__column.page__main {
background-color: #F1F1F1;
background-image: -webkit-linear-gradient( 180deg, #ADEAA8, #1A6A1A 100%);
background-image: -moz-linear-gradient( 180deg, #ADEAA8, #1A6A1A 100%);
background-image: -o-linear-gradient( 180deg, #ADEAA8, #1A6A1A 100%);
background-image: -ms-linear-gradient( 180deg, #ADEAA8, #1A6A1A 100%);
background-image: linear-gradient(180deg, #ADEAA8, #1A6A1A 100%);
background-attachment: fixed;
background-repeat: no-repeat;
}
/*page-body color gradient
=====================================*/
.page__body > main {
background-color: #F1F1F1;
background-image: -webkit-linear-gradient( 90deg, #ADEAA8, #60C75F 100%);
background-image: -moz-linear-gradient( 90deg, #ADEAA8, #60C75F 100%);
background-image: -o-linear-gradient( 90deg, #ADEAA8, #60C75F 100%);
background-image: -ms-linear-gradient( 90deg, #ADEAA8, #60C75F 100%);
background-image: linear-gradient(90deg, #ADEAA8, #60C75F 100%);
background-attachment: fixed;
background-repeat: no-repeat;
}
Regards
Mark
EDIT - see this at http://markhoffmanphotography.com
Suggestions for improvement, embellishment, or error correction are encouraged and gleefully accepted.
Last edited by markh (2016-09-23 00:47:47)
Offline
Thanks Mark,
I'll add a link to this in the Tips forum
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Actually, there's little value in using so many vendor prefixes. Backlight requires IE10 or newer, for example. Providing prefixes for anything older is pointless. In most cases, you can use the most current syntax for things. The only things I'm using prefixes for are 3d transforms and flexbox.
Offline
At Matt's suggestion I did some trimming of the code above until it looked like this:
/*page column color gradient
==================================*/
.page__column.page__main {
background-color: #F1F1F1;
background-image: linear-gradient(180deg, #ADEAA8, #1A6A1A 100%);
background-attachment: fixed;
background-repeat: no-repeat;
}
/*page-body color gradient
=====================================*/
.page__body > main {
background-color: #F1F1F1;
background-image: linear-gradient(0deg, #ADEAA8, #60C75F 100%);
background-attachment: fixed;
background-repeat: no-repeat;
}
This seems to work just fine.
Mark
P.S. naturally the colors are the hex values after the #
and can be changed to suit your needs.
Last edited by markh (2016-05-17 09:55:30)
Offline