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

Thomas Harrison
Topic Author
Offline
New Member

15 years 4 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 4 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 4 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 4 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 4 months ago - 15 years 4 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 4 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 3 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 3 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 3 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 3 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.