Embed stream in webpage. - Page 1

User 119959 Photo


Registered User
44 posts

I read through the threads here, but was unable to find any solutions to the problem, although the problem is the same. I find that when I embed the script it changes the font of the rest of page. Looked at the iframe solution, but not happy with that either. I also placed script inbetween DIV tags. No winning either.

Would like to know if anyone managed to solve this problem.

Link: http://www.onrus.coffeecup.com
Thanks
"Quis custodiet ipsos custodes."
User 38401 Photo


Registered User
10,951 posts

Hiya Paisley,

In order to be of better help we'd need to know just what it is that is changing on you. What is it that isn't showing up correctly? What browser are you using and what version is it? Which operating system are you on?

I'm viewing the page and it looks ok to me, but that's because I am not sure what it is you are trying to achieve. Here's a screenshot of what I see in Chrome, latest version 28
http://coffeecuphelp.com/jo/screenshots/8-6-2013%208-37-34%20AM.jpg
User 119959 Photo


Registered User
44 posts

It only changes the look and size of the font on the page I embed the script. Basic look and layout is perfect and I can fine tune that. I use Windows 8 and Explorer 10 as well as the latest Firefox and Safari Browsers. I like to view sites in all these to see if there is any differenes.
If you compare the Home and Contact Page with the Blog Page you may spot the difference in the Fonts. Hope this help.

Thanks.

Paisley
"Quis custodiet ipsos custodes."
User 38401 Photo


Registered User
10,951 posts

Ok I looked a lot of things over and I don't see anything that you did wrong here, so I'm going to take a wild guess here, which is most likely correct, and say that the issue here is with a conflict of CSS tags. So having said that, I "think" what you need to do is go through the CSS setup in the Stream on CC's site settings, and alter them until they look the same. To do this:
  • Log into your Stream on CC site
  • Click the link in the right hand menu to Customize Theme
  • Click Customize in the menu above the list of theme thumbnails that shows up next.
  • Click the Hardcore button to edit the CSS
  • Now browse through and find the settings for the same items on your site that are being affected and alter them.
  • You can copy the code (original code) out to a text file to keep it so you can put it back if it isn't the issue. Easiest way to make backups of the code before you alter it.

I do believe that will fix your issue. Please let us know if that does not fix it or if you need more assistance.
User 119959 Photo


Registered User
44 posts

Thanks for the reply and suggestions! Hopefully I did not caused to much disaster on the Coffeecup side of things. From the looks of things it is OK, except for the two headings in the footer. They appear bold. I used the Web Developers tool in Firefox to see what, where. My theme use fonts from Google so I added that to css and changed all the bolds to normal.
Hopefully some guru can have a look as well. Please understand I do not do design as a proffesion. Only an novice and hobby. HTML5 and CSS3 is very new to me.

Thank you for the advice. Maybe it can also hlp other CC Members to solve their problems.

Paisley
"Quis custodiet ipsos custodes."
User 271657 Photo


Senior Advisor
3,816 posts

I almost submitted this very topic last night, but was too tired to explain it :lol:
There's got to be some way to separate the Stream CSS from the site's CSS...
I can't go and redo all the site CSS... for one thing, it's already done, finished, how it needs to be – it's the Stream that needs to fit in.
I have the same thing as Paisley going on. All my <h> tags have changed fonts/sizes, <p> tags have changed fonts/sizes. Only on the page the Stream is embedded in.
The Iframe isn't good because it puts a scroll bar on longer posts – and scrolls aren't so good on mobile screens.
Besides needing a specified height which doesn't work for my responsive site.

Maybe there's some way to separate the CSS, so it could be linked to as an external style sheet and give an ID to the JS snippet?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 38401 Photo


Registered User
10,951 posts

I don't think you can do it like you're wanting to as some of the CSS is hard coded in CC's setup and we don't have access to it at all. The only thing you can do is edit the CSS that you have available in the S-Drive settings and find the items that are clashing and edit them accordingly. Not sure there is any other way to handle this as it's definitely got to be a clashing of elements, id's and classes going on here.
User 271657 Photo


Senior Advisor
3,816 posts

Unfortunately, I don't see any way to remove clashing elements, since the site and the Stream both use the same elements. They both have <h> tags and paragraphs... but the Stream CSS trumps the website CSS. :mad:
I wonder how other embeddable scripts get around this? For example, a Twitter widget.
I would hope with more sites going responsive, CC will find a way to make Streams work that doesn't require a fixed-size Iframe.
I may have to do the unthinkable and look at other blogging options for the time being.:(
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 38401 Photo


Registered User
10,951 posts

Right, but....

You can edit the tags in the S-Drive CSS settings to be identical to your website so that they are not conflicting with your website. In most cases it will only adjust the Stream setups minimally rather than leaving it and having it mess up the page itself. :)
User 271657 Photo


Senior Advisor
3,816 posts

I didn't give up on it... guess i like a challenge. :D
I've got things looking pretty good, most of the webpage is back to normal, but I haven't found whatever is changing my site's main menu. I deleted the ul/ol CSS from the Stream, but the menu is still wonky. If I can get to the bottom of that mystery, all will be well. The Stream is responsive and matches the over-all look of the site, just need to get my menu back. :)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.