hello,
going to start with a big thank you for the Vantage theme and all the great information this support holds, i have managed to make numerous css changes to the theme with great affect.
i am trying to change the features container color ( the shape, cicle, square, hex etc) and replace it with a gradient.
but i can only find the css that changes the whole container and not the shape so all of my shapes turn into a square gradient.
.sow-features-list .sow-icon-container
{
background: linear-gradient(to bottom, rgba(244,225,193,1) 0%,rgba(244,178,63,1) 44%,rgba(221,153,51,1) 68%,rgba(219,128,2,1) 100%);
do you know what the css is that controls the shape color?
thanks
Hi James
Am I right in saying that you’ve managed to resolve this? Your Features shape and gradient look good from my side. Let me know and we’ll go from there.
no i haven’t resolved the issue, the changes i’ve made overrides the whole shape ant they all become squares.
what i would like to do is be able to change the shape color to a gradient?
Hi James
Those shapes are icon fonts, so their color is being set using the color CSS property, instead of the background CSS property.
It is possible for them to have gradients using the following CSS, but unfortunately it will only work in a WebKit based browser.
.sow-icon-container { background: -webkit-linear-gradient(top, rgba(244,225,193,1) 0%,rgba(244,178,63,1) 44%,rgba(221,153,51,1) 68%,rgba(219,128,2,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }Hope that helps.
Awesome, thanks Braam.
James, here is a little background on what we’re up to with that:
http://css-tricks.com/snippets/css/gradient-text/
there was still issues with that css with webkit borwser (chrome) the shape became a gradient but the icon was missing.
is there a way that i could use a custom img shape?
Hi James
Sorry, I missed that. I clearly didn’t test it while using icons. :)
Assuming you want the circle shape you can try using this custom CSS instead of the above to override the font shapes being used.
.sow-icon-container:before { position: relative; display: inline-block; content: "" !important; width: 84px; height: 84px; border-radius: 42px; background: linear-gradient(to bottom, rgba(244,225,193,1) 0%,rgba(244,178,63,1) 44%,rgba(221,153,51,1) 68%,rgba(219,128,2,1) 100%); }You can use this reference if you’d like to try using a different CSS shape.
http://css-tricks.com/examples/ShapesOfCSS/
Finally, we will likely change those shapes from fonts to CSS shapes to allow for things like gradients in a future update of the Widgets Bundle.
thank you for all you help on this…
how would i implement using the 12-burst from http://css-tricks.com/examples/ShapesOfCSS/
#burst-12 { background: red; width: 80px; height: 80px; position: relative; text-align: center; } #burst-12:before, #burst-12:after { content: “”; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: red; } #burst-12:before { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); } #burst-12:after { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); }