Beiträge von majesticc89

majesticc89 · 8. Mai 2017

Also ich habe es jetzt mal so gemacht!

HTML:

CSS

Code

#nav {
    position: absolute;
    width:820px;
    height: 200px;
    margin-left:-600px;
    margin-top: -250px;
    padding:10px
}
 
ul#navigation {
    /* margin:0px auto; */
    margin-left: 580px;
    margin-top: -67px;
    position:absolute;
    float:left;
    border-top:1px solid darkgrey;
    border-bottom:1px solid darkgrey;
    padding: 0px;
}
 
ul#navigation li {
    display:inline;
    font-size:25px;
    font-weight:bold;
    margin:0;
    padding:0;
    float:left;
    position:relative;
    border-top:1px solid darkgrey;
    border-bottom:2px solid darkgrey;
}
 
ul#navigation li a {
    padding:10px 30px;
    color:#616161;
    text-shadow:1px 1px 0px #fff;
    text-decoration:none;
    display:inline-block;
    border-right:1px solid #fff;
    border-left:1px solid #C2C2C2;
    border-top:1px solid #fff;
    background: #dddddd;
 
    -webkit-transition:color 0.2s linear, background 0.2s linear;
    -moz-transition:color 0.2s linear, background 0.2s linear;
    -o-transition:color 0.2s linear, background 0.2s linear;
    transition:color 0.2s linear, background 0.2s linear;
}
 
ul#navigation li a:hover {
    background:#f8f8f8;
    color:#282828;
}
 
ul#navigation li a.first {
    border-left: 0 none;
}
 
ul#navigation li a.last {
    border-right: 0 none;
}
 
ul#navigation li:hover > a {
    background:#fff;
}


/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
/*these 2 styles are very important,
being the ones which make the drop-down to appear on hover */
    visibility:visible;
    opacity:1;
}
 
ul#navigation ul, ul#navigation ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;
/*the next 2 styles are very important,
being the ones which make the drop-down to stay hidden */
    visibility:hidden;
    opacity:0;
    position: absolute;
    z-index: 99999;
    width:180px;
    background:/*#f8f8f8;*/#dddddd;
    box-shadow:1px 1px 3px #ccc;
/* css3 transitions for smooth hover effect */
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear;
    -o-transition:opacity 0.2s linear, visibility 0.2s linear;
    transition:opacity 0.2s linear, visibility 0.2s linear;
}
 
ul#navigation ul {
    top: 43px;
    left: 1px;
}
 
ul#navigation ul li ul {
    top: 0;
    left: 181px; /* strong related to width:180px; from above */
}
 
ul#navigation ul li {
    clear:both;
    width:100%;
    border:0 none;
    border-bottom:1px solid #c9c9c9;
}
 
ul#navigation ul li a {
    background:none;
    padding:7px 15px;
    color:#616161;
    text-shadow:1px 1px 0px #fff;
    text-decoration:none;
    display:inline-block;
    border:0 none;
    float:left;
    clear:both;
    width:150px;
}

Alles anzeigen

Scheint zu funktionieren. Habe ein "Buttom"-Tutorial gemacht und es einfach angepasst, so wie ich es brauche. Allerdings erscheint mir der Code nicht gerade "optimal"... was würdet ihr verbessern?

majesticc89 · 8. Mai 2017

Servus Leute,
angenommen ich habe eine Überschrift: <h1> Text :2017 </h1>
Nun möchte ich, dass beim drübergehen des Cursors NUR ÜBER "2017"ein "Menü nach unten ausklappt (die Seite drunter nicht beeinflußt, also nicht nach unten verschiebt o.Ä) und man bspw. 2016 / 2015 / 2014 etc. auswählen kann. Diese würden dann zu einer anderen .html Seite verlinkungen erhalten.Wie bekommt man sowas hin?

LG

majesticc89 · 2. Mai 2017

alles klar, werde ich machen

majesticc89 · 2. Mai 2017

Servus Christian,
danke für die Doku, ist aber leider nicht ganz was ich möchte. Ich möchte ja, dass man quasi diese Menüs IN JOOMLA erstellen kann, für Leute die kein HTML können. Oder zumindest, dass ich dann bspw. ein "rounded" Menü vorgebe und man dieses dann über Joomla.... verfeinern und füllen kann.
Verbessere mich wenn ich zu naiv bin, aber könnte man nicht mit <jdoc module> und <position> einen Bereich definieren, den man dann via "Beitrag und Verlinken" bearbeiten kann und so selber ein Menü aufbauen kann?

majesticc89 · 2. Mai 2017

Also die verschiedenen <jdoc:include types.. /> werde ich mir jetzt genauer anschauen, bzw. auch mal das Prototype Template durchgehen (was leichter gesagt als getan ist).

überarbeitete index.php:

HTML

<!doctype html>
<html>
  <head> <!-- Allg. Info -->
    <title>EXAMPLE</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="templates/exampletemplate/css/style.css">
    <jdoc:include type="head" />
  </head>
  <body> <!-- gesamte Website -->
    <header> <!-- Logo OBEN -->
    <img src="templates/exampletemplate/bilder/headerlogo.png" width="1800" height="200" alt="LOGO">
    </header>   
  <div id="Flexbox"> <!-- Container -->
    <nav> <!-- Navigation LINKS -->
    <jdoc:include type="modules" name="navi-links" />
    </nav>
    <main> <!-- Hauppteil -->
    <jdoc:include type="modules" name="main-mitte" />
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    </main>
    <aside> <!-- News RECHTS -->
    <jdoc:include type="modules" name="news-rechts" />
    </aside>
  </div> 
  <footer> <!-- Fußleiste UNTEN -->
  <jdoc:include type="modules" name="footer-unten" /> 
  </footer>
</body>
</html>

Alles anzeigen

Ich finde beim Protostar-Template bei den:
jdocs include type=modul immer noch eine "style" Info! Bspw.: style="well" / "none" / "xhtml" etc.
Ist das zwingend notwendig?

majesticc89 · 2. Mai 2017

Servus Leute,
ich habe leider nichts vergleichbares gefunden und hoffe mit diesem Thread auch allen zukünftigen Entwicklern die am Anfang stehen helfen zu können.
Ich habe ein Template selber entwickelt und würde dieses nun in Zukunft mit Joomla gestalten (da noch weitere Benutzer/Redakteure geplant sind, die kein HTML können). Dazu muss man einige Modifikationen am Template anbringen. Zum einen die "templateDetails.xml erzeugen", die Joomla ja (unter Anderem) zur Installation benötigt. Zum Anderen muss man Positionen und Module definieren, mit denen dann Joomla! arbeiten kann.
In meinem konkreten Beispiel möchte ich gerne eine Website mit drei Spalten erstellen (wobei die Linke nur als Navigationsmenü dienen soll), sowie einem Header mit Logo und einem Footer mit den AGBs etc.

Ich habe es also wie folgt gestalten:

templateDetails.xml

Spoiler anzeigen

index.php (mit Hilfe einer Flexbox):

Spoiler anzeigen

style.css

Spoiler anzeigen

Soweit so gut. Es lässt sich installieren und wird mir folgendermaßen ausgegeben:

In der "templateDetails" habe ich bereits die <positions> definiert, die ich dann an den benötigten Stellen in der index.php mit dem <jdoc:include.... Befehl eingearbeitet habe.
Jetzt meine Frage: Was kann/muss man noch ergänzen/verändern?
Ich habe im Backend das Problem, dass Beiträge nicht auf der Website angezeigt werden, ich kann ihnen z.T keine Module zuweisen.

Zusätzlich habe ich noch keine "Parameter" (in der templateDetails) eingefügt, was daran liegt, dass ich da noch nicht ganz durchblicke.

Code

<!-- Parameter Block start -->
<config>
  <fields name="params">
    <fieldset name="advanced">
    <field name="unser_header_bild"
                  type="media"
                  default=""
                  label="TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_LABEL"
                  description="TPL_TEST_TEMPLATE_FIELD_UNSER_HEADER_BILD_DESC"
                  filter="string"
                  />
    </fieldset>
  </fields>
</config>
<!-- Parameter Block ende -->

Alles anzeigen

Habe dieses Beispiel unter "joomla-templates.de" gefunden, weiß aber noch nicht gänzlich wofür ich das benötige. Den Header (Logo) kann ich auch direkt in der .php bearbeiten,
brauche da jetzt nicht zwangsweise eine Hilfe im Joomla Backend.

Ein langer Beitrag, tut mir Leid, habe versucht alles so detailliert wie möglich zu erklären.
Des Weiteren habe ich das Template komplett selber geschrieben (mein Erstes), also seid bitte nachsichtig mit mir, sind sicher dutzende Fehler enthalten.
Ich bin ja schon froh, dass es überhaupt funktioniert (mehr oder weniger)!

Edit by Admin: Langen Code in Spoiler

majesticc89 · 1. Mai 2017

Zitat von hechtnetz

Vom root des Webs.

Alles klar danke!

majesticc89 · 1. Mai 2017

Hallo.
also mit dem neuen Pfad funktioniert es, danke!!! Verstehe ich jetzt aber nicht. Ich dachte der Pfad muss immer von der index.php ausgehen?!?

Code

<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/2.5/template-install.dtd">

Stimmt das so nicht?

majesticc89 · 1. Mai 2017

Servus Leute,
ich versuche gerade meine erste Website aufzubauen. Allerdings schaffe ich es nicht, die CSS Datei extern einzubinden. Über <style> </style> direkt im PHP funktioniert es.
Bin ratlos, wo ist da der Fehler?

index.php sieht so aus: (Habe ein 3 Spalten Layout, dass ich in gerne in eine Flexbox packen würde)

Spoiler anzeigen

Die style.css sieht so aus:

Spoiler anzeigen

die templateDetails.xml so:

Spoiler anzeigen

Im Anhang seht ihr, wie es bei mir angezeigt wird (ich nutze XAMPP). Zusätzlich meine Ordnerstruktur des Templates. Im "css" Ordner befindet sich die style.css und im "bilder" Ordner nur die headerlogo.png.
Ich komme nicht weiter. Packe ich es in eine ZIP Datei lässt es sich problemlos unter Joomla im Backend installieren.

Edit by Admin: Code in Spoiler

Beiträge von majesticc89

Wort---Menü

Wort---Menü

.css Datei wird nicht erkannt/geladen

Selbst erstelltes Template an Joomla anpassen...

Selbst erstelltes Template an Joomla anpassen...

Selbst erstelltes Template an Joomla anpassen...

.css Datei wird nicht erkannt/geladen

.css Datei wird nicht erkannt/geladen

.css Datei wird nicht erkannt/geladen