Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect Joomla 2.5 Support (CLOSED)
  7. Facebook PageTab/Canvas Page format isuse

Topic-icon Facebook PageTab/Canvas Page format isuse

Active Subscriptions:

None
12 years 9 months ago - 12 years 9 months ago #36268 by y021ahe
Hi,
I am kind of guessing that I may know the answer to this already, but here goes anyway.

I am trying to use the page tab and/or canvas feature of facebook which lets me show my webpage directly in facebook - I use the JFBConnect extension to achieve this.

My template is 1253px wide and I am making it a fixed width of 760px with a second template used to show it on Facebook.

When I look at the Overall structure in Facebook, it looks fine, but the Article details do not seem to get resized properly, they seem to show the text at the original size, but as the template width has been decreased, it chops off the left side of the page.

I am not sure how to fix this, whether it relates to the extension, or will be something in the template or css - I was wondering if you were able to offer any advice to help me.

You can see the issue I have in the attached link Jackylegs_FB_Page

Thanks for any help

Rob
Last edit: 12 years 9 months ago by y021ahe.
The topic has been locked.
Support Specialist
12 years 9 months ago #36291 by alzander
Rich,
In the page output, you look to be using something loading some content through AJAX.. or something, I can't really tell. Either way, there's some CSS that's being inserted into the page (somewhere) that looks like:
div#klixoSlider_205, div#moduleSlideShow205 {
background-color: #000000;
width: 800px;
height: 550px;
}
That width of 800px is where things are going south. If you can find that and change it to something like 400px, things look good.

I hope that helps your investigation, but if not, let me know and I can try to dig up more info.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 9 months ago #36328 by y021ahe
Hi Alex,
I have changed it to 400 from 800 whilst I am doing the testing, but it is still showing the same behaviour

Would you by any chance be able to have another look and see if there is anything that you could see, which may cast light on the issue for me?

Thanks

Rich
The topic has been locked.
Active Subscriptions:

None
12 years 9 months ago #36434 by y021ahe
Hi Alex, I know you guys are busy, but would you be able to advise me when you'd be able to have a look at my site.

Ive tried disabling plugins and modules to no avail, so I am afraid I really need your help

Thanks

Rich
The topic has been locked.
Support Specialist
12 years 9 months ago #36441 by alzander
Rich,
The text is no longer being chopped for me when I look at your site through the Facebook App area. The images are over-hanging and being hidden somewhat since they are 800px wide.

One thing I am seeing (in Chrome on a Mac) is that the height of the window keeps growing, and growing, and growing. It's very strange, and I'm not sure if you're seeing it happen as well or if it's something strange with me testing. If you are seeing it, in the Canvas App area of JFBConnect, I'd recommend setting the "Automatic Resizing" setting to "Disabled", which should fix that.

Let me know if that helps or what you're seeing now (image and text overhanging, or just text).

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 9 months ago - 12 years 9 months ago #36476 by y021ahe
Alex
I think my main problem as you have rightly pointed out (and I can't believe others don't experience this) is that I have photos in articles which are greater than the 760px full width that Facebook allows. The articles don't seem to be resized like every other part of the template - they seem to push the text down (i guess where there are spaces).

I've shown an attachment suggesting the issue I have, i've shrunk the screen to try to show more of the screen, but you can see that the picture is too big and the text has moved.

Do you have any suggestions how articles can be resized or addressed to mitigate this?

BTW I have removed the automatic resizing and its corrected the height issue as you had suggested

File Attachment:


Thanks

Rich
Last edit: 12 years 9 months ago by y021ahe.
The topic has been locked.
Support Specialist
12 years 9 months ago #36481 by alzander
Try this bit of magic in your CSS file:
#content_outleft img {
max-width: 100%;
}
That should not allow any images to grow larger than the content area and should work on both your canvas area and live site.

The #content_outleft is just a div I selected that should work. You may want to try a different one if that doesn't work on all pages or you feel there's a better choice.

Keep me posted on how that goes, and good luck!
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 9 months ago #36488 by y021ahe
Hi,
That was great for the image - it worked as you suggested.
Now my final I hope problem is that I can't get the font-size in the articles to reduce in size - it seems to stay at the size that it was defined as in the actual article. I use the TinyMCE editor to edit the articles and this has set the text to 6 (24pt). I can't find any way of reducing this size with a template override - it is referenced in the "inspect element(Q)" as Inherited from Span (x-large) - see attachment

File Attachment:


Sorry to ask, but still looking for your advice

Rich
The topic has been locked.
Support Specialist
12 years 9 months ago #36526 by alzander
It seems like all your text has the Normal-C class around it. If so, the following CSS should adjust it however you want:
.Normal-C {
font-size: 14px !important;
}
Try that and let me know how it goes.

Good luck,
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 9 months ago #36545 by y021ahe
Alex,
Thanks for your advice - that seems to have done half the job - weirdly.

It has changed some of the text on the first page, but hasn't change some other, and I can't seem to make any changes that correct that.

Both the sections seem to be Normal-C, but for some reason, some of the text has changed to 14px and some is still retained as 26px?

I just can't work out why

Rich
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect Joomla 2.5 Support (CLOSED)
  7. Facebook PageTab/Canvas Page format isuse
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS