Failed to Remove borders from widget

[cryoffalcon]

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.blogspot.com/201...ng-author.html

And this is the image just to clarify which borders i am trying to get rid off
http://content.screencast.com/users/...34/borders.png

[chrishirst]

!important is something of a 'hack'

Looking at the code here and the code from the page as shown by using the webdeveloper toolbar you may be editing/adding the wrong CSS rules.

This is what it shows for the 'footer' block of the facebook section.

http://static.ak.fbcdn.net/rsrc.php/v1/y5/r/FspA8FdasI-.css
.fbConnectWidgetFooter .fbFooterBorder (line 342)
{
border-top-width: 1px;
border-top-style: solid;
border-top-color: #cccccc;
margin-top: 0pt;
margin-right: 6px;
margin-bottom: 0pt;
margin-left: 6px;
padding-top: 4px;
padding-right: 3px;
padding-bottom: 4px;
padding-left: 3px;
}
.fbDarkWidget .fbConnectWidgetFooter .fbFooterBorder (line 343)
{
border-top-width: 1px;
border-top-style: solid;
border-top-color: #444444;
}

To override those, you need to add your ruleset with the same classnames AFTER the external style sheet(s) is/are loaded.

[cryoffalcon]

Originally Posted by chrishirst

!important is something of a 'hack'

Looking at the code here and the code from the page as shown by using the webdeveloper toolbar you may be editing/adding the wrong CSS rules.

This is what it shows for the 'footer' block of the facebook section.

http://static.ak.fbcdn.net/rsrc.php/v1/y5/r/FspA8FdasI-.css
.fbConnectWidgetFooter .fbFooterBorder (line 342)
{
border-top-width: 1px;
border-top-style: solid;
border-top-color: #cccccc;
margin-top: 0pt;
margin-right: 6px;
margin-bottom: 0pt;
margin-left: 6px;
padding-top: 4px;
padding-right: 3px;
padding-bottom: 4px;
padding-left: 3px;
}
.fbDarkWidget .fbConnectWidgetFooter .fbFooterBorder (line 343)
{
border-top-width: 1px;
border-top-style: solid;
border-top-color: #444444;
}

To override those, you need to add your ruleset with the same classnames AFTER the external style sheet(s) is/are loaded.

Hi,
thanks for reply, well I used the ones that you provided but none of the border changed, just to be at safe side I even used !important, though I am using inline css which will override external css but just to be more safe I used !important your code didn't help out.
And not only this your code is not covering the 3 borders, I can straight forward say it by just looking at the color codes of the borders you provided as the borders that i am talking about have these 4 colors:
1-#315C99
2-#AAAAAA
3-#D8DFEA
4-#444444

Used my favorite software (life saver) eyedropper, for the color codes of borders.

[chrishirst]

The CSS you are trying to override is buried in that mess of javascript at the very bottom of the source code, so regardless of what you put EARLIER in the document the CSS IN THE SCRIPT is what is GOING TO BE APPLIED whether your rule is set with '!important' or not.

[cryoffalcon]

Originally Posted by chrishirst

The CSS you are trying to override is buried in that mess of javascript at the very bottom of the source code, so regardless of what you put EARLIER in the document the CSS IN THE SCRIPT is what is GOING TO BE APPLIED whether your rule is set with '!important' or not.

If that is the case, how did this person did it?
here is the link see it on the right side, named as Community
http://www.deluxetemplates.net/2012/...ess-theme.html

And if you say that he has not got rid of it rather changed the color, then atleast tell me how to change colors then?

[chrishirst]

By not having the mess of javascript in the page it seems

Just view the source of the pages and take a look for yourself