Zitat
du hast ja nur eine CSS von einem Joomla-Plugin gepostet.
Ich habe es damal für Ilch benutzt (hat auch alles geklappt).
Ich habe leider damals das Script "verloren".
"index.htm":
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="include/designs/Design-1/CSS/Login-Slider.css" />
<link rel="stylesheet" type="text/css" href="include/designs/Design-1/CSS/style.css" />
<script type="text/javascript" src="include/designs/Design-1/JS/jQuery.js"></script>
<title>{TITLE}</title>
</head>
<body>
<!-- | Anfang - Login | -->
<script type="text/javascript">
$pz=jQuery.noConflict();
$pz(document).ready(function(){
$pz(".trigger_login").click(function(){
$pz(".Login-Slider").toggle("fast");
$pz(this).toggleClass("active");
return false;
});
});
</script>
<div class="Login-Slider">
{_boxes_login}
<input type="hidden" name="option" value="com_user" />
<input type="hidden" name="task" value="login" />
<input type="hidden" name="return" value="L2pvb21sYS1leHRlbnNpb25zL2xvZ2luLWZvcm0tc2xpZGVy" />
<input type="hidden" name="7f6e9fa9745c454c627138d1423e3d5d" value="1" />
</div>
<a class="trigger_login">Login</a>
<!-- | Ende - Login | -->
"Login-Slider.css":
* html .button {
padding: 1px 5px !important;
}
*+html .button {
padding: 1px 5px !important;
}
#Login-Slider .a {
color: #2C79B3;
text-decoration: none;
}
#Login-Slider .a:hover, a:active, a:focus {
color: #2C79B3;
text-decoration :underline;
}
#Login-Slider img, a img {
margin: 0;
padding: 0;
}
/* C O N T E N T S */
#Login-Slider .inputbox {
border: 1px solid #CCCCCC;
padding: 3px;
color: #515756;
background: #FFFFFF;
width: 116px;
margin-top: 4px;
}
#Login-Slider .button {
padding: 2px 8px;
border: 1px outset #A8A8A8;
background: url(../Bilder/Login-Slider/Grad.gif) repeat-x;
font-size: 92%;
color: #515756;
font-weight: bold;
margin-left: 23px;
}
/* F O R M E N */
#Login-Slider form {
margin: 0;padding: 0;
}
#Login-Slider form label {
cursor: pointer;
}
/* L O G I N - B O X */
.Login-Slider {
width: 360px;
top: 50px;
background: #000000;
font-family: "Lucida Grande", Arial,sans-serif;
line-height: 1.6;
border: 1px solid #111111;
z-index: 99999;
position: fixed;
left: 0;
display: none;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}
.Login-Slider p {
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
position: fixed;
}
.Login-Slider a, .Login-Slider a:visited {
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
position: fixed;
}
.Login-Slider a:hover, .Login-Slider a:visited:hover {
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
position: fixed;
}
a.trigger_login {
position: fixed;
text-decoration: none;
top: 80px;
left: 0;
font-size: 16px;
letter-spacing: -1px;
font-family: verdana, helvetica, arial, sans-serif;
color: #FFFFFF;
padding: 20px 40px 20px 15px;
font-weight: 700;
background: #333333 url(../Bilder/Login-Slider/Oeffnen.png) 85% 55% no-repeat;
border: 1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
z-index: 99999;
cursor:pointer;
}
a.trigger_login:hover {
position: fixed;
text-decoration: none;
top: 80px;
left: 0;
font-size: 16px;
letter-spacing: -1px;
font-family: verdana, helvetica, arial, sans-serif;
color: #FFFFFF;
padding: 20px 40px 20px 20px;
font-weight: 700;
background: #222222 url(../Bilder/Login-Slider/Oeffnen.png) 85% 55% no-repeat;
border: 1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.active.trigger_login {
background: #222222 url(../Bilder/Login-Slider/Schliessen.png) 85% 55% no-repeat;
}
label.Login-Slider_username span {
display: block;
float: left;
text-indent: -5000px;
background: url(../Bilder/Login-Slider/Nickname.png) no-repeat center left;
width: 32px;
height: 32px;
margin-right: 5px;
cursor: default;
}
label.Login-Slider_password span {
display: block;
float: left;
text-indent: -5000px;
background: url(../Bilder/Login-Slider/Passwort.png) no-repeat center left;
width: 32px;
height: 32px;
margin-right: 5px;
cursor: default;
}
.Login-Slider-links {
font-size: 15px;
padding-top: 20px;
clear: both;
}
#login .inputbox {
width: 245px !important;
height: 30px;
color: #666666;
background: #FFFFFF;
font-size: 15px;
CCborderRadius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-left: 5px;
border-bottom: 1px solid #cbcbcb;
border-right: 1px solid #cbcbcb;
margin-bottom: 15px !important;
}
#login {
width: 300px;
}
#login .button {
background: url(../Bilder/Login-Slider/Login.png) no-repeat;
width: 65px;
height: 32px;
border: 0;
cursor: pointer;
}
/* S O N S T I G E S */
#Login-Slider input, select, textarea, .inputbox {
font-family: Tahoma, Arial, sans-serif;
font-size: 100%;
}
"style.css":
#full {
width: 974px;
border: none;
}
body {
background-color: #000000;
background-image: url(../Bilder/background.gif) ;
background-attachment:no-fixed;
background-position: 50% 50%;
background-repeat:repeat;
margin:2%;
padding:0;
}
#describe
{
position:relative;
width: 960px;
height: 22px;
top: 2px;
right: 7px;
float: right;
max-width: 960px;
max-height: 22px;
font-size: 12px;
color: #f2f2f2;
overflow: hidden;
z-index:1;
}
#News-Header {
background-image: url(../Bilder/News-Header.png);
width: 974px;
height: 184px;
}
#Header
{
background-image: url(../Bilder/Header.jpg);
position:relative;
width: 968px;
height: 157px;
top: 1px;
left: 3px;
}
#Willkommen{
background-image: url(../Bilder/Willkommen.png);
width: 974px;
height: 36px;
}
#name
{
top:12px;
position:relative;
width: 974px;
height: 36px;
left: 10px;
float: left;
max-width: 952px;
max-height: 15px;
font-family: Verdana, Arial;
font-size: 12px;
font-weight: bold;
color: #2f2f2f;
overflow: hidden;
z-index:1;
}
#contentc1 {
background: url(../Bilder/bg_site.png);
background-repeat: repeat;
width: 974px;
border: none;
}
#left_col {
width: 174px;
float: left;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
font-family: Verdana, Arial;
font-size: 11px;
color: #2f2f2f;
overflow: hidden;
}
#menuleftmiddle {
background: url(../Bilder/left_middle.png);
background-repeat: repeat-y;
align="top"
width: 174px;
border: none;
}
#menuleftbottom {
background: url(../Bilder/left_bottom.png);
background-repeat: no-repeat;
float: left;
align: top;
width: 174px;
height: 6px;
border: none;
}
#right_col {
width: 174px;
float: right;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
font-family: Verdana, Arial;
font-size: 11px;
color: #2f2f2f;
overflow: hidden;
}
#menurightmiddle {
background: url(../Bilder/right_middle.png);
background-repeat: repeat-y;
width: 174px;
float: left;
border: none;
}
#menurightbottom {
background: url(../Bilder/right_bottom.png);
background-repeat: no-repeat;
width: 174px;
height: 6px;
float: left;
border: none;
}
#menu_heading_left
{
background: url(../Bilder/left_top.png);
width: 174px;
height: 28px;
color: #a3a3a3;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
float: left;
}
#menu_heading_left_font
{
color: #f2f2f2;
font-family: Verdana, Arial;
font-size: 12px;
font-weight: bold;
float: left;
padding-top: 5px;
padding-left: 7px;
}
#menu_heading_right
{
background: url(../Bilder/right_top.png);
width: 174px;
height: 28px;
color: #a3a3a3;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
float: left;
margin-left: 0px;
}
#menu_heading_right_font
{
color: #f2f2f2;
font-family: Verdana, Arial;
font-size: 12px;
font-weight: bold;
float: right;
padding-top: 5px;
padding-right: 7px;
}
#main_col {
width: 626px;
float: left;
z-index:1;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
clear: none;
color: #2f2f2f;
text-align:left;
font-size: 12px;
font-family: Verdana,Arial;
overflow: auto;
z-index:2;
}
#main_colforum
{
width: 800px;
float: left;
z-index:1;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
clear: none;
color: #2f2f2f;
text-align:left;
font-size: 12px;
font-family: Verdana,Arial;
overflow: auto;
}
#main_colin
{
width: 622px;
float: left;
padding-top: 0px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 0px;
font-family: Verdana, Arial;
font-size: 12px;
color: #2f2f2f;
max-width:622px;
z-index:2;
overflow: hidden;
}
#main_colinforum
{
width: 792px;
float: left;
padding-top: 0px;
padding-left: 2px;
padding-right: 6px;
padding-bottom: 0px;
font-family: Verdana, Arial;
font-size: 12px;
color: #2f2f2f;
max-width:792px;
overflow: hidden;
}
#Ende-Leer
{
background-image: url(../Bilder/Ende-Leer.png);
background-repeat: no-repeat;
width: 974px;
height: 42px;
}
#Copyright {
background-image: url(../Bilder/Copyright.png);
background-repeat: no-repeat;
width: 974px;
height: 65px;
float: center;
font-family: Verdana, Arial;
font-size: 11px;
color: #d8d8d8;
padding-top: 5px;
}
#Copyright-Kontakt {
background-image: url(../Bilder/Kontakt.png);
background-repeat: no-repeat;
float: left;
width: 150px;
height: 30px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;
}
#Copyright-Impressum {
background-image: url(../Bilder/Impressum.png);
background-repeat: no-repeat;
float: right;
width: 150px;
height: 30px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 20px;
}
#footermenufoot
{
position:relative;
width: 466px;
height: 70px;
top: 0px;
left: 5px;
float: left;
max-width: 466px;
max-height: 70px;
overflow: hidden;
z-index:1;
}
#banner-slider
{
position:relative;
width: 468px;
height: 60px;
top: 4px;
left: 18px;
float: left;
max-width: 468px;
max-height: 60px;
overflow: hidden;
z-index:1;
}
#tophmenu
{
position:relative;
width: 770px;
height: 14px;
top: -20px;
left: 8px;
float: left;
max-width: 770px;
max-height: 14px;
overflow: hidden;
}
.menuone
{
width: 167px;
float: left;
padding-top: 0px;
padding-left: 4px;
padding-right: 3px;
padding-bottom: 0px;
color: #2f2f2f;
max-width:167px;
overflow: hidden;
}
.menutwo
{
width: 167px;
float: left;
padding-top: 0px;
padding-left: 3px;
padding-right: 4px;
padding-bottom: 0px;
color: #2f2f2f;
max-width:167px;
overflow: hidden;
}
.a
{
color: #1871d4;
}
.menu
{
display:block;
float: center;
color: #2f2f2f; // Menubuttonschrift
font-size: 12px;
width: 167px;
height: 20px;
text-indent: 25px;
text-decoration: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight:bold;
line-height: 19px;
background-image: url(../Bilder/menu_normal.gif);
background-repeat: no-repeat;
}
.menu:hover
{
display:block;
float: center;
color: #24455c; // menubutton m.over
font-size: 12px;
width: 167px;
height: 20px;
text-indent: 27px;
text-decoration: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight:bold;
line-height: 19px;
background-image: url(../Bilder/menu_over.gif);
background-repeat: no-repeat;
}
.title
{
font-size: 12px;
font-weight: bold;
color: #2f2f2f; //news ueberschrift
}
.bcontent
{
margin-left: 10px;
}
td
{
font-family: Verdana;
font-size: 11px;
color: #0A0A0A; // statistk,news ueberschrift,news inhalt,shoutbox,
}
a
{
color: #0094FF; // hyperlinks, onlinebox
font-family: Verdana;
font-size: 11px;
text-decoration: none;
}
a:hover
{
color: #FF8C00;
border-bottom: 1px dotted
}
a.box
{
color: #0A0A0A; // loginbox im menu
font-family: Verdana;
font-size: 11px;
text-decoration: none;
}
a.box:hover
{
color: #0094FF; // loginbox im menu m.over
text-decoration: none;
}
.Chead
{
background-color: #515151;
color: #cccccc;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-image: url(../Bilder/forenhead.jpg);
background-repeat: repeat-x
}
.Chead td, .Chead td strong, .Chead h4, .Chead td b
{
color: #0A0A0A; // gallery bilderueberschrift
}
.Callg
{
color: #ff0000;
}
.Callg td
{
color: ff0000;
}
.Cnorm
{
background-color: #ffffff; // news kommentare schrift background
color: #0A0A0A;
}
.Cmite
{
background-color: #c1c1c1; // downloads-details-name, in news kommentaren
color:#0A0A0A;
}
.mite
{
background-color: #c1c1c1;
color:#0A0A0A;
}
.Cdark
{
background-color: #8E8E8E; //foren beitrag-hintergrund, letzter beitrag hintergrund
color: #3F3F3F;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background-image: url(../Bilder/td_bg.jpg);
background-repeat: repeat-x
}
#Ballg
{
color: #FF0000;
background-color: #ff0000;
}
#Ballg td
{
color: #ff0000;
background-color: #ff0000;
}
.Bhead
{
color: #ff0000;
}
.Bbody
{
color: #ff0000;
}
.smalfont
{
color: #2f2f2f; // forum autordetails schriftfarbe, downloads vorschauTEXTfarbe
font-size: 10px;
text-decoration: none;
}
.smalfont_copyright
{
color: #0094FF;
font-size: 11px;
text-decoration: none;
}
.dltext
{
color: #ffffff; // download textfärbe
font-size: 11px;
text-decoration: none;
}
.downloads
{
background-color: #E6E6E6;
color: #0A0A0A;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background-image: url(../Bilder/td_bg2.jpg);
background-repeat: repeat-x;
}
.border
{
background-color: #2f2f2f; //forum,downloas,gallery usw. hintergrundfarbe
}
a.border
{
color: #0A0A0A;
}
.rand
{
border: 1px solid #2f2f2f;
}
hr
{
height: 1px;
border: solid #2f2f2f 1px;
border-top-width: 1px;
width: 100%;
}
input, textarea, select
{
color: #2f2f2f;
background-color: #ffffff;
font: 11px Verdana;
border-color: #c1c1c1;
border-width: 1px;
border-style: double;
font-weight: normal;
text-decoration: none;
}
#menu {}
#menu ul { padding-left: 10px; margin-left: 10px; }
#smallmenu { }
#smallmenu li { font-size: 11px; }
#smallmenu a { font-size: 11px; }
.sbback
{
background-color: #575757;
color:#0b0b0b;
}
.sbback2
{
background-color: #6b6b6b;
color:#0b0b0b;
}
.content
{
font-size: 11px;
font-weight: bold;
color: #0094FF; //news ueberschrift
}
a.navigation
{
font-family: Arial, Helvetica, sans-serif;
color: #828282;
text-decoration: none;
font-size: 12px;
letter-spacing: 0.1em;
text-shadow: 1px 1px 0 #000000;
}
a.navigation:link { color:#d8d8d8; font-family: Verdana, Arial; font-size: 11px; font-weight: normal;}
a.navigation:visited { color:#d8d8d8; font-family: Verdana, Arial; font-size: 11px; font-weight: normal;}
a.navigation:hover { color:#0094FF; font-family: Verdana, Arial; font-size: 11px; font-weight: normal;}
a.navigation:active { color:#49B3FF; font-family: Verdana, Arial; font-size: 11px; font-weight: normal;}
legend
{
font-size: 12px;
font-weight: normal;
color: #0A0A0A;
}
fieldset
{
overflow: auto;
border: 1px solid #0A0A0A;
}
input
{
overflow: auto;
border: 1px solid #0A0A0A;
}
textarea
{
overflow: auto;
border: 1px solid #0A0A0A;
}
.footermenu:link { color:#d8d8d8; font-family: Verdana, Arial; font-size: 10px; font-weight: bold;}
.footermenu:visited { color:#d8d8d8; font-family: Verdana, Arial; font-size: 10px; font-weight: bold;}
.footermenu:hover { color:#ffffff; font-family: Verdana, Arial; font-size: 10px; font-weight: bold;}
.footermenu:active { color:#ffffff; font-family: Verdana, Arial; font-size: 10px; font-weight: bold;}
.footermenu2:link { color:#515151; font-family: Verdana, Arial; font-size: 10px; font-weight: bold;}
.footermenu2:visited { color:#515151; font-family: Verdana, Arial; font-size: 10px; font-weight: bold;}
.footermenu2:hover { color:#2f2f2f; font-family: Verdana, Arial; font-size: 10px; font-weight: bold;}
.footermenu2:active { color:#2f2f2f; font-family: Verdana, Arial; font-size: 10px; font-weight: bold;}
.hmenustyle { color:#2f2f2f; font-family: Verdana, Arial; font-size: 11px; font-weight: normal;}
