Solved Feldgröße bei Eingabefenster

Moin moin,

ich hab einfach mal 3 kleine Scrrens angehangen. Die erklären mein "Problem" am besten. Die ersten beiden Screens sind von der Page an der ich grad bastel. Das letzte Bild ist aus diesem Forum hier.



Die Höhe des Eingabefeldes stimmt mmt nicht mit der Höhe des Buttons überein. Wie man am letzten Bild schön erkennen kann, hat man hier im Forum anscheinend das gleiche Problem.

Frage ist nu eigentlich ganz einfach, Wie kriege ich's behoben? Wie kriege ich es hin, dass dieses Feld genau die gleiche höhe wie der Button hat und der eingegebene Text vernünftig lesbar ist.

Gruß Stoerte

Hallo Stoerte,

das Problem liegt an deinem Joomla Template. Für eine bessere Darstellung braucht es ein paar Template Overrides in der Kunena custom.less. Wenn du einen Link auf dein Forum postest kann ich mir das anschauen und dir die entspechenden Änderungen nennen.

Ich kann auch nicht verstehen warum die Darstellungsfehler hier in diesem Forum nicht behoben werden. So schwierig ist das eigentlich nicht. Ausserdem ist die Darstellung auf einem Smartphone schon fast als katastrophal zu bezeichnen. Im Hochformat belegt der Header die halbe Seite und im Querformat ist vom eigenentlichen Inhalt nur noch eine Zeile zu sehen. So etwas würden unsere Forum-Mitglieder nicht akzeptieren.

Gruß
Wolfgang

Moin Wolfgang,

danke dir vielmals für dein Angebot.

du findest die Seite unter:

klick mich

hier ist der Direktlink zum Forum

Ist nich wirklich was großes, aber wir versuchen da mal in Zeiten von Twitter, Facebook und Co eine bessere Alternative zu bieten ...

Falls du einen Zugang brauchst, denn kannst du natürlich dann haben. Das verwendete Template ist übrigens ein Gantry 5 (Supra) von Rockettheme, Joomla & Gantry sind auf dem aktuellen Stand. Kunena natürlich ebenso.

ich sag schon einmal vorab, vielen Dank !

Hallo Stoerte,

du trägst in der custom.less folgendes ein:

.input-small {
height: 38.5px !important;
}

.search-query {
height: 30px !important;
margin-top: -9px !important;
}

Zum Eintragen der Änderungen wählst du im Backend im Kunena Forum unter Templates 'Crypsis' aus und klickst oben auf den Button 'Edit LESS'. Dann markierst du 'custom.less' und klickst dann wieder oben 'Edit LESS'. Dann trägst du die Änderungen ein und speichrst dann die Datei.

Gruß
Wolfgang

Sauber vielen Dank!
Das ist genau das was ich gesucht habe. Ich denke mal das ich die Höhe der Eingabefenster dann bei .imputsmall selbst frei bestimmen kann.

Wenn ich das richtig verstehe, dann finden in dieser Datei die css overrides für Kunena statt und werden nicht in der scss des Joomla Templates abgelegt. Macht ja auch Sinn, denn wechsel ich das Template, dann sind die Overrides auch fott ...

Vielen Dank du hast mir den Sonntag gerettet. Nun kann ich noch ein paar andere Anpassungen versuchen. Die mich so ein wenig die ganze Zeit hin und herbewegt haben....
Gruß Stoerte

Um die doppelten Icons loszuwerden kannst du in der custom.less noch zusätzlich Folgendes eintragen:

[class^="icon-"], [class*=" icon-"] {
background-image: none !important;
}

Boah sauber...

du wirst lachen, genau das ist mir gerade ins Auge gesprungen ... ich brech ab lol ...

Vielen dank !

Stoerte wrote: Sauber vielen Dank!
Wenn ich das richtig verstehe, dann finden in dieser Datei die css overrides für Kunena statt und werden nicht in der scss des Joomla Templates abgelegt. Macht ja auch Sinn, denn wechsel ich das Template, dann sind die Overrides auch fott ...

Ja, die overrides wirken sich nur auf das Forum aus. Allerdings sind diese Änderungen erstmal nur für dein Gantry Template sinnvoll. Wenn du ein anderes Joomla Template verwendest wirst du wahrscheinlich andere overrides machen müssen.

Hallo Stoerte,

mir ist gerade aufgefallen dass das untere Suchfeld jetzt verschoben ist:

www.foerderverein-wohnpark-ahe.de/index....orum-hat-geoeffnet-d

Ändere mal die Einträge in der custom.css. Das sollte dann hoffentlich für beide Suchfelder richtig sein:

.search-query {
margin-top: 0px !important;
}

h2 .search-query {
height: 30px !important;
margin-top: -10px !important;
}

Und wo wir schon mal dabei sind... damit das Veröffentlichungsdatum eines Beitrags auf Smartphones nicht in die Beitragsüberschrift rutscht:
@media (max-width: 767px) {
.pull-right {
float: none !important;
}
}