Speichern-Buttons wie in C3 anordnen

[Samson1964]

In Contao 4 hat sich ein Teil der Absendebuttons platzsparend in einer Liste versteckt. Zum einen ist das gut, zum anderen schlecht, weil man jetzt einen zusätzlichen Klick machen muß, den richtigen Button suchen und anklicken. Dabei kann es auch passieren, das man den falschen Button erwischt.



Markup der Grafik:

<div class="tl_submit_container" style="left: 489px; width: 870px;">
    <button type="submit" name="save" id="save" class="tl_submit" accesskey="s">Speichern</button> 
    <div class="split-button">
        <button type="submit" name="saveNclose" id="saveNclose" class="tl_submit" accesskey="c">Speichern und schließen</button>
        <button type="button" id="sbtog" tabindex="-1" class="active">
            <img src="system/themes/flexible/icons/navcol.svg" alt="" width="12" height="12">
        </button> 
        <ul class="">
            <li><button type="submit" name="saveNcreate" id="saveNcreate" class="tl_submit" accesskey="n">Speichern und neu</button></li>
            <li><button type="submit" name="saveNduplicate" id="saveNduplicate" class="tl_submit" accesskey="d">Speichern und duplizieren</button></li>
            <li><button type="submit" name="saveNback" id="saveNback" class="tl_submit" accesskey="g">Speichern und zurück</button></li>
        </ul>
    </div>
</div> 

Gibt es da schon eine Lösung um die Buttons zu trennen und wieder nebeneinander darzustellen?

[Stefko]

Theoretisch (ungetestet) müsste man dem doch mit einer eigenen Backend.css entgegentreten können, oder?

[mschindler]

Servus!
Habt ihr schon eine pragmatische Lösung gefunden, oder doch über eine BE.css drüber bügeln.

[Spooky]

Kommt in Contao 4.6: https://github.com/contao/core/issues/8816

[Stefko]

Ahoi,

mit der Erweiterung contao-om-backend ist es auch möglich ab einem Viewport von >1200px die Button Untermenüs aufzulösen.

[mschindler]

Hier eine schnelle Lösung OHNE Erweiterung.


Den Teil in die initconfig.php

<?php

// Put your custom configuration here

// CSS fürs Backend. Buttons und co.
if (TL_MODE == 'BE') {
    $GLOBALS['TL_CSS'][] = 'files/PROJEKT-XYZ/themes/css/contao-backend-theme-cs.css|screen';
    
}

Und hier das CSS für die contao-backend-theme-cs.css.

Wer will, kann es auf seine eigenen Bedürfnisse anpassen.

/* Contao Backend CSS - CodeSache.de - Markus Schindler  */

.tl_submit_container .tl_submit{color:#000 !important; font-size:1.2em; text-shadow:none;font-weight:600;}
.tl_submit_container .tl_submit#save{ background:#439E18;}
.tl_submit_container .tl_submit#saveNclose{ background:#88DEB7;}
.tl_submit_container .tl_submit#copy{ background:#a3d956;}
.tl_submit_container .tl_submit#cut{ background:#75acd6;}
.tl_submit_container .tl_submit#delete{ background:#ea5e4b;}
.tl_submit_container .tl_submit#override{ background:#FC03FB;}
.tl_submit_container .tl_submit#edit{ background:#f5c710;}
.tl_submit_container{
margin-top:100px; }
.tl_submit_container:after{
content:"";
clear:both;
display:block; }
.tl_submit_container ul{
list-style-type:none;
margin:0;
padding:0;
display:inline-block;
clip:inherit;
height:inherit;
width:inherit;
overflow:visible;
position:inherit;
right:inherit;
bottom:inherit;
min-width:inherit;
border:none;
background:none;
}
.split-button ul:before, .split-button ul:after{
display:none;
}
.tl_submit_container ul li{
margin:0;
padding:0;
display:inline-block; }
.tl_submit_container ul,
.tl_submit_container li,
.tl_submit_container button,
.tl_submit_container .split-button{
display:inline-block; }
.split-button ul li{border:1px solid #aaa; margin-left:4px;}
.split-button ul button{border:none; margin-right:4px;}
button#sbtog{
display:none;
}
@media only screen and (max-width:600px){
}

[spacefront]

Und warum nehmt Ihr nicht einfach Tastaturkürzel?

Gesendet von meinem SM-G950F mit Tapatalk

[Samson1964]

Und warum nehmt Ihr nicht einfach Tastaturkürzel?

Weil die nicht wie in Windows-Programmen hinter dem Menüpunkt stehen. Deshalb ist ein Tastaturtraining schwierig. Ich bin aber ein Fan von Tastaturbedienung, benutze sie auf Webseiten aber nie.

[3dr]

@Samson 1964, dann würde ich das ändern, die Benutzung von Short-Cuts beschleunigt das Arbeiten im BE enorm (meine Meinung).

[Spooky]

@Samson 1964, dann würde ich das ändern, die Benutzung von Short-Cuts beschleunigt das Arbeiten im BE enorm (meine Meinung).

Wir haben keine Macht darüber was Redakteure machen oder nicht

[mschindler]

Und warum nehmt Ihr nicht einfach Tastaturkürzel?

@Alex
Das machen doch die meisten Entwickler und ein Teil der Redakteure!