Eigenen Joomla Modulstil erstellen

[MisterPresident]

Hallo,
ich bin zur Zeit am Programmieren einer Homepage. Ich bin ein ziehmlicher Quereinstieiger da ich kaum HTML/CSS/JavaScript/PHP Erfahrung habe. Jedoche kann ich C# bzw. C++ und ich kann eig. gut aus dem Internet lernen. Nur zur Zeit finde ich einfach nichts wie ich mir einen eigenen Joomla-Modulstil erstellen kann. Ich weiß das es einige Non-Commercial-Stile gibt doch ich würde es gernen von Anfang an selber Programmieren und somit die Sprachen lernen. Jedoch habe ich keine Ahnung wie Joomla und ein Stil Kommuniziert.. Hat da jemand ein Tutorial oder so ? Ich finde leider nichts..

DANKE ))
Lukas

 

[kolpi]

Hallo,

ich nehme mal an du meinst ein Template mit "Joomla-Modulstil".
Ein Template besteht immer aus eine Index.php Datei, mehrere CSS files (template.css ist meistens das Hauptdesign) und dann noch der Bilderordner.


Ich habe es immer so gelöst:
Ich suche mir ein Template aus, die etwa die Struktur meiner Vorstellung passt.
Im index.php habe ich die statische Texte geändert, anpassung der Grösse der Modulpositionen geändert.
Im template.css habe ich die Farben/Ausrichtung/Grössen angepasst, damit es mit den ausgetauschten bilder passt.

Auf der offizele Seite von Joomla findet man auch einige Tutorials:
zb: http://docs.joomla.org/Creating_a_basic_Joomla!_template
Ansonsten gibt es auch das Tool Artisteer, womit man Templates erstellen kann.


ich hoffe es hilft dir weiter

Gruss Kolpi

 

[MisterPresident]

Danke schon mal, die Grundform habe ich ja selber schon gestaltet also die .css,.. ich möchte nur die Menüleiste usw. animieren - und ja selber gestalten, wenn du weißt was ich meine

 

[Daaron]

Alles was mit Animationen zu tun hat ist entweder CSS3 (und nix für den IE), Flash (und somit verachtenswert) oder JavaScript. Das hat alles wenig mit dem CMS zu tun.

 

[MisterPresident]

Das weiß ich ja alles...

<div id="warper">

	<div id="bg"><jdoc:include type="modules" name="background" style="xhtml" /></div>

	<div id="head">
		<div id="suche"><jdoc:include type="modules" name="suche" style="xhtml" /></div><!--#suche-->
		<div id="sprache"><jdoc:include type="modules" name="sprache" style="xhtml" /></div><!--#suche-->
	</div><!--#head-->
	
	<div id="banner">

	</div><!--#banner-->
	
	<div id="content">
		<div id="header"><jdoc:include type="modules" name="header" style="xhtml" /></div><!--#header-->
		<div id="component"><jdoc:include type="component" style="xhtml"/></div><!--#component-->
		<div id="menu"><jdoc:include type="modules" name="left" style="neuerstyle" /></div><!--#menu-->	
	</div><!--#content"-->
	
	<div id="footer"><jdoc:include type="modules" name="footer" style="xhtml" /></div><!--#footer-->
	
	<div id="pfeil"><jdoc:include type="modules" name="pfeil" style="xhtml" /></div>
	

</div><!--#wrapper-->

Das ist ein ausschnitt meiner eigenen Index.php. Wie ihr sehen könnt:

<div id="menu"><jdoc:include type="modules" name="left" style="neuerstyle" /></div><!--#menu-->

Nun möchte ich ebenen einen neuen Style programmieren. Der wie oben erwähnt JavaScript enthält -> Menüpunkte sollen animiert usw. werden.

Meine derzeitige modules.php sieht so aus:

<?php
defined('_JEXEC') or die('Restricted access');
function modChrome_neuerstyle($module, &$params, &$attribs)
{
	$headerLevel = isset($attribs['headerLevel']) ? (int) $attribs['headerLevel'] : 3;
	if (!empty ($module->content)) : ?>
    <div class="box<?php echo $params->get('moduleclass_sfx'); ?>">
        <div class="indent1">
       	 <h3><?php echo "<u>" . $module->title . ":" . "</u>"?></h3>
            <div class="box2 border border1">
                <div class="indent">
                    <?php echo "<br>" . $module-> content; ?>
                </div>
            </div>
        </div>
    </div>
<?php endif;
}
?>

ansich nichts besonderes.. meine Frage nun.. wie kann ich auf z.B.:

<h3><?php echo "<u>" . $module->title . ":" . "</u>"?></h3>

genau verändern dh. wo hinein usw. ..

Dankeschön )
Tut mir leid das ich so 'dumm' bin.. und meine Beschreibung war vl auch sehr schlecht.

 

[Daaron]

Gegenfrage: Wäre es nicht viel einfacher, einfach ein Standard-Menü (besteht eh aus ner Unordered List, wenn das Menü-Modul irgend etwas taugt) einfach per CSS und JavaScript zu modifizieren?

 

[MisterPresident]

Nach dem das eine Firmenhomepage meines Vaters werden soll will ich keinerlei Probleme mit Lizenzen habne.. und ich finde kein Non-Commerzial Modul das meinenBorstellungen Entspricht.. hättest du einen link zur Seite?

 

[Daaron]

Ich glaub wir reden aneinander vorbei. Eins vorweg: ich arbeite nicht mit Joomla, hat sich bisher noch nicht ergeben. Ich bin nun einmal Contao-Fan...

Aber unabhängig vom CMS: Jedes halbwegs anständige CMS bietet ein Modul oder sonstwas, um Navigationsstrukturen zu erzeugen. Diese Strukturen sind überlicherweise <ul><li>Seite1</li><li>Seite2</li>...</ul>. Wie du diese unsortierte Liste dann DARSTELLST, das ist simples CSS. Wenn die Animationen nicht zu komplex werden kann man sich sogar JavaScript sparen sondern über CSS3 arbeiten (und dabei halt IE ignorieren *G*).

 

[MisterPresident]

Hallo, ja das kann leicht sein das wir einandervorbei reden.. aber danke für die Mühe

So viel ich bis jetzt herausgefunden habe kann ich hier mein Modul abändern. Mein derzeitiges Menü sieht so aus (Datei im Anhang).

Somit habe ich ja die Menüstruktur schon..

<ul><li>Seite1</li><li>Seite2</li>...</ul>

Ich möchte jetzt nur noch das Menü grafisch verschönern.. - wie du schon gesagt hast per css bzw. css3 animieren.. IE kann ja warten FF (Y).. ich frage mich nur wie ich auf meine css verlinke und auf die einzelnen Inhalte zugreife. Ansich ist ja die Homepage schon mit einer css aufgebaut - jetzt kommt laut meines Hausverstands eine css für den Bereich Menü dazu oder?

 

[Daaron]

Na irgendwo liegt doch eine CSS-Datei... schreib einfach drin rum.

 

[MisterPresident]

Dankeschön... grober Fehler von mir -.-

Ergänzung (13. Mai 2012)

Nicht lachen ich weiß der Code is beinahe 1:1 von SelfHTML Kopiert (will nur mal austesten).. mit der Veränderung das ich div vorne dran geschrieben habe..

Eig. funktioniert das ganze auch aber wieso öffnet sich das Untermenü nur wenn das Menü aktiv ist? In der Beispielseite von SelfHTML ist das nicht so..

div#menu
{
	position: absolute;
	top: 50px;
	left: 170px;
	width: auto;
}
 
div#menu ul{
    margin: 0; padding: 0;
    text-align: center;
  }

  div#menu ul li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  div#menu html ul li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  div#menu html ul li:first-child{  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  div#menu ul li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;  /* Untermenu ausblenden */
  }
  div#menu html ul li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  div#menu  html ul  li:first-child{  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom:0.4em;
  }
  div#menu ul li:hover ul {
    display: block;  /* Untermenu in modernen Browsern einblenden */
  }
  div#menu ul li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  div#menu  ul a, div#menu  ul span {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  div#menu html ul a,  div#menu html ul span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  div#menu ul a:hover, div#menu  ul span, div#aktuell ul li a {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  div#aktuell li a {  /* aktuelle Rubrik kennzeichnen */
    color: orange; background-color: silver;
  }
  div#menu ul li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }

 

[Daaron]

Werden Untermenüs denn auch erstellt, während der betreffende Hauptpunkt nicht aktiv ist? Read the source, Luke!

 

[MisterPresident]

Tut mir leid das ich so blöd frage aber wieso generiere ich die Punkte nicht?

 

[Daaron]

Wilde Vermutung: Weil dein Modul so eingestellt/programmiert ist, dass es nicht die gesamte Navigationsstruktur erstellt sondern nur den aktiven Zweig. Sowas kann durchaus Sinn machen.

 

[Unknown-Error]

... bin zwar auch kein Joomla Fan, aber das was ich hier eigentlich rauslese, läuft für mich auf die Frage zu - "wie binde ich jquery in ein joomla Theme ein.."

 

[MisterPresident]

.. wieso kein JoomlaFan - welche Gratis-Alternative?

Danke für den Tipp werde mal nachschauen.. wann macht das Sinn?

Ergänzung (14. Mai 2012)

Wie dumm ist bitte Joomla??
Hab noch lange gegooglet und Daaron hat mir dann das nötige Code-Wort "Navigationsstruktur" gegeben..

Man darf kein Menü-Modul umbennen.. ochhh Fetter bug.. danke!

 

[Daaron]

.. wieso kein JoomlaFan - welche Gratis-Alternative?

Contao (mein persönlicher Favorit, da wär so ein Problem wie das hier auch kaum aufgekommen), Drupal (immerhin mächtig genug fürs Weiße Haus), Typo3 (find ich grausam und überladen),...

 

[Unknown-Error]

..ich hatte vor 2 Monaten so ziemlich alles am evaluieren..(CMS als auch PHP-Frameworks)

nachdem Contao, Drupal, Wordpress, Joomla nix für mich war und Typo3 eigentlich eher in Spiel kommt, wenn ein finanztechnischen Konzept im Vordergrund steht, habe ich es mit Concret 5 versucht..und blieb dabei.

 

[MisterPresident]

Danke für die Tipps werde mich umsehn und wenn nötig wechseln