This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: 

How to apply custom button styles in version 3.1.2+

  • Creator
    Topic
  • #15860
    davidcpa135
    Participant

    As previously suggested, I was testing the updates (currently on 3.1.0) on a localhost enviroment to update to 3.1.2.

    All went well except that I had some custom css that would put a black background on the submit and read more buttons and (on the read more button only) a black to white gradient.

    The update turned the button to a too light to see background. The changelog for 3.1.1 mentions something about a fix to themeblvd-dark.css.

    Could this be the problem? If so would I need to reverse or change the gradient color codes?

    For reference here’s the live link
    and the submit link

    The present Custom CSS ,if needed is listed below.
    Appreciate the help.

    .btn-default,
    .tb-button,
    .comment-reply-link,
    input[type="submit"] {
    	background-color: #414141;
    	background-image: -moz-linear-gradient(top, #555555, #222222);
    	background-image: -ms-linear-gradient(top, #555555, #222222);
    	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222));
    	background-image: -webkit-linear-gradient(top, #555555, #222222);
    	background-image: -o-linear-gradient(top, #555555, #222222);
    	background-image: linear-gradient(top, #555555, #222222);
    	background-repeat: repeat-x;
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0);
    	border-color: #222222 #222222 #000000;
    	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    	background-color: #222222;
    	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
    	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    	border-color: #000000;
    	color: #ffffff;
    	text-shadow: 1px 1px 0 #ffffff;
    }
    /* This changes the color submit button*/
    input[type="submit"] {
    background-color: rgb(8, 104, 248);
    border: 1px solid #1d1d1d;
    color: #ffffff;
    }
    .panel-default > .panel-heading + .panel-collapse .panel-body { background: #303030; }
    
    .btn-default.btn-gradient {
        background-image: linear-gradient(to bottom, #000000 0px, #E0E0E0 100%);
        background-repeat: repeat-x;
        border-color: #CCCCCC;
        text-shadow: 0 1px 0 #FFFFFF;
Viewing 1 replies (of 1 total)
  • Author
    Replies
  • #15872
    Jason Bobich
    Keymaster

    Yeah, you got a bit of a mess there of old and new selectors. Buckle it down and condense what you’re doing.

    Here’s a new starting point for you:

    /* Read More Button and Submit button */
    .tb-btn-gradient .btn-default,
    .tb-btn-gradient input[type="submit"] {
    	/* Style both kinds of buttons in normal state ... */
    }
    .tb-btn-gradient .btn-default:hover,
    .tb-btn-gradient .btn-default:active,
    .tb-btn-gradient input[type="submit"]:hover,
    .tb-btn-gradient input[type="submit"]:active {
    	/* Style both kinds of buttons in hover/active states ... */
    }
    
    /* Read More Only */
    .tb-btn-gradient .btn-default {
    	/* Target normal state for read more button only */
    }
    .tb-btn-gradient .btn-default:hover,
    .tb-btn-gradient .btn-default:active {
    	/* Target hover/active states for read more button only */
    }
    
    /* Read More Only */
    .tb-btn-gradient input[type="submit"] {
    	/* Target normal state for submit button only */
    }
    .tb-btn-gradient input[type="submit"]:hover,
    .tb-btn-gradient input[type="submit"]:active {
    	/* Target hover/active states for submit button only */
    }

    Feel free to look in /framework/assets/css/dark.css to see how the theme styles the button for the dark content style.

Viewing 1 replies (of 1 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.