This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

siteorigin features container color

Open 7 replies themetheme-vantage
James
11 years ago · Last reply by James 11 years ago

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

URL: http://aeroarts.co.uk

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Andrew Misplon Staff 11 years, 10 days ago

    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.

  2. James 11 years, 10 days ago

    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?

  3. Braam Genis Staff 11 years, 9 days ago

    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.

  4. Andrew Misplon Staff 11 years, 9 days ago

    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/

  5. James 11 years, 9 days ago

    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?

  6. Braam Genis Staff 11 years, 9 days ago

    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.

  7. James 11 years, 9 days ago

    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); }

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread