Home>Support>Buttons not rendering correctly

Buttons not rendering correctly

By Chris Hosker O'Brien, 9 years ago. Last reply by Andrew Misplon, 9 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

I am using the Robo Gallery plugin, in which I call for buttons that are flat and gray. When I preview what the gallery will look like, the preview looks correct, with flat, gray buttons. But then when I add the gallery to my Vantage themed page and publish it, it renders as a blue rounded button with shadowed text. Can you help? An example of what is happening can be seen in the URL below.

URL: http://www.wseproject.com/blog/services/infrastructure-engineering-2/drinking-water/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Hi Chris

    You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    .widget .rbs_gallery_button .button-flat {
    text-shadow: none;
    background: #eee;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: background;
    -o-transition-property: background;
    transition-property: background;
}

.widget .rbs_gallery_button .button {
    display: inline-block;
    height: 32px;
    padding: 0 25.6px;
    font-family: "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 30px;
    color: #666;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px white;
    vertical-align: middle;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbfbfb), color-stop(100%, #e1e1e1));
    background: -webkit-linear-gradient(top, #fbfbfb, #e1e1e1);
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#e1e1e1));
    background: -o-linear-gradient(top, #fbfbfb, #e1e1e1);
    background: linear-gradient(to bottom, #fbfbfb, #e1e1e1);
    background-color: #eee;
    border: 1px solid #d4d4d4;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .15);
    margin: 0 5px 15px 0;
}
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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More