Recent
Categories
View Replies (6)

Adding a 1 px border in a module

  1. Issue
0
Votes
Undo
  1. antonietta
    antonietta
  3. Commercial Templates
  4. Monday, 28 January 2019
  5.  Subscribe via email
Hi Ciaran,

I am working in my web site with Fedora template (Joomla 3.9.2): https://bit.ly/2Ws1jtS
In home page I have to add a rectangle with white border around the 12 zodiac signs.
See the attachment.

The module "Oroscopo della settimana" code is :

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


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

What I have to add to get a white border around?
Thank you very much.
Regards
Antonietta
Attachments (1)
rettangolo-segni.jpg rettangolo-segni.jpg
Responses (6)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To amend you can add the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.zodiac-link img {

    box-shadow: 0 0 0 1px #fff;

    border-radius: 50%;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
antonietta
antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

I followed your advice. But I did not get the result: https://bit.ly/2Ws1jtS
Thank you very much.
A nice day
Antonietta.
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Antonietta

Maybe I misunderstand you request. Following is how we currently see your icons... https://screenshots.firefox.com/hAjel1ZpgAHhb4Tk/www.oroscopoetarocchi.it

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
antonietta
antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,
I thank you for the answer. The effect is very beautiful!!!
I think I'll leave it on the home page.

But I wish to get a different result. See the screenshot that I attached in the first post 3 days ago.
I need a rectangle with a white border of 1 pixel.

Thank you very much.
Regards
Antonietta
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Ah my apologies. I misunderstood.

To amend you can add the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.contentbottom .custom {

    border: 1px solid white;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
antonietta
antonietta
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

everything is working very well now.
Thank you very much.
A nice weekend.
Antonietta
  1. more than a month ago
  2. Commercial Templates
  3. # 6
  • Page :
  • 1


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