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.

[Solved] Thumbnail alignment

Start
Prev
1
Next
End

katherine beal
Topic Author
Offline
New Member

13 years 9 months ago - 13 years 9 months ago #39152 by katherine beal

[Solved] Thumbnail alignment was created by katherine beal

I'm having some difficulty aligning the images to the center of the border. See link.
montgear.com/gear-reviews/backpacking/21-therm-a-rest-z-lite-sleeping-pad-review.html
please help me get the thumbnail image into the grey border.
There is also a white area around the thumbnails that i would like removed.

Also, I'm very new, so if i have to do some code changing, please be specific as to where I find the code (step by step) and how to change it.

I'm using the pro version.

Thanks,
omaskos

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

Katia
Offline
Platinum Member

13 years 9 months ago #39153 by Katia

Replied by Katia on topic Re: Thumbnail alignment

This is a conflict with your template. Go to folder plugins/content/jw_sigpro/templates/Default/template.css at line 334 and change this:

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 t;
    padding: 0;
    width: 100% ;

with this:

li.sig-block a.sig-link img.sig-image, li.sig-block a.sig-link:hover img.sig-image {
    background-position: 50% 50% !important;
    background-repeat: no-repeat;
    border: medium none;
    display: block;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important ;
}

In addition in the same folder change this at line 19:
li.sig-block with #sig58a1cbdaf8 li .sig-block

Try these changes and if you have more issues post me again.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

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

katherine beal
Topic Author
Offline
New Member

13 years 9 months ago #39154 by katherine beal

Replied by katherine beal on topic Re: Thumbnail alignment

I'm pretty new to Joomla, so bare with me.
I couldn't find the code.
I went to Plugin Manager, but didn't see a file called content. I have one file in there related to sig and thats SimpleImage Gallery PRO, when I click on that, there is no opportunity to change css code.
I also went to my Template.css under the extensions menu, but couldn't find the code on 334.
I'm not sure i'm looking in the correct place.
please help direct me.
thanks

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

katherine beal
Topic Author
Offline
New Member

13 years 9 months ago #39155 by katherine beal

Replied by katherine beal on topic Re: Thumbnail alignment

ideally, I'd like to use .png files and would like no black background, no border, just the picture, is this possible.

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

Katia
Offline
Platinum Member

13 years 9 months ago #39156 by Katia

Replied by Katia on topic Re: Thumbnail alignment

The content folder is inside plugins folder. Maybe is easier for you to ask help from your template provider so as to solve your conflict.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

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

katherine beal
Topic Author
Offline
New Member

13 years 9 months ago #39157 by katherine beal

Replied by katherine beal on topic Re: Thumbnail alignment

ok, i've had my template provider do as you suggest.
Now the pictures are all in vertical alignment with a dot on the left side, any advice you could help me with?

montgear.com/gear-reviews/backpacking/21-therm-a-rest-z-lite-sleeping-pad-review.html

I really appreciate your help, as I'm still learning Joomla.
Thanks

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

Katia
Offline
Platinum Member

13 years 9 months ago #39158 by Katia

Replied by Katia on topic Re: Thumbnail alignment

This is a conflict with your template css from this element:
.column ul li {
background: url("../images/bullet.gif") no-repeat scroll 20px 7px transparent;
line-height: 160%;
margin-bottom: 5px;
overflow: hidden;
padding-left: 30px;
}

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

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

katherine beal
Topic Author
Offline
New Member

13 years 9 months ago #39159 by katherine beal

Replied by katherine beal on topic Re: Thumbnail alignment

any idea how to fix it?

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

Katia
Offline
Platinum Member

13 years 9 months ago #39160 by Katia

Replied by Katia on topic Re: Thumbnail alignment

Try this, go to plugins/content/jw_sigpro/templates/Default/template.css folder at line 23 and change this

li.sig-block span.sig-link-innerwrapper {
    border: 1px solid #CCCCCC;
    display: block;
    float: left;
    margin: -5px 0 0 -5px;
    padding: 4px;
}

to this:

#sig58a1cbdaf8 .sig-container li.sig-block span.sig-link-innerwrapper {
    background: none !important;
    border: 1px solid #CCCCCC;
    display: block;
    float: left;
    margin: -5px 0 0 -5px;
    padding: 4px;
    overflow: visible !important;
}

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

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

katherine beal
Topic Author
Offline
New Member

13 years 9 months ago #39161 by katherine beal

Replied by katherine beal on topic Re: Thumbnail alignment

Thanks so much for your help.
I got it to work by:

change this code:
.column ul li {
background: url("../images/bullet.gif") no-repeat scroll 20px 7px transparent;
line-height: 160%;
margin-bottom: 5px;
overflow: hidden;
padding-left: 30px;
}
To this code:
.column ul li {
line-height: 160%;
margin-bottom: 5px;
padding-left: 30px;
}

then I also changed code on line 23 of plugins/content/jw_sigpro/templates/Default/template.css

changed code from:
li.sig-block span.sig-link-innerwrapper {
border: 1px solid #CCCCCC;
display: block;
float: left;
margin: -5px 0 0 -5px;
padding: 4px;
}

Changed code to:

li.sig-block span.sig-link-innerwrapper {
border: 1px solid #CCCCCC;
display: block;
float: left;
margin: -5px 0 0;
padding: 4px;
}

Seemed to work and make some space around the thumbnails.

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

Start
Prev
1
Next
End