Sponsor Image

Hello

How is it possible to make the white squares, that have that white hover effect, with my own png images?
Because when I changed de default sponsors, the white squares have disapeared.

Thanks

Could You please post an url to your site?

Of course ...

http://queersicht.ch/

Thanks

I'm not quite sure what white squares are You referring to... Could You post a screenshot showing them?

I took a screenshot from your fest demosite: (as an upload attachment)
http://demo.gavick.com/joomla25/fest/

When you scroll down to sponsors, the logo from the sponsors have squares around it.
When I check the png the background is transparent.
So how can I get these squares around the sponsors logos?

(In our homepage we dont have theses squares and I like to add them because it looks nice.)

Thanks

There is a high propability that tinyMCE damaged your code - please change Editor to none in global configuration, edit sponsors module again and check ih html structure looks this way:

Code: Select all

<div class="gk-sponsors">
<h2>Sponsors</h2>
<div><a href="#"><img src="images/demo/sponsor1.png" border="0" alt="Sponsor #1" /></a> <a href="#"><img src="images/demo/sponsor2.png" border="0" alt="Sponsor #2" /></a> <a href="#"><img src="images/demo/sponsor3.png" border="0" alt="Sponsor #3" /></a> <a href="#"><img src="images/demo/sponsor4.png" border="0" alt="Sponsor #4" /></a> <a href="#"><img src="images/demo/sponsor5.png" border="0" alt="Sponsor #5" /></a> <a href="#"><img src="images/demo/sponsor5.png" border="0" alt="Sponsor #6" /></a> <a href="#"><img src="images/demo/sponsor4.png" border="0" alt="Sponsor #7" /></a> <a href="#"><img src="images/demo/sponsor3.png" border="0" alt="Sponsor #8" /></a> <a href="#"><img src="images/demo/sponsor2.png" border="0" alt="Sponsor #9" /></a> <a href="#"><img src="images/demo/sponsor1.png" border="0" alt="Sponsor #10" /></a></div>
</div>


Important is that not only entire block is wraped with <div class="gk-sponsors">, but also all anchors are wrapped with <div>

Its working now.
But how can I put the header 3 (Sponsoren) on a new line? (see picture)
Tried a few things but nothing was working. (<br> tag is not working.)
I tried also to put different <div> around "Hauptsponsoren" and "Sponsoren". Both didnt work.

I didnt change it yet on the homepage. (queersicht.ch) because its not beautiful like this.
So I'm sorry that you can't check the code.

Thanks for your Help.

Greetings.

I have created this structure:

Code: Select all

<div class="gk-sponsors">
<h2>Sponsors</h2>
<div><h3>Test</h3>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor1.png" alt="Sponsor #1"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor2.png" alt="Sponsor #2"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor3.png" alt="Sponsor #3"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor4.png" alt="Sponsor #4"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor5.png" alt="Sponsor #5"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor5.png" alt="Sponsor #6"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor4.png" alt="Sponsor #7"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor3.png" alt="Sponsor #8"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor2.png" alt="Sponsor #9"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor1.png" alt="Sponsor #10"></a>
</div>
<div><h3>Test</h3>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor1.png" alt="Sponsor #1"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor2.png" alt="Sponsor #2"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor3.png" alt="Sponsor #3"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor4.png" alt="Sponsor #4"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor5.png" alt="Sponsor #5"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor5.png" alt="Sponsor #6"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor4.png" alt="Sponsor #7"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor3.png" alt="Sponsor #8"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor2.png" alt="Sponsor #9"></a>
<a href="#" class="active"><img src="/joomla25/fest/images/demo/sponsor1.png" alt="Sponsor #10"></a>
</div>
</div>


and it worked well. You just need to add this small fix to override.css (/templates/gk_fest/css/override.css):

Code: Select all

.gk-sponsors > div {
overflow: hidden;}


Remember to enable "CSS override" in template settings - advanced section.

It's working now. Thanks for your help and your patience.
I appreciate.

No problem. Closing the topic.