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
  1. more than a month ago
  2. Commercial Templates
  3. # 1
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
  1. more than a month ago
  2. Commercial Templates
  3. # 2
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
  1. more than a month ago
  2. Commercial Templates
  3. # 3
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
  1. more than a month ago
  2. Commercial Templates
  3. # 4
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
  1. more than a month ago
  2. Commercial Templates
  3. # 5
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
  1. more than a month ago
  2. Commercial Templates
  3. # 6
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
  1. more than a month ago
  2. Commercial Templates
  3. # 7
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
  1. more than a month ago
  2. Commercial Templates
  3. # 8
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
  1. more than a month ago
  2. Commercial Templates
  3. # 9
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

its look is better now.
I ask for you if I may see 12 signs ordered two signs for each row from mobile.
Here are two examples to see from mobile:

- https://bit.ly/2CQ7mhS

- https://bit.ly/2G670K9

Thank you very much.
Kind regards
Antonietta
  1. more than a month ago
  2. Commercial Templates
  3. # 10
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To amend you can add the following to the Custom CSS field of your template settings..

(edit to taste)

@media only screen and (max-width: 767px) {
.zodiac-link {
max-width: 70px;
}}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 11
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
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.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok