Antworten zum Thema „Menü im footer stylen (inline etc.)“

[lyzarr]

Hallo Allerseits!

Ich möchte ein 2. Menü (Impressum etc.) unten im footer der site per css anpassen (vorallem per inline in eine Reihe, Ausrichtung, Farben, hover etc.) ()

Das Menü habe ich als Modul eingebunden, der entsprechende Bereich in der index.php lautet:

    <!-- Begin Footer -->
    <div class="footer">
        <div class="container">
            <!-- <hr /> -->
            <jdoc:include type="modules" name="foot_men" style="men2" />
            <p class="pull-right"><a href="#" id="back-top">&uarr; Top</a></p>
            <p class="copyright">&copy; <?php echo $sitename; ?> <?php echo date('Y');?></p>
        </div><!--Container-->
    </div>
    <!--End Footer-->

Ich dachte mittels der style Angabe ("men2") könnte ich dieses Modul direkt in der css-Datei ansprechen und stylen.
Ich bekomme es aber nicht hin.

Würde mich sehr über einen Lösungsvorschlag freuen, wie dies zu bewerkstelligen ist, sprich wo ich ansetzen muß, um diesen Bereich direkt ansprechbar zu machen, und wie dies dann per css aufgegriffen werden kann.

Besten Dank vorweg,
Dan

 

[MainAngler]

style="men2" kannste nicht verwenden!
Du kannst dir da nicht irgendwas raussuchen, da gibt es definierte Werte.
Das hat auch nichts zu tun wie du es dann per CSS ansprichst!

Edit:
Hier die Übersicht der vorgegebenen Werte, welche style annehmen kann und wie das Ergebnis dann aussieht:
https://docs.joomla.org/Standard_Module_Chromes

Solltest du dennoch einen eigenen Style definieren wollen:
https://docs.joomla.org/Applying_custom_module_chrome

 

[hub]

Moin moin,
ich gehe davon aus, die Version ist 3.xx .
Du kannst dem Modul selbst eine Klasse (und anderes mehr) zuweisen:
Extensions->Module Manager-> dein Modul, dann Tab "Advanced". Dort findest du alles, was du brauchst ( ... wenn das Modul ordentlich programmiert wurde ). Sorry wegen englisch, ich hab hier keine deutschen Versionen.

Gruß Ulli

 

[lyzarr]

Danke Euch erstmal!

Ich habe style jetzt wieder auf "xhtml" gesetzt.
Wenn ich mir die Seite mit firebug ansehe, dann steckt das Modul in "moduletable".
Setze ich nun in der css

.moduletable ul {
     display: inline !important;
     text-align: right;
}

Spreche ich den Bereich zwar offensichtlich an, da der der Text rechtsbündig ausgerichtet wird, das inline wird jedoch nicht umgesetzt.
Darüberhinaus würde ich eben gerne dieser Modulposition eine eindeutige Bezeichnung zuweisen, um keinen Konflikt mit anderen Elementen zu bekommen.

@hub
Ja es ist eine Joomla 3.x Installation.
Ich erinnere mich dunkel daran das man (ich glaube bei) "Modulklassensuffix" etwas angeben zu können (wie z.B. "_mod") um dann dies per css stylen zu können.
Ich nehme an darauf beziehst Du Dich?
Aber auch dies gelang mir nicht.

[update]
Ich denke Du meinst "Menüstil".
Da kann ich styles die im css festgelegt sind auswählen. Interessanterweise jedoch nicht den den ich testweise eben angelegt habe.
Ich möchte dies aber ohnehin direkt im template lösen, um nicht nachträglich im backend noch für Module irgendwelche styles auswählen zu müssen, sondern rein durch index.php und template.css geregelt haben.

 

[hedoo]

Hallo,

du hast hier zwei Möglichkeiten:

Entweder du löst das Problem ohne eigene CSS-Klasse:

div.container ul
{Anweisungen
...
}

etc.

oder du weist dem Modul, wie hub es beschrieben hat eine Klasse, etwa "menueunten" zu. Dann muss deine css so aussehen.

ul.moduletablemenueunten{
Anweisungen
...
}

Gruß
hedoo

 

[QSB]

Hätte es auch als Modulklassensuffix gelöst, da du ja ein Modul einbindest.
Wenn du das aber unbedingt rein mit index.php und *.css lösen willst, dann musst du dir, wie hier schon geschrieben wurde, folgendes anschauen:
https://docs.joomla.org/Applying_custom_module_chrome

Das was du oben schreibst, mit Module und Sytles, das hat damit aber nichts zu tun!

 

[lyzarr]

Erneut vielen Dank für Eure Antworten!

Ich habe jetzt wie von Euch empfohlen dem Modul ein Modulklassensuffix zugewiesen (" menu2").
Mit "ul.moduletable.menu2 {}" läßt es sich allerdings nicht ansprechen. Nehme ich das "ul" vorne weg hingegen schon.

.moduletable.menu2 {
     text-align: center;
     display: inline !important;
}

.moduletable.menu2 li > a {
     background: none;
     color: #DDD;
}

.moduletable.menu2 li > a:hover{
     background: none;
     color: #FFF;
}

Damit konnte ich nun schon diverse styles umsetzen. Allerdings bekomme ich die links nach wie vor nicht in einer Reihe angezeigt ("display: inline;").
Woran liegt das (".moduletable.menu2 ul {}" bringt's auch nicht)?
Wie bekomme ich das hin?

 

[hedoo]

Hallo,

die Anweisung "inline" musst Du dem li zuweisen. Dann müsste es klappen.

Noch etwas:
Wenn Du das Modulklassensuffix "menu2" verwendest, müsste in der css eigentlich " .moduletablemenu2" stehen nicht ".moduletable.menu2" .

Gruß
hedoo

 

[hub]

Moin,
nicht UL muss inline sein, sondern dessen Elemente, also LI.

 

[hedoo]

Sorry, muss mich berichitigen, habe nämlich gerade mir firebug deine css angeschaut:

.menu2 ul li {display: inline}

 

[lyzarr]

Ich hatte den Modulklassensuffix mit einem vorangestelltem Leerzeichen gewählt, da ich dann im css mit ".menu2" arbeiten kann, was es für mich optisch angenehmer macht.

Dennoch, bleiben die Punkte untereinander, egal welche Varianten ich probiere.

.menu2 ul li {display: inline !important;}

.moduletable.menu2 ul li {display: inline !important;}

Auch nur mit "li" ohne "ul" nicht...

 

[hedoo]

In deiner bootstrap.min css steht:

.nav > li > a {
    display: block;
}

daraus mache ein inline-block, weise noch ein padding zu und es klappt.

 

[lyzarr]

Wow, danke daran lag es also!
Ich habe "inline-block" dem ".moduletable.menu2" zugewiesen und jetzt klappt's.

.moduletable.menu2 ul li {
     display: inline-block !important;
     padding: 0 15px 0 15px;
}

Vielen, vielen Dank!

 

[MainAngler]

Man ändert nichts in der bootstap.min css!
Diese kann sonst nicht ohne weiteres geupdatet werden.
Man legt sich eine eigene CSS-Datei an und übernimmt dann die Dinge darin die man aus der bootstrap css eben ändern möchte.

 

[lyzarr]

Man ändert nichts in der bootstap.min css!

Ist doch auch nirgends die Rede von...
Im Gegenteil ich spreche oben explizit immer nur von der template.css.

 

[MainAngler]

Ich rede von den Beitrag von hebdoo, der dir empfiehlt (!) in der bootstrap.min das zu ändern.

In deiner bootstrap.min css steht:
...
daraus mache ein inline-block, weise noch ein padding zu und es klappt.

Die meisten würden es also direkt in der bootstrap.min ändern, was aber falsch wäre, da diese Datei dann nicht mehr ohne weiteres geupdated werden kann..

 

[hedoo]

Ich muss MainAngler recht geben, hätte ich darauf hinweisen müssen, dass diese Anweisung in die template.css gehört.

Schönen Sonntag noch
hedoo