Buttons in Widget on Index Page

[yoyaohMember 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!

[themeweaverKeymaster 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>

[yoyaohMember 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!

[themeweaverKeymaster 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.

[yoyaohMember 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

[yoyaohMember 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.

[themeweaverKeymaster 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.

[yoyaohMember 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%;
}

[yoyaohMember 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.

[themeweaverKeymaster 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.

[yoyaohMember 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?

[yoyaohMember 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!

[themeweaverKeymaster Post count: 730]

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

Glad its all working now.

[Author]

Posts