Daher habe ich mir mal eine kleine HTML-Datei gebastelt um beides bequem im Blick haben zu können. Wer es ausprobieren möchte kann einfach den folgenden Code in in eine neue HTML-Datei kopieren und ins Wurzelverzeichnis seiner phpwcms-Seite packen:
Code: Select all
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>phpwcms Frontend Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
nav {
display: block;
position: absolute;
z-index: 50000;
height: 1px;
width: 100%;
top: 0;
text-align: right;
box-sizing: border-box;
padding-right: 60px;
}
iframe {
position: relative;
width: 100%;
height: 100%;
}
div {
position: absolute;
height: 100%;
border: none;
top: 0;
-webkit-transition: width 500ms ease-out;
-moz-transition: width 500ms ease-out;
-ms-transition: width 500ms ease-out;
transition: width 500ms ease-out;
}
div#backendbereich {
right: 0;
width: 55%;
}
div#frontendbereich {
width: 45%;
}
#frontendschalter:checked ~ div#backendbereich {
width: 0%;
}
#frontendschalter:checked ~ div#frontendbereich {
width: 100%;
}
label {
border: solid 1px #999;
display: block;
width: 22px;
height: 22px;
box-sizing: border-box;
position: absolute;
right: 20px;
top: 7px;
border-radius: 3px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
color: rgba(0,0,0,0);
-webkit-transition: margin-top 500ms ease-in-out 1s;
-moz-transition: margin-top 500ms ease-in-out 1s;
-ms-transition: margin-top 500ms ease-in-out 1s;
transition: margin-top 500ms ease-in-out 1s;
}
label#bschalter {
right: 50px;
background: url(data:image/gif;base64,R0lGODlhEAAQAMQfACROFdzy00yoLbDhnUSVKFe+OV3CPMXpuLPioitfGordWnfRTXTLXLzmqX3UUYTaVjyDJGTEQaPdjI/gXXDLSc7sw2rKRdjwz9PuyVG6NTRzH4zUc9/z2H3OZf///////yH5BAEAAB8ALAAAAAAQABAAAAWH4CeOXumNKOkJLFGm4ipwXHARbrrSzaQMmArkFJtVJj7Fw4E4aIg75MSzXFCcp1WgoVCUHFbLppEoES6Ph8kUMZDNGIdjXTIUEGUPpCKxlixtBQwIAFkQBxaAHgZ2GYRQGgcSbXYFGRsDhSQaDQ0dGRkMA5lEJAkJCAijAJowJaysLzAqsighADs=) no-repeat center center #ddf;
}
label#fschalter {
background: url(data:image/gif;base64,R0lGODlhEAAQAMQWAP+OkP9pXMhIPn8vKP+ZnZo5MPhiUP/IxP/b2f7Nyq5ANv5/dv+TivRgTP+2sf+zr//Avv/i3+FTRmglIP/V0v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABYALAAAAAAQABAAAAV/oCWOVVmNKFlJrFCm4ipFNCK46UpDBPFQCcUpNktQegQAxXEoDHWUylEpbZ5WCF6Usl0wIIOSAAEoR6WLQAAsppQXZ4ra4AhXFIkHXLo1LBwTVwoHW2pbgE8FBz9zBhQMD4EkBRAQCw0NCw+RQyQDAw4OmxOSMCWkpC8wKqooIQA7) no-repeat center center #fff;
}
label#bschalter:hover {
background-color: #8c8c;
}
label#fschalter:hover {
background-color: #fcc;
}
#backendschalter:checked ~ nav > label#bschalter,
#frontendschalter:checked ~ nav > label#fschalter {
margin-top: -50px;
}
input {
margin-top: -50px;
position: absolute;
}
/* Anpassungen für zu schmale Browserbreiten */
@media screen and (max-width: 1024px) {
div#backendbereich {
width: 100%;
}
div#frontendbereich {
width: 100%;
}
#frontendschalter:checked ~ div#backendbereich {
width: 0%;
}
#frontendschalter:checked ~ div#frontendbereich {
width: 100%;
}
}
</style>
</head>
<body>
<input type="radio" name="umschalter" value="leer" id="backendschalter" checked="checked">
<input type="radio" name="umschalter" value="leer" id="frontendschalter">
<nav>
<label id="bschalter" for="backendschalter"> </label>
<label id="fschalter" for="frontendschalter"> </label>
</nav>
<div id="frontendbereich">
<iframe name="frontend" src="./"></iframe>
</div>
<div id="backendbereich">
<iframe name="backend" src="./login.php"></iframe>
</div>
</body>
</html>
Was haltet ihr davon?
Edit: Ich habe den Frame für das Backend mal von phpwcms.php nach login.php geändert.