Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post

    CSS ID and CLASS of meebo bar

    Hello,
    well it will look too dumb to ask a question like this being a user of firebug and knowing css and html. Well i want someone to tell me the exact class and id to change the colors of meebo bar. Today i spent like 2 hours but i was not able to change much of it. To understand better what i am talking about please see this picture

    http://content.screencast.com/users/...ff514/this.png

    and to see the meebo bar of which i want to change color kindly go to this link http://www.bloghuts.com you will see the meebo bar there. And if it is possible to change the text that is saying "Connect Via meebo" that would be like Awesome. But if that is not possible i would like to receive only info on how to change its colors.
    Thanks for your help in advance ^_^

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    From what I see, you can't change it. The Meebo bar is an iframe hosted on Meebo's website and you can't mess with their page style from within your own page.

    I have no idea if Meebo has a way to customize the appearance of their bar, but that would be your only direct option if they have it.

    Then again, they may have a json or xml interface that you could use in lieu of the iframe. You might want to check into that. Otherwise, you could use server-side code to cURL the desination page and create your own custom version of it, but my guess would be that this is against their terms of use. It's also going to be slower.

    In any case, your current setup won't allow you to change the style.
    Last edited by Rowsdower!; 02-16-2012 at 10:44 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Rowsdower! View Post
    From what I see, you can't change it. The Meebo bar is an iframe hosted on Meebo's website and you can't mess with their page style from within your own page.

    I have no idea if Meebo has a way to customize the appearance of their bar, but that would be your only direct option if they have it.

    Then again, they may have a json or xml interface that you could use in lieu of the iframe. You might want to check into that. Otherwise, you could use server-side code to cURL the desination page and create your own custom version of it, but my guess would be that this is against their terms of use. It's also going to be slower.

    In any case, your current setup won't allow you to change the style.
    Well i tried the !important of CSS on it and it worked on a few basic things like the font of the bar i gave it a black background but i was not able to change something special that's where i started doubting that something is wrong. So what do you think CSS can't force it?

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by cryoffalcon View Post
    Well i tried the !important of CSS on it and it worked on a few basic things like the font of the bar i gave it a black background but i was not able to change something special that's where i started doubting that something is wrong. So what do you think CSS can't force it?
    Sorry but from what I understand there is no way it worked for even basic things for styling any content actually contained in an external (i.e. "cross-domain") iframe. You are absolutely locked out of altering the external iframe content and/or style. Likewise (for example), you cannot access the external iframe page's DOM or contents even with javascript - not even to "read" from the page. The entire contents of any external iframes will be out of your website's control and beyond your website's reach.

    This is done for security reasons to cut down a major avenue of "social engineering" phishing attacks on people by programmers spoofing websites via iframe and inserting malicious javascript or redirecting users, or stealing input by changing form submission destinations, etc., etc., etc.

    The rules are different for an iframe from your own domain, but for cross-domain iframes such as this, you are just plain stuck with whatever the target page has in it. Which is why I mention that using a JSON api (if available from Meebo) to build your own bar in the page, utterly without iframes (not even a same-domain iframe would be needed), would be best.

    I just don't know anything about Meebo so I can't begin to guess whether or not they have any such api. Read up on their website and if you can't find any JSON api then post a specific question in their support forum (assuming they have one) to request that they develop one - or ask if one is available that you just didn't see.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Completely agree about iframes, but actually on that page within #meebo there are a number of elements within the DOM as well as the iframe, so theoretically you could style these.

    However, a number are bespoke elements (<m>,<path>...), and the background looks to me like it comes from:

    Code:
    <path fill="url('http://www.bloghuts.com/#meebo-canvas-8-gradient-20')" d="M 0 0 L 233 0 L 233 24 L 0 24 L 0 0" fill-opacity="1" stroke-opacity="1"/>
    I think you'd struggle to change that with css.

  • #6
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Okay to struggle to change that with CSS can you tell me what would be the Class and ID of it

    Code:
    <path fill="url('http://www.bloghuts.com/#meebo-canvas-8-gradient-20')" d="M 0 0 L 233 0 L 233 24 L 0 24 L 0 0" fill-opacity="1" stroke-opacity="1"/>
    As the issue is i am completely lost in this case, i am not able to identify the classes or ids

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    As you can see, it has neither class nor id, but the real point is that it is a Meebo specific element, with the background derived from Meebo specific code - so you can't change it with css.

    What I really meant by "you'd struggle to change that with css" is "you can't change that with css".

  • #8
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    hahahahaha Well i thought you mean there is a way out, so if can't change it, that's really bad
    but its okay, i understand sometimes it happens it reminds me of the time when i tried to keep a site inside an iframe while that site contained a code to break that iframe and at the end i had to accept my failure ^_^


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •