how to remove these annoying borders

Page 1 of 1

6 Replies - 1410 Views - Last Post: 12 April 2012 - 02:32 PM

#1 cryoffalcon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

how to remove these annoying borders

Posted 09 April 2012 - 07:03 AM

Hi,
I used firebug facebook fanbox, as I want to get rid of the borders, one border is all around it, 2nd and 3rd both are on top.
here is the code that i got from firebug but still when I implemented it in my CSS even with !important it didn't work.

Code from Firebug


.fan_box .connections {
    border-top: 1px solid #D8DFEA;
    min-height: 150px;
    padding: 10px 0 4px 10px;
}


When i change it using firebug then it works but when I use it in my CSS, it doesn't work.
Here is the link to the testing page where this FB fan box exists http://bloghutsbeta....ing-author.html

And this is the image just to clarify which borders i am trying to get rid off
http://content.scree...834/borders.png

Is This A Good Question/Topic? 0
  • +

Replies To: how to remove these annoying borders

#2 X-spert  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 56
  • Joined: 25-August 11

Re: how to remove these annoying borders

Posted 09 April 2012 - 08:08 AM

View Postcryoffalcon, on 09 April 2012 - 07:03 AM, said:

Hi,
I used firebug facebook fanbox, as I want to get rid of the borders, one border is all around it, 2nd and 3rd both are on top.
here is the code that i got from firebug but still when I implemented it in my CSS even with !important it didn't work.

Code from Firebug


.fan_box .connections {
    border-top: 1px solid #D8DFEA;
    min-height: 150px;
    padding: 10px 0 4px 10px;
}


When i change it using firebug then it works but when I use it in my CSS, it doesn't work.
Here is the link to the testing page where this FB fan box exists http://bloghutsbeta....ing-author.html

And this is the image just to clarify which borders i am trying to get rid off
http://content.scree...834/borders.png


Hi,
Try this (put this class in your css code, you can try also to add !important):
This is for box border...
.fbConnectWidgetTopmost {
    border: none;
}


For first line (in top), this classes: 
.fan_box .connections {
    border-top: none;
}


And for second line (in bottom), this classes:
.fbConnectWidgetFooter .fbFooterBorder .fbDarkWidget .fbConnectWidgetFooter .fbFooterBorder {
    border-top: none;
}


This should be all...
I have tested just in browser.
Good luck!

This post has been edited by X-spert: 09 April 2012 - 08:10 AM

Was This Post Helpful? 0
  • +
  • -

#3 cryoffalcon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

Re: how to remove these annoying borders

Posted 09 April 2012 - 10:17 AM

View PostX-spert, on 09 April 2012 - 08:08 AM, said:

View Postcryoffalcon, on 09 April 2012 - 07:03 AM, said:

Hi,
I used firebug facebook fanbox, as I want to get rid of the borders, one border is all around it, 2nd and 3rd both are on top.
here is the code that i got from firebug but still when I implemented it in my CSS even with !important it didn't work.

Code from Firebug


.fan_box .connections {
    border-top: 1px solid #D8DFEA;
    min-height: 150px;
    padding: 10px 0 4px 10px;
}


When i change it using firebug then it works but when I use it in my CSS, it doesn't work.
Here is the link to the testing page where this FB fan box exists http://bloghutsbeta....ing-author.html

And this is the image just to clarify which borders i am trying to get rid off
http://content.scree...834/borders.png


Hi,
Try this (put this class in your css code, you can try also to add !important):
This is for box border...
.fbConnectWidgetTopmost {
    border: none;
}


For first line (in top), this classes: 
.fan_box .connections {
    border-top: none;
}


And for second line (in bottom), this classes:
.fbConnectWidgetFooter .fbFooterBorder .fbDarkWidget .fbConnectWidgetFooter .fbFooterBorder {
    border-top: none;
}


This should be all...
I have tested just in browser.
Good luck!



Thanks for your quick reply, before I apply I thought we have got it but God, not even a single border change. I have your given code still there intact you can see, I even have used !important tag with it but still no hope, do you have any idea why is it so?
Was This Post Helpful? 0
  • +
  • -

#4 X-spert  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 56
  • Joined: 25-August 11

Re: how to remove these annoying borders

Posted 10 April 2012 - 01:10 AM

Hi,
You can solve this, very easy, with jQuery...
Was This Post Helpful? 0
  • +
  • -

#5 cryoffalcon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

Re: how to remove these annoying borders

Posted 10 April 2012 - 06:19 AM

View PostX-spert, on 10 April 2012 - 01:10 AM, said:

Hi,
You can solve this, very easy, with jQuery...


Then why don't you tell me?
Was This Post Helpful? 0
  • +
  • -

#6 X-spert  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 56
  • Joined: 25-August 11

Re: how to remove these annoying borders

Posted 10 April 2012 - 08:06 AM

View Postcryoffalcon, on 10 April 2012 - 06:19 AM, said:

View PostX-spert, on 10 April 2012 - 01:10 AM, said:

Hi,
You can solve this, very easy, with jQuery...


Then why don't you tell me?


You will add the jQuery library in your <head> tag like this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


Then you will write this (in <head> tag): 
<script>
$('.fbConnectWidgetTopmost').live( function(){
   $(this).css('border':'none');
}); 
</script>


...or, if that not worked, try this:
<script>
$(function(){
   $('.fbConnectWidgetTopmost').css('border':'none');
}); 
</script>

This is the first part...
I did not test it, if did not work I'll try to test and resolve it.

Good luck!

This post has been edited by X-spert: 10 April 2012 - 08:09 AM

Was This Post Helpful? 0
  • +
  • -

#7 cryoffalcon  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 03-February 11

Re: how to remove these annoying borders

Posted 12 April 2012 - 02:32 PM

View PostX-spert, on 10 April 2012 - 08:06 AM, said:

View Postcryoffalcon, on 10 April 2012 - 06:19 AM, said:

View PostX-spert, on 10 April 2012 - 01:10 AM, said:

Hi,
You can solve this, very easy, with jQuery...


Then why don't you tell me?


You will add the jQuery library in your <head> tag like this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


Then you will write this (in <head> tag): 
<script>
$('.fbConnectWidgetTopmost').live( function(){
   $(this).css('border':'none');
}); 
</script>


...or, if that not worked, try this:
<script>
$(function(){
   $('.fbConnectWidgetTopmost').css('border':'none');
}); 
</script>

This is the first part...
I did not test it, if did not work I'll try to test and resolve it.

Good luck!



Hi,
I used the script, it didn't work, both of them
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1