I will follow what you said and then I will update you.
Thank you very much for your reply.
A nice day
Antonietta

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

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

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

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

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

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

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

Hi Antonietta

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

Ciaran

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

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