Removing border of a shortcode object/table

  • Resolved SAphoto

    (@saphoto)


    12 years, 9 months ago

    Hello,

    My website https://www.torontobeachphoto.com has the sociable plugin installed, and I wanted to add the google plus follow icon. I had to fiddle with things so that they could be side by side instead of on top of one another. This is the code I’m using:

    <table><tr><td>
[sociable]
</td><td style="padding-left:20px;">
<g:plus href="https://plus.google.com/111889007381881270387" rel="publisher" width="300" height="69" theme="light"></g:plus>
</td></tr></table>

    It’s positioned where I want it, but with the grey border around both frames. How do I get rid of it?

Viewing 12 replies - 1 through 12 (of 12 total)

  • It is very difficult to diagnose this type of problem without being able to view the site. If you post a link to your site, someone may be able to help you.

    Thread Starter SAphoto

    (@saphoto)

    but I did. https://www.torontobeachphoto.com
    Look at the bottom. You will see the sociable icons and the google plus icon right besides. It’s positioned where I want it but with the grey border.

    Sorry, overlooked it.

    I think you can get rid of the table borders by adding this to the end of style.css:

    .art-postcontent table,
.art-postcontent table tr,
.art-postcontent table tr td
{
   border: none;
}

    That will remove the borders on all tables inside posts. If you do not want that, give the table a class and replace ‘.art-postcontent’ with your class name.

    I was not able to remove the border around the iframe for Google+.

    Thread Starter SAphoto

    (@saphoto)

    That did not remove the borders.

    Looks like the problem is the google badge itself. There is no customization possible, however there is a way to cover the grey border by adding a white one. https://www.android.com/ is doing just that but I don’t have the know-how to copy what they did.

    I just want to have the “Sociable plugin” and “Google plus” side by side without borders. I can’t believe how much time it takes to accomplish such a trivial thing! Any help would be appreciated!

    I do not see that code at the END of style.css. Please put it there and leave it there for me to see.

    Thread Starter SAphoto

    (@saphoto)

    This is what I have in the style.css, which comes from https://developers.google.com/+/plugins/badge/config:

    <!-- Place this tag in the <head> of your document -->
<script type="text/javascript">
window.___gcfg = {lang: 'en'};
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>

<!-- Place this tag where you want the badge to render -->
<g:plus href="https://plus.google.com/111889007381881270387" rel="publisher" width="300" height="69" theme="light"></g:plus>

    Then, on the home page of my blog, this is the code being used:

    <table><tr><td>
[sociable]
</td><td style="padding-left:20px;">
<g:plus href="https://plus.google.com/111889007381881270387" rel="publisher" width="300" height="69" theme="light"></g:plus>
</td></tr></table>

    I really can’t help unless you put the code I gave you at the END of style.css and leave it there.

    Thread Starter SAphoto

    (@saphoto)

    I put it at the very end. Thank you, it does take care of the sociable border. Why does it make a difference to put it at the end vs the beginning? I’d like to understand if you don’t mind.

    It does not take care of the google plus badge however. According to other forums I visited, it can only be removed by adding a white border on top, like they did on the android website. I’d like to know the code I can copy for that.

    In stylesheets, the last rule encountered for an object is the one that is in effect. When you put code at the end, it overrides all earlier rules for that object.

    The border for the G+ badge is being loaded from the G+ site. On the Android site, they made the background the same color as the border so it does not show.

    Thread Starter SAphoto

    (@saphoto)

    Thanks for the explanation! I’m learning…

    But apparently what they’re doing is to cover the badge with another elements that covers the border. This is where it’s discussed:
    https://stackoverflow.com/questions/9625646/change-google-badge-style

    So the final question.. how do I do the same?

    I have no way to test this, so it may not work at all. What was done on the Android site, as far as I can tell, was to put a link to the google site just ahead of the g:plus tag.

    I believe that it should look like this:

    <table><tr><td>
[sociable]
</td><td style="padding-left:20px;">
<a id="page-badge-border" href="https://plus.google.com/111889007381881270387"></a>
<g:plus href="https://plus.google.com/111889007381881270387" rel="publisher" width="300" height="69" theme="light"></g:plus>
</td></tr></table>

    Then, use this at the end of style.css:

    a#page-badge-border {
    border: 5px solid white;
    display: block;
    float: left;
    height: 49px;
    margin: -19px -260px 0 0;
    pointer-events: none;
    position: relative;
    width: 252px;
    z-index: 10;
}

    I suggest you use red for the border color while you adjust the height, width, and margin to hide the border. Once you have the border covered, change the color to white.

    Thread Starter SAphoto

    (@saphoto)

    and the winning combination was……

    a#page-badge-border {
    border: 5px solid white;
    display: block;
    float: left;
    height: 50px;
    margin: 12px -300px 0 0;
    pointer-events: none;
    position: relative;
    width: 290px;
    z-index: 10;
}

    THANK YOU SO MUCH SIR MAC!!! ??

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Removing border of a shortcode object/table’ is closed to new replies.