COMMUNITY FORUM

Please note that official support for commercial extensions & templates is provided in the Subscriber Help Desk.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.

Thumbnail layout issues in IE, Firefox, & Safari

Start
Prev
1
Next
End

Thomas Harrison
Topic Author
Offline
New Member

15 years 7 months ago #26822 by Thomas Harrison

Thumbnail layout issues in IE, Firefox, & Safari was created by Thomas Harrison

I am having a problem with V2.0.4 for Joomla 1.5. In IE 7 & 8 my thumbnails display horizontally with a small vertical offset. In IE 7 & 8, Firefox 3.5 & Safari 4.0 all of the thumbnail images are shifted slightly down and to the right of the image background. After I click on a thumbnail the full size images display correctly.

Site: www.vncsales.com
Login Required
Username: webuser
Password: webuser
Page: www.vncsales.com/index.php?option=com_content&view=article&id=4&Itemid=6

Please Log in or Create an account to join the conversation.

Yiota
Visitor

15 years 7 months ago #26823 by Yiota

Replied by Yiota on topic Re: Thumbnail layout issues in IE, Firefox, & Safari

Your template's CSS seems to overwrite the plugin's CSS.

First of all make a template override of the plugin (read here how: www.joomlaworks.net/content/view/51/41/ )

Then go to templates/your template/html/jw_sigpro/plugin template you are using/template.css and find and replace the following classes:

li.sig-block {
background:transparent none repeat scroll 0 0 !important;
float:left !important;
margin:2px;
padding:0 !important;
}

li.sig-block a.sig-link img.sig-image {
background-position:50% 50%;
background-repeat:no-repeat;
border:medium none;
display:block;
margin:0;
}

Please Log in or Create an account to join the conversation.

Thomas Harrison
Topic Author
Offline
New Member

15 years 7 months ago #26824 by Thomas Harrison

Replied by Thomas Harrison on topic Re: Thumbnail layout issues in IE, Firefox, & Safari

This worked great. Thanks for your help. Where did you come up with the changes to the template listed below:

li.sig-block {
background:transparent none repeat scroll 0 0 !important;
float:left !important;
margin:2px;
padding:0 !important;
}

li.sig-block a.sig-link img.sig-image {
background-position:50% 50%;
background-repeat:no-repeat;
border:medium none;
display:block;
margin:0;
}

Was this in the documenation somewhere?

Does this apply to the Artistic, Default or Elegant templates or just the Sleek template?

Please Log in or Create an account to join the conversation.

Yiota
Visitor

15 years 7 months ago #26825 by Yiota

Replied by Yiota on topic Re: Thumbnail layout issues in IE, Firefox, & Safari

No it does not go with the documentation since this "problem" occurs with the joomla template you are using and not the plugin. We are doing the changes at the plugin because it's easier though instead of having to change the whole CSS of the template in order for the plugin to show correctly.

In order for the CSS provided to work with the other plugin styles you're going to have to make the overrides as well and put the CSS we put to the Default style to the others too.

Please Log in or Create an account to join the conversation.

Thomas Harrison
Topic Author
Offline
New Member

15 years 7 months ago - 15 years 7 months ago #26826 by Thomas Harrison

Replied by Thomas Harrison on topic Re: Thumbnail layout issues in IE, Firefox, & Safari

I tried making the following changes to the default template:

/* Thumbnail */
/* Rem by KBC li.sig-block { float:left; background:#fff !important; margin:5px; padding:0; } &*/
/* Next line added by KBC*/
li.sig-block {
background:transparent none repeat scroll 0 0 !important;
float:left !important;
margin:2px;
padding:0 !important;
}


/* width:33%; to force columns */
li.sig-block span.sig-link-wrapper { display:block; float:left; margin:0; padding:0 5px 5px 0; background:url(shadowAlpha.png) no-repeat right bottom; }
li.sig-block span.sig-link-innerwrapper { display:block; float:left; margin:-5px 0 0 -5px; padding:4px; border:1px solid #ccc; }
li.sig-block a.sig-link,
li.sig-block a.sig-link:hover { position:relative; float:left; display:block; padding:0; margin:0; border:none; }
li.sig-block a.sig-link { color:#eee; }
li.sig-block a.sig-link:hover { color:#222; text-decoration:none; }
/* Rem by KBC li.sig-block a.sig-link img.sig-image, */
/* Next line added by KBC */
li.sig-block a.sig-link img.sig-image {
background-position:50% 50%;
background-repeat:no-repeat;
border:medium none;
display:block;
margin:0;
}
li.sig-block a.sig-link:hover img.sig-image { display:block; width:100%; height:100%; padding:0; margin:0; border:none; background-repeat:no-repeat; background-position:50% 50%; }
li.sig-clr { clear:both; float:none !important; height:0 !important; line-height:0 !important; border:none !important; background:none !important; width:auto; margin:0 !important; padding:0 !important; }

It works fine in Safari but in IE each thumbnail is offset by a line like it was in the original code.

Please Log in or Create an account to join the conversation.

Yiota
Visitor

15 years 7 months ago #26827 by Yiota

Replied by Yiota on topic Re: Thumbnail layout issues in IE, Firefox, & Safari

Replace with the following CSS the templates/modifiedtemplate/html/jw_sigpro/Default/template.css file.

ul.sig-container { clear:both; list-style-image:none; list-style-position:outside; list-style-type:none; margin:8px auto !important; overflow:hidden; padding:8px 0 !important; }
ul.sig-container-single { float:left; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0 !important; padding:8px 0 !important; }
li.sig-block { background:none !important; float:left !important; margin:2px; padding:0 !important; }
li.sig-block span.sig-link-wrapper { background:transparent url(shadowAlpha.png) no-repeat scroll right bottom; display:block; float:left; margin:0; padding:0 5px 5px 0; }
li.sig-block span.sig-link-innerwrapper { background:#FFFFFF none repeat scroll 0 0; border:1px solid #CCCCCC; display:block; float:left; margin:0; padding:4px; }
li.sig-block a.sig-link,
li.sig-block a.sig-link:hover { border:medium none; display:block; float:left; margin:0; padding:0; position:relative; }
li.sig-block a.sig-link { color:#EEEEEE; }
li.sig-block a.sig-link:hover { color:#222222; text-decoration:none; }
li.sig-block a.sig-link img.sig-image,
li.sig-block a.sig-link:hover img.sig-image { background-position:50% 50%; background-repeat:no-repeat; border:medium none; display:block; height:100%; margin:0; padding:0; width:100%; }
li.sig-clr { clear:both; float:none !important; height:0 !important; line-height:0 !important; margin:0 !important; padding:0 !important; width:auto; }
span.sig-pseudo-caption,
span.sig-caption { bottom:0; display:block; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; left:0; padding:2px 4px; position:absolute; right:0; text-align:center; }
li.sig-block a.sig-link span.sig-pseudo-caption { background:#000000 none repeat scroll 0 0; }
li.sig-block a.sig-link:hover span.sig-pseudo-caption { background:#FFFFFF none repeat scroll 0 0; }
span.sig-pseudo-caption { opacity:0.7; }
span.sig-pseudo-caption b { visibility:hidden; }
span.sig-popup-caption { color:#C63C13; font-family:Georgia, "Times New Roman", Times, serif; font-size:13px; font-weight:bold; }
a.sig-download-link,
a.sig-download-link:hover { background:transparent url(disk.png) no-repeat scroll left center; padding:4px 0 4px 20px; }
div.sig-mod-position { background:#FFFFDD none repeat scroll 0 0; border-bottom:1px solid #CCCCCC; border-top:1px solid #CCCCCC; margin:8px 0; padding:4px; text-align:center; }

Please Log in or Create an account to join the conversation.

Thomas Harrison
Topic Author
Offline
New Member

15 years 7 months ago #26828 by Thomas Harrison

Replied by Thomas Harrison on topic Re: Thumbnail layout issues in IE, Firefox, & Safari

That did it, thanks for all your help.

Please Log in or Create an account to join the conversation.

colincasey
Offline
New Member

15 years 7 months ago #26829 by colincasey

Replied by colincasey on topic Re: Thumbnail layout issues in IE, Firefox, & Safari

Hi

I have the same problem so it seems strange to buy something and then have to make modifications to get it to go

I have a client that uses Artisteer to make templates and he uploads them himself as he changes his site looks every few weeks. He does no changes, just uploads them.

With your plugin, i will have to make these changes for him, which will be a pain.

IMHO Its not normal to have to modify a Site template for a plugin, it should be the other way round.

I have made the changes as you have said but in my case firefox and chrome is OK but IE8 still the same with each thumb lower than the next.

Test page at

www.ppo.co.uk/bimbo/index.php?option=com_content&view=category&layout=blog&id=11&Itemid=25

View in IE

This will be an ongoing issue if there is not a simpler way to use do it

Its a great plugin but needs this problem sorting so its simple as it says in its name

Please Log in or Create an account to join the conversation.

Yiota
Visitor

15 years 7 months ago #26830 by Yiota

Replied by Yiota on topic Re: Thumbnail layout issues in IE, Firefox, & Safari

I don't see the float:left in IE. Are you sure you have put the code provided above to replace the plugins css?

Please Log in or Create an account to join the conversation.

colincasey
Offline
New Member

15 years 7 months ago #26831 by colincasey

Replied by colincasey on topic Re: Thumbnail layout issues in IE, Firefox, & Safari

While doing the changes the site owner changed the template so the correct css is there but not on the template that was default

The new template almost looked the same so i could not tell

I have just copied the folder and placed it in his new template and it works

I think this proves that fact that doing changes in the template just will not work as it takes away the chance of changing templates without work

These changes need to be done in the plugin as the plugin will not be changed as often

maybe you could add a selection box that allows us to use our own css so its not overwritten when you update

So, its fixed for now until he changes his template again and since Artisteer allows the user to change template often i hope you find a way to do this

Please Log in or Create an account to join the conversation.

Yiota
Visitor

15 years 7 months ago #26832 by Yiota

Replied by Yiota on topic Re: Thumbnail layout issues in IE, Firefox, & Safari

The CSS I have written above is not supposed to be put inside yout template's CSS but inside the plugin's CSS. Once put inside the plugin's CSS it won't matter what template your client uses.

Please Log in or Create an account to join the conversation.

colincasey
Offline
New Member

15 years 7 months ago #26833 by colincasey

Replied by colincasey on topic Re: Thumbnail layout issues in IE, Firefox, & Safari

Yes i can do that but earlier you have said that if we modify the plugin css it will be changed back when you update, so is this now the standard plugin CSS?

Thanks, sorry for being a pain

Please Log in or Create an account to join the conversation.

Yiota
Visitor

15 years 7 months ago #26834 by Yiota

Replied by Yiota on topic Re: Thumbnail layout issues in IE, Firefox, & Safari

To avoid getting the override CSS of the plugin, which is inside the template, each time you change templates, I just recommend as a solution to replace the plugin's CSS file instead and once an update is released, before updating, backup the CSS file and replace it afterwards.

Please Log in or Create an account to join the conversation.

colincasey
Offline
New Member

15 years 7 months ago #26835 by colincasey

Replied by colincasey on topic Re: Thumbnail layout issues in IE, Firefox, & Safari

Thats what i will do as long as you dont update every other week all will be OK

Thanks

Please Log in or Create an account to join the conversation.

Start
Prev
1
Next
End