Follow Button Widget CSS

• 

  sbland64 · Member · Nov 12, 2013 at 12:22 am

  • Copy link
  • Add topic to favorites

  I am using the Manifest theme and i have included the Follow Button widget. I am trying to change the background color of the button style. I have located the CSS style using the browser inspector and I can edit the proper value using the inspector. I see it works when I edit the style using the inspector, but when I add the CSS to the CSS designer window, the style change does not apply. Frankly, I am unable to get the Follow Button widget CSS to take any changes. Does anyone know how to change the background color of the Follow Button widget? Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  justpi · Member · Nov 12, 2013 at 12:44 am

  • Copy link

  Is this what you tried?

  .follow-button a {
      background-color: #123456;
  }

• 

  sbland64 · Member · Nov 12, 2013 at 1:58 am

  • Copy link

  Actually, per the Safari element inspector, the style is called following-button and looks like this:

  .following-button a {
  text-decoration: none;
  color: #fff;
  background: #0074a2;
  border-radius: 2px;
  cursor: pointer;
  padding: 0 6px 0 4px;
  white-space: nowrap;
  color: #fff;
  height: 20px;
  display: inline-block;
  line-height: 2px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  }

  No matter what I do to the background color or any other style listed, it has no effect on the appearance.

• 

  justpi · Member · Nov 12, 2013 at 2:38 am

  • Copy link

  The selector is “.following-button a” when you already follow the blog, “.follow-button a” when you don’t. So try both selectors:

  .follow-button a, .following-button a {
      background-color: #123456;
  }

  If this doesn’t work, try

  .follow-button a, .following-button a {
      background-color: #123456 !important;
  }

• 

  sbland64 · Member · Nov 12, 2013 at 4:38 am

  • Copy link

  Unfortunately, I did as you suggested but still no luck.

  You can see my simple blog at http://sactosrb.wordpress.com. The follow button is a default blue color.

  For some bizarre reason it just does won’t allow me to override the CSS. I am able to override CSS of other elements. Just not the follow button.

• 

  sbland64 · Member · Nov 12, 2013 at 5:10 am

  • Copy link

  Maybe it has something to do with the fact that the widget is inside an iframe? It seems that I can control CSS outside the iframe but not inside.

• 

  justpi · Member · Nov 12, 2013 at 12:32 pm

  • Copy link

  Sorry, when I first replied I had tried the changes in Firebug only. Now that I actually tried it in my test blog I see what you mean. Maybe it’s because it’s an iframe; I don’t know – we’ll have to wait for a staff response.

• 

  designsimply · Member · Dec 8, 2013 at 12:12 am

  • Copy link

  You cannot apply CSS cross-domain. That means you cannot apply CSS to the contents of a page in an iframe if the source is served from a separate domain. In this case, the follow button uses a different domain and so you cannot adjust it with CSS. Sorry about that!