Phpwcms Backend Icons
Die Backend-Icons in Phpwcms sind recht klein, was es so manchem schwierig macht diese mit der Mouse zu treffen. Im Phpwcms-Forum-Beitrag habe ich eine praktische Lösung für dieses Problem entdeckt. Der User "top" hat eine kleine Erweiterung für phpwcms.min.css gemacht, welche die Icons beim hoverauf die doppelte Größe scaliert.
Ergänzung für die /include/inc_css/phpwcms.min.css
/* Ergänzung für /include/inc_css/phpwcms.min.css */
input[src ^= "img/famfamfam/"],
img[src ^= "img/famfamfam/"],
img[src ^= "img/symbols/"],
img[src ^= "img/icons/"],
img[src ^= "img/subnav/"],
img[src ^= "img/symbole/"],
img[src ^= "img/button/"] {
height: auto;
width: auto;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
a>img[src ^= "img/symbole/"]:hover,
a>img[src ^= "img/button/"]:hover {
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
Phpwcms Frondend Icons
Ein ähnliches Problem finde ich, gibt es beim Frondend Editing. Die verschiedenen Icons sind, max 20x16 Pixeln auch nicht gerade sehr groß, so hab ich mir die Optik etwas angepasst, was aber noch noicht 100%ig ausgereift ist. Ich hab mir eine phpwcms.spezifisch.css erstellt welche ich dann in meinem Template lade.
phpwcms.spezifisch.css
/* CSS-Klassen für Frontend-Edit -----------------------------------------------------------------*/
/* Ein und Ausschalten frontend-Edit Links Position fest oben rechts */
#fe-link {
position: fixed;
top: 3px;
right: 10px;
height: 30px;
width: 30px;
color: #FFFFFF;
padding: 3px;
border: 2px solid #003300;
border-radius: 4px;
cursor: pointer;
z-index: 10000;
}
/* Optik der Frontend-Links allgemein ------------------------------------------------------------*/
a.fe-link{
width: 30px;
height: 30px;
border-radius: 4px;
background-size: 100%;
}
/* Artikel-Inhalt (Contentpart) ----------------------------------------------------------------- */
/* Artikel-Struktur ------------------------------------------------------------------------------*/
a.fe-link.fe-article{
border: 2px solid black;
background-color: white;
z-index: 1000;
}
a.fe-link.fe-CP{
border: 2px solid red;
background-color: yellow;
z-index: 1000;
}
/*- Menü-Struktur --------------------------------------------------------------------------------*/
a.fe-link.fe-structure{
border: 2px solid red;
z-index: 1000;
}
/*- Artikel-Basis-Information Article-Summary ----------------------------------------------------*/
a.fe-link.fe-summary{
border: 2px solid blue;
z-index: 1000;
}
a.fe-link.fe-news{
max-width: 30px;
border: 2px solid black;
background-color: white;
}