Home Forums Mint Theme Discussion & Support Buttons in Widget on Index Page

This topic is: resolved

This topic contains 12 replies, has 2 voices, and was last updated by  themeweaver 4 years, 6 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2841

    yoyaoh
    Member
    Post count: 20

    I am trying to create a button in a widget similar to the “Responsive Layout” widget on the demo page (http://themes.themeloom.com/?theme=Mint) – the “Get MINT now” button.

    I am using this code, but the button comes up as a light grey background. After clicking on the button and going back to the index page, the button’s text is now white instead of the dark grey (initial state) color that it was before. So the text “Register” is hard to read.

    <a class="button red" title="mash it" href="http://domain.com">Register</a>

    How was the “Get MINT now” button created?

    Was it a text widget with the html code put in there?

    Or was it a “page” with the original button code in there? I can’t actually figure out how to do this. Create a “Page” and then have it displayed in the widget.

    Thanks!

    #2842

    themeweaver
    Keymaster
    Post count: 730

    We use a text widget and insert the html:

    <a href="http://themeloom.com/" class="button icon down blue" title="Get Mint">Get Mint</a>
    
    #2845

    yoyaoh
    Member
    Post count: 20

    So weird. I get the same grey background box.

    Is it in the CSS file?

    I haven’t touched the original CSS or could it be settings somewhere else under “Theme Options” or elsewhere?

    Thanks!

    #2848

    themeweaver
    Keymaster
    Post count: 730

    No, the button code should work anywhere.

    class=”button” will create a standard dark grey button, the other classes add color and icons.

    Do you have url I could look at?

    It may also be possible that your are using a plugin that also defines a button style which is overriding the theme.

    #2849

    yoyaoh
    Member
    Post count: 20

    Unfortunately there’s no url because it’s on a local test site right now.

    Here’s the screenshot: http://mashupasia.com/docs/buttons.png

    For plugins, I don’t think if there’d be anything there that could be conflicting other than Buddypress. But I would imagine that because Mint is buddypress-compatible that there should be a problem there. Here’re the plugins I have:

    Advanced Code Editor
    Akismet
    BP Group Management
    Buddypress
    Buddypress Group Email Subscription
    Buddypress Template Pack
    Contact Form 7
    Contact Form to DB Extension
    Events Manager
    Google Analytics for WordPress
    Login Lockdown
    Login with Ajax
    Peter’s Login Redirect
    Really Simple Captcha
    Regenerate Thumbnails
    Secure WordPress
    Social Login
    Wordpress Database Backup
    Wordpress Importer
    Wordpress SEO
    WP-Mail-SMTP
    WP-Table Reloaded
    WP Sliding Login/Dashboard Panel

    #2855

    yoyaoh
    Member
    Post count: 20

    I’ve played around with deactivating/activating plugins and it is the Buddypress plugin.

    It’s 1.5.4 stock with no changes to any CSS files, so I don’t see what the issue is.

    #2859

    themeweaver
    Keymaster
    Post count: 730

    This is really weird. The demo sites are all running BP 1.5.5 and hace checked through code and it doesn’t interfere.

    Are you sure it is BP and not just one the BP plugins you have, which when BP is deactivated may not be running?

    If you have Chrome, you could use right click-inspect element to see which styles are being applied. That’s what I would do if I could see your site.

    #2872

    yoyaoh
    Member
    Post count: 20

    It’s BP because the other BP plugins when activated also have it with the wrong CSS. I’ll double-check that.

    I checked “inspect element” but not sure what I’m looking for. I’m not sure how to save and give you the information. So I copied/pasted here wrapped in a CSS format tag.

    element.style {
    }
    Matched CSS Rules
    /mashup2/media="all"
    .blue.button, .blue.button:visited {
    background-color: #2981E4;
    }
    /mashup2/media="all"
    .button.icon {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    }
    /mashup2/media="all"
    .button, .generic-button a, .button:visited, input[type="submit"], input[type="button"] {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    font-weight: 600;
    background-color: #222;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    /mashup2/media="all"
    .button.icon {
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    padding: 2px 2em 2px 1.25em;
    line-height: 32px;
    }
    /mashup2/media="all"
    .blue.button, .blue.button:visited {
    background-color: #2981E4;
    }
    /mashup2/media="all"
    .button, .button:visited, .medium.button, .medium.button:visited, input[type="submit"], input[type="button"] {
    font-size: 1em;
    line-height: 1;
    }
    /mashup2/media="all"
    .button, .button:visited, input[type="submit"], input[type="button"], .generic-button a {
    font-style: normal;
    border: none;
    background: #666 url(images/button-gradient.png) repeat-x;
    display: inline-block;
    padding: .75em 2em;
    color: white;
    text-decoration: none;
    -moz-border-radius: 1.25em;
    -webkit-border-radius: 1.25em;
    border-radius: 1.25em;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: visible;
    line-height: 1;
    margin: 5px;
    margin-left: 0;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    zoom: 1;
    }
    /mashup2/media="all"
    button, a.button, input[type="submit"], input[type="button"], input[type="reset"], ul.button-nav li a, div.generic-button a, .comment-reply-link {
    background: white;
    background: -moz-linear-gradient(top, white 0%, #EDEDED 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,#EDEDED));
    background: -webkit-linear-gradient(top, white 0%,#EDEDED 100%);
    background: -o-linear-gradient(top, white 0%,#EDEDED 100%);
    background: -ms-linear-gradient(top, white 0%,#EDEDED 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
    background: linear-gradient(top, white 0%,#EDEDED 100%);
    border: 1px solid #CCC;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #777;
    cursor: pointer;
    font: normal 12px/20px Arial, Tahoma, Verdana, sans-serif;
    outline: none;
    padding: 4px 10px;
    text-align: center;
    text-decoration: none;
    line-height: 14px;
    }
    /mashup2/media="all"
    .button, .generic-button a, .button:visited, input[type="submit"], input[type="button"] {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    font-weight: 600;
    background-color: #222;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    /mashup2/media="all"
    .button, .button:visited, .medium.button, .medium.button:visited, input[type="submit"], input[type="button"] {
    font-size: 1em;
    line-height: 1;
    }
    /mashup2/media="all"
    .button, .button:visited, input[type="submit"], input[type="button"], .generic-button a {
    font-style: normal;
    border: none;
    background: #666 url(images/button-gradient.png) repeat-x;
    display: inline-block;
    padding: .75em 2em;
    color: white;
    text-decoration: none;
    -moz-border-radius: 1.25em;
    -webkit-border-radius: 1.25em;
    border-radius: 1.25em;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: visible;
    line-height: 1;
    margin: 5px;
    margin-left: 0;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    zoom: 1;
    }
    a, #footer a {
    color: #00AEEF;
    }
    /mashup2/media="all"
    a {
    color: #6C9;
    text-decoration: none;
    }
    /mashup2/media="all"
    a {
    color: #06C;
    text-decoration: underline;
    outline: none;
    }
    /mashup2/media="all"
    body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }
    user agent stylesheeta:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
    }
    Pseudo ::before element
    /mashup2/media="all"
    .button.down.icon::before {
    background-position: 0 -64px;
    }
    /mashup2/media="all"
    .button.icon::before {
    content: "";
    position: relative;
    top: 1px;
    float: left;
    width: 32px;
    height: 32px;
    margin: 0 0.75em 0 -0.25em;
    background: url(images/btn-icons.png) 0 0px no-repeat;
    }
    Inherited from div.textwidget
    /mashup2/media="all"
    body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    }
    Inherited from div#text-20.widget-1.widget-first.widget-container.widget_text
    /mashup2/media="all"
    body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    }
    Inherited from div#third-content
    /mashup2/media="all"
    body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    }
    Inherited from div#content-container.home
    /mashup2/media="all"
    body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    }
    Inherited from div#main.row
    /mashup2/media="all"
    body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    }
    Inherited from div#page.container
    /mashup2/media="all"
    body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    }
    Inherited from body.home-page.logged-in.home.blog.hasGoogleVoiceExt
    body {
    font-size: 86%;
    }
    /mashup2/media="all"
    body {
    color: #222;
    }
    /mashup2/media="all"
    body {
    font-size: 86%;
    }
    /mashup2/media="all"
    body {
    font-size: 75%;
    color: #222;
    color: rgba(34, 34, 34, .75);
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    }
    /mashup2/media="all"
    body {
    line-height: 1.625;
    }
    /mashup2/media="all"
    body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    }
    Inherited from html
    /mashup2/media="all"
    html {
    font-size: 100.01%;
    }
    #2876

    yoyaoh
    Member
    Post count: 20

    I just went through all the plugins again one by one and it’s definitely the BP plugin. I tried the other BP-* ones and they all provide the grey buttons.

    Only when deactivating BP itself did I get the blue buttons.

    #2880

    themeweaver
    Keymaster
    Post count: 730

    When you inspect the element in chrome, you need you look for what is changing the bg Color.

    The code you haves pasted says it should be blue.

    The inspect feature also let’s you see the computed attributes. So if you look at background-Color it will show you which CSS rule is winning.

    It would be much easier if I could see a URL.

    And you do not need the bp template pack plugin – the theme does it all. It could be the problem. Try disabling it.

    #2881

    yoyaoh
    Member
    Post count: 20

    I wish I could give you a URL, but like I said, it’s on my localhost. Otherwise, I would need to install the theme and buddypress onto my live site (which doesn’t have buddypress installed). This would be a major revamp of my current site.

    So in the elements, I searched for “background”(not crossed out – strikethrough) and this is the order of the elements from top to bottom:

    1.) This is in “reset.css:455” (background is blue)

    .blue.button, .blue.button:visited {
    background-color: #2981E4;
    }

    2.) This is in “reset.css:397” (background is grey – #666)

    .button, .button:visited, input[type="submit"], input[type="button"], .generic-button a {
    font-style: normal;
    border: none;
    background: #666 url(images/button-gradient.png) repeat-x;
    display: inline-block;
    padding: .75em 2em;
    color: white;
    text-decoration: none;
    -moz-border-radius: 1.25em;
    -webkit-border-radius: 1.25em;
    border-radius: 1.25em;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: visible;
    line-height: 1;
    margin: 5px;
    margin-left: 0;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    zoom: 1;
    }

    Does this help?

    #2882

    yoyaoh
    Member
    Post count: 20

    Ok! I finally figured out what it was! I had to do a fresh install of everything to check. In a nutshell, it was BP-Template-Pack.

    I was using an old theme that didn’t natively support BP, so I used the Template Pack plugin to integrate BP into the theme. I went through the steps of the Template Pack and so it must’ve done something somewhere and changed the settings to override. Because when I deactivated just the Template Pack on the old wordpress setup, it was still grabbing the wrong css.

    So now that I have everything fresh and didn’t go through the Template Pack steps this time, it works well.

    So nice to have all these colors!

    Thanks for all your help and hopefully this topic will help someone else with this unique situation!

    #2885

    themeweaver
    Keymaster
    Post count: 730

    Yes the template pack would be overwriting the themes BuddyPress styles.

    Glad its all working now.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.