PDA

Zobacz pełną wersję : Modul użytkownika



michal890203
12-08-2013, 12:48
Witam.

Tnę layout pod Joomle 3.1.5 Próbuje stworzyć moduł który będzie wyświetlał kilka artykułów/pozycji oraz jego treść będzie edytowalna bez użycia HMTL/CSS. Problem jest taki, że nie mam pomysłu jak go zrobić :]. Zaznaczę od razu, że nie jest to layout mojego autorstwa i służy on wyłącznie do celów szkoleniowych. Nie proszę tu też o kompletny/gotowy moduł tylko pomysł jak to zrealizować w Joomli, jeśli nie poradzę sobie to będę prosił o kolejne wskazówki.

Moduł wygląda tak:

6892

Kod html

<article class="reasons">
<h2>Vestibulum dapibus, mauris nec</h2>
<h4>Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id</h4>
<div class="reason">
<div class="reason-line"></div>
<div class="number">1</div>
<h5>Suspendisse a pellentesque</h5>
<p>Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum </p>
</div>
<div class="reason">
<div class="reason-line"></div>
<div class="number">2</div>
<h5>Suspendisse a pellentesque</h5>
<p>Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum </p>
</div>
<div class="reason">
<div class="reason-line"></div>
<div class="number">3</div>
<h5>Suspendisse a pellentesque</h5>
<p>Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum </p>
</div>
<div class="reason">
<div class="reason-line"></div>
<div class="number">4</div>
<h5>Suspendisse a pellentesque</h5>
<p>Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum </p>
</div>
<div class="more-reasons"><a href="">See all the reasons why you'll love us</a></div>
</article>

kod CSS

/* powody/reasons */
section.reasons {
height: 360px;
}


section.reasons > div {
height: 380px;
width: 334px;
background: url('../images/reasons.png');
float: left;
}

section.reason > article {
width: 606px;
float: left;
}

article.reasons {
float: left;
margin: 0 0 0 10px;
width: 596px;
}

article > div.reason {
float: left;
width: 293px;;
}

/* linia na powodem */

.reason-line {
height: 1px;
width: 293px;
background: linear-gradient(left, rgba(159, 178, 196, 1) 0px, rgba(159, 178, 196, 1) 54px, rgba(228, 228, 228, 1) 55px, rgba(228, 228, 228, 1) 293px);
background: -moz-linear-gradient(left, rgba(159, 178, 196, 1) 0px, rgba(159, 178, 196, 1) 53px, rgba(228, 228, 228, 1) 54px, rgba(228, 228, 228, 1) 293px);
background: -o-linear-gradient(left, rgba(159, 178, 196, 1) 0px, rgba(159, 178, 196, 1) 53px, rgba(228, 228, 228, 1) 54px, rgba(228, 228, 228, 1) 293px);
background: -webkit-linear-gradient(left, rgba(159, 178, 196, 1) 0px, rgba(159, 178, 196, 1) 53px, rgba(228, 228, 228, 1) 54px, rgba(228, 228, 228, 1) 293px);
background: -ms-linear-gradient(left, rgba(159, 178, 196, 1) 0px, rgba(159, 178, 196, 1) 53px, rgba(228, 228, 228, 1) 54px, rgba(228, 228, 228, 1) 293px);
margin: 10px 0 0;
}


/* numer powodu */

div.reason > div.number {
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(237, 237, 237, 1) 100%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(225, 225, 225, 1) 100%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(225, 225, 225, 1) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(225, 225, 225, 1) 100%);
background: linear-gradient(top, rgba(217, 222, 223, 1) 0%, rgba(163, 163, 163, 1) 100%);
border: 1px solid #CACACA;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 -4px 0 0 #449CD7 inset, 0 0 2px 0 #A0A0A0;
color: #366593;
float: left;
font: 31px Patua One;
height: 50px;
margin: 15px 5px 5px 0;
padding-top: 10px;
text-align: center;
width: 53px;
}

div.reason > h5 {
float: left;
}

div.reason > p {
color: #646464;
float: left;
font: 12px Arial;
margin: 0 10px;
width: 213px;
}

div.reason:nth-child(1n+1) {
margin-right: 5px;
}

.more-reasons a {
color: #449CD7;
float: left;
font: bold 13px Arial;
margin: 15px;
padding-left: 20px;
background: url('../images/more-reason-icon.png') no-repeat center left;
}

.more-reasons a:hover {
color: #646464;
}

P.S. Jeśli czegoś istotnego nie podałem lub wybrałem zły dział (wydaje mi się odpowiedni), z góry przepraszam.

palyga007
12-08-2013, 12:57
Szczerze, to za bardzo nie mam pojęcia co ty właściwie wyprawiasz :)

Próbuje stworzyć moduł który będzie wyświetlał kilka artykułów
Moduł czy pozycje dla modułu? bo to 2 diametralnie różne sprawy
Zainteresuj się modułem gavick newshowpro gk5
Wystarczy go odpowiednio ostylować i gotowe...

michal890203
12-08-2013, 13:23
Moduł. Pozycję to umiem stworzyć i wykorzystać :).

Gotowe moduły odpadają.

zwiastun
12-08-2013, 13:47
Próbuje stworzyć moduł który będzie wyświetlał kilka artykułów/pozycji oraz jego treść będzie edytowalna bez użycia HMTL/CSS. Problem jest taki, że nie mam pomysłu jak go zrobić :].

Problem raczej w tym, że nie bardzo zdajesz sobie sprawę z tego, czym w Joomla jest moduł. W szablonie nie umieszcza się modułów - umieszcza się pozycje modułów lub kod wywołujący konkretny moduł.

Do prezentacji treści w sposób, w jaki sobie wymyśliłeś, można skorzystać z modułu zaproponowanego przez @palyga007 tudzież innych, oferujących mniej opcji.
Możesz sobie również umieścić treść w module Własny HTML i ostylować. Nie ma tam żadnej filozofii: tekst, 5 obrazków, dwie kolumny.

palyga007
12-08-2013, 14:03
Dlaczego gotowe moduły odpadają?

To wrzuć mi jeszcze kod php tego modułu to coś się może podpowiem