1. antonietta
  2. Commercial Templates
  3. Friday, 30 November 2018
  4.  Subscribe via email
Hi Ciaran,

I am working on my web site with Fedora template with last Joomla version.
In an artcle I'd like to add something like this https://bit.ly/2RwxIfW
I have to add 12 zodiac signs and each sign must contain a link to a page dedicated to that zodiac sign.
I thought of using the Thumbs Gallery, but I'd like that when the visitor clicks on the image of the zodiacal sign,
he goes to the article dedicated to that sign.
Is it possible to customize the Thumbs Gallery or do I have to use another extension?

Thank you very much.
A nice weekend
Antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Antonietta

I think your best option here would be to create a custom module (Extensions -> Modules -> New -> Custom). Within the module the following source code was used (edit to taste)..

<a href="#" class="zodiac-link">
<img src="/URL/to/image.jpg" alt="virgo">
</a>


Repeat the above into the same module for each of your signs. Editing the # (link) and the image to your own taste. Once you have that done I can supply you with any needed CSS for specific style requirements.

Ciaran
Accepted Answer Pending Moderation
0
Votes
Undo
I will follow what you said and then I will update you.
Thank you very much for your reply.
A nice day
Antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

here is the result: https://bit.ly/2QHyiue

I'll be gratefull if you may set up the .css file.

1) I'd like 12 signs are far 35 px among them.


2) The distance between two signs rows has to be 50 px.


3) I'd like to add the name under every sign like this: https://bit.ly/2G670K9


4) Also the sign name has to be linked like this: https://bit.ly/2G670K9


Thank you very much.
A nice weekend
Antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Antonietta

First of all, you can edit the HTML for each of your signs to the following to add the text (edit for each)...

<a class="zodiac-link" href="/anto49/oroscopo-della-settimana-toro.html"> 
<img src="/anto49/images/icone-dei-12-segni-zodiacali/toro.png" alt="toro" width="120">
<h3>Zodiac Text</h3>
</a>


For the CSS you can add the following to your templates Custom CSS field (edit to taste)...

.zodiac-link {
margin: 20px 23px;
display: inline-block;
}
.zodiac-link h3 {
text-align: center;
margin: 0;
}


Ciaran
Accepted Answer Pending Moderation
0
Votes
Undo
Dear Ciaran,
thank you very much for your reply.

I followed what you said. But I found some problem.
Here is the result: https://bit.ly/2QHyiue

I'll be grateful for any help.
Kind regards
Antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Dear Ciara,

I tried to improve the layout of the signs, but some problems remain. I write this code:

<p>
<a class="zodiac-link" href="#"> <img src="/anto49/images/icone-dei-12-segni-zodiacali/ariete.png" alt="ariete" width="120" /><h3>Ariete</h3></a>
<a class="zodiac-link" href="#"> <img src="/anto49/images/icone-dei-12-segni-zodiacali/toro.png" alt="toro" width="120" /><h3>Toro</h3></a>
<a class="zodiac-link" href="#"> <img src="/anto49/images/icone-dei-12-segni-zodiacali/gemelli.png" alt="gemelli" width="120" /><h3>Gemelli</h3></a>
<a class="zodiac-link" href="#"> <img src="/anto49/images/icone-dei-12-segni-zodiacali/cancro.png" alt="cancro" width="120" /><h3>Cancro</h3></a>
<a class="zodiac-link" href="#"> <img src="/anto49/images/icone-dei-12-segni-zodiacali/leone.png" alt="leone" width="120" /><h3>Leone</h3></a>
<a class="zodiac-link" href="#"> <img src="/anto49/images/icone-dei-12-segni-zodiacali/vergine.png" alt="vergine" width="120" /><h3>Vergine</h3></a>
</p>

<p>
<a class="zodiac-link" href="#"> <img src="/anto49/images/icone-dei-12-segni-zodiacali/bilancia.png" alt="bilancia" width="120" /><h3>Bilancia</h3></a>
<a class="zodiac-link" href="#"> <img src="/anto49/images/icone-dei-12-segni-zodiacali/scorpione.png" alt="scorpione" width="120" /><h3>Scorpione</h3></a>
<a class="zodiac-link" href="#"> <img src="/anto49/images/icone-dei-12-segni-zodiacali/sagittario.png" alt="sagittario" width="120"/><h3>Sagittario</h3></a>
<a class="zodiac-link" href="#"> <img src="/anto49/images/icone-dei-12-segni-zodiacali/capricorno.png" alt="capricorno" width="120" /><h3>Capricorno</h3> </a>
<a class="zodiac-link" href="#"> <img src="/anto49/images/icone-dei-12-segni-zodiacali/acquario.png" alt="acquario" width="120" /><h3>Acquario</h3></a>
<a class="zodiac-link" href="#"> <img src="/anto49/images/icone-dei-12-segni-zodiacali/pesci.png" alt="pesci" width="120" /><h3>Pesci</h3></a>
</p>

But Joomla changed my code even if I disabled the Joomla text editor.
Thank you very much
Regards
Antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Antonietta

WYSIWYG editors like the default Tiny MCE editor included with Joomla will often wrap elements in paragraph tags on save. For this reason, I would suggest using the CodeMirror editor when working with HTML. An option to enable the CodeMirror editor is available in your Global Configuration.

Ciaran
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

thank you for your reply.
I set up Code Mirror and the appearance has improved now.
There is a problem with the first sign of each row. It and its name are not correctly set up: https://bit.ly/2QHyiue
Thank you very much.
Kind regards
Antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Antonietta

It appears some of your images are still wrapped in paragraph tags. Removing these tags should resolve the issue.

Ciaran
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Join Our Newsletter




We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.