Kafle

[Syriusz76]

Dzień dobry. Bardzo Was prosze jak zrobic takie kafle https://prnt.sc/mopcjy i wstawic tu www.gim2.olawa.pl/2 (http://www.gim2.olawa.pl/2) pod slajdem?

[terra]

Który to jest szablon, ten joomla-monster ? I o których kaflach myślisz ? Latest Project ?
PS. skrzynkę PW masz przepełnioną.

[Syriusz76]

Tak w joomla monster sa tam kafle Time Machine, Analytiks i Worldwide. Chciałbym takie cos umiescic na wlasnej stronie

[siristru]

To zwyczajne moduły "Własny HTML" z obrazkiem ikonką, tekstem i odpowiednio opisane stylem CSS który nadaje im taki wygląd. I tak to trzeba zrobić :)
Niestety nikt nie poda Ci gotowego rozwiązania w postaci kodu czy instrukcji bo to są podstawy dla admina... zawsze też można sie tego nauczyć bo to nie jest trudne. Podstawowy kurs HTML i CSS. Mnóstwo takich w sieci i to za darmo.

[Syriusz76]

Z pomoca terra zainstalowalem szablon ktory daje mi mozliwosc "kafli" Ale mam pytanie jak zrobic aby po kliknieciu tych kafli wyswietlal mi sie artykul w kategori tak jak zrobilem w gornym menu "Klasy i gupy" oraz "Rekrutacja" ?

http://www.gim2.olawa.pl/2/

[siristru]

Nie chciałbym dezawuować metody i pomocnej ręki... ale po co "szablon który daje mi możliwość "kafli"?

To jak byś chciał użyć biegu wstecznego w samochodzie... i kupujesz samochód który ma "wbity" bieg wsteczny.

Te "Kafle" to po prostu moduł "Własny HTML" z odpowiednim kodem HTML opisanym CSS. Może to być link, obrazek z linkiem, ikonka, cokolwiek. Po co nowy szablon???

Jeśli twój szablon nie posiada 3 kolumn w wybranym miejscu to można utworzyć moduł i w NIM zbudować owe kafle. Oto przykład:

http://prntscr.com/mrao83

http://siristru.prolusatia.pl/

Kod HTML:


<div class="row-fluid">
<div class="span4 kol1">
<div class="kol-container">
<a class="maska" href="https://www.kwantowo.pl/"></a>
<h2>TIME MACHINE</h2>
<i class="far fa-clock"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.<p>
</div>
</div>
<div class="span4 kol2">
<div class="kol-container">
<a class="maska" href="http://www.geekweek.pl/"></a>
<h2>ANALYTICS</h2>
<i class="fas fa-chart-line"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.<p>
</div>
</div>
<div class="span4 kol3">
<div class="kol-container">
<a class="maska" href="https://niebezpiecznik.pl/"></a>
<h2>WORLD WIDE SERVICES</h2>
<i class="fas fa-globe"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.<p>
</div>
</div>
</div>

Kod CSS:


.kol1, .kol2, .kol3 {
color: #fff;
padding: 15px;
text-align: center;
}
.kol1 i, .kol2 i, .kol3 i {
font-size: 4rem;
margin: 15px 0;
}
.kol1 {background: #027EBA;}
.kol2 {background: #A1B047;}
.kol3 {background: #F78144;}
.kolumny3 {margin: 30px 0;}
.kol-container {position: relative;}
a.maska {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}

Ikonki pochodzą z https://fontawesome.com/ więc to sobie trzeba zintegrować (instrukcja zawiera tylko jeden krok i jest bajecznie prosta).

Wybaczcie, że się tak wcinam ale... no nie mogłem... zaproponować zainstalowanie szablonu by mieć kafelki...

Rozumiem, że nie każdy może znać CSS i HTML ale kod można podać... a zainteresowany może choć odrobinkę się nauczyć.

[siristru]

Masz zrobione :)

Możesz korzystać z FontAwesome: https://fontawesome.com/icons

Utworzyłem moduł "Własny" wrzuciłem kod HTML z postu powyżej.

Kod CSS wymagał drobnych modyfikacji by pasował do twojej strony, został dodany do pliku template10.css.

Wymieniłem Ci edytor z TinyMCE na JCE (skonfigurowałem go wstępnie) bo Tiny usuwał kod FontAwesome.