TYPO3-Testaccount
Testen Sie die aktuellste TYPO3-Version kostenlos und unverbindlich für einen Monat!

Jetzt testen!

Schulungen

Ich brauch dringend Hilfe mit meiner LoginBox


Autor Nachricht
Verfasst am: 25. 04. 2012 [11:14]
ginobranco
Themenersteller
Dabei seit: 23.03.2012
Beiträge: 69
Hallo zusammen,
erstmal vielen Dank fürs reinschauen!
Ich bin gerade dabei für meine TYPO3 Seite mir eine LoginBox zu basteln.
Mein Felogin bzw. Einloggen usw. Funktioniert schon.
Es wird ein Login OHNE Registration.

Nun ich hätte gern diesen Login:

http://thefinishedbox.com/freebies/scripts/jquery-dropdown-login/

Ich habe das Teil mal runtergeladen.
Die CSS in mein Style.css und die JS in mein JS Ordner und habs per HTML includet.
Auch die Images sind im richtigen Ordner.
Soweit würde das Script auch funktionieren rein in HTML.
Doch ich schaff es nicht mein Felogin zu koppeln mit der LoginBox.

Nach suchen habe ich folgendes TS Script gefunden:

TYPOSCRIPT
xx.render.haendlerlogin = COA
    xx.render.haendlerlogin {
        wrap = <div class="wrapper">|</div>
 
        30 = COA
        30 {
            10 = TEXT
            10.wrap = <a href="#" id="loginButton" class="h-button"><span>|</span></a>
            10.value = Händler-Login
 
 
 
            20 = COA
            20 {
                wrap = <div id="loginBox"> | </div>
                10 < plugin.tx_felogin_pi1
                10 {
                feloginBaseURL = xxx
                storagePid = 662
                templateFile = fileadmin/templates/felogin/felogin_standard.html
                showForgotPasswordLink = 1
                #welcomeHeader_stdWrap >
                #welcomeMessage_stdWrap >
                #logoutHeader_stdWrap >
                #logoutHeader_stdWrap >
                #successHeader_stdWrap >
 
                showLogoutFormAfterLogin = 1
                noSuccessMessageAfterLogin = 1
                dateFormat = d.m.Y 
 
                redirectMode = login
                #_CSS_DEFAULT_STYLE >
                }    
                40 = TEXT
                40.value = <div class="reg-link"><a href="/?id=659" alt="Link zum Registrationsformular">Neu registrieren</a></div>    
            }
 
 
 
        }    
    }    
 
    xx.panel_js = COA
    xx.panel_js {
 
        30 = TEXT
        30.value (
            <script type="text/javascript">
                $(function() {
                    var button = $('#loginButton');
                    var box = $('#loginBox');
                    var form = $('#loginForm');
                    button.removeAttr('href');
                    button.mouseup(function(login) {
                        box.toggle();
                        button.toggleClass('active');
                    });
                    form.mouseup(function() { 
                        return false;
                        });
                    $(document).mouseup(function(login) {
                        if(!($(login.target).parents('#loginButton').length > 0)) {
                            button.removeClass('active');
                            box.hide();
                        }
                    });
                });
 
            </script>    
        )
 
 
    }


Es ist von jemand der es auch mal versucht hat, aber ich kann es nicht für mich abwandeln icon_frown.gif
Vor allem weiss ich nicht wie ich dem HTML sagen soll hier setze die LoginBox ein ?

HTML:

HTML
<!-- ###DOKUMENT### begin -->
<style type="text/css">
    #search {
    }
    #search input[type="text"] {
    background: url(http://localhost/typo3/fileadmin/template/img/search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 80px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
    #search input[type="text"]:focus {
    width: 130px;
    }
</style>
<script type="text/javascript" src="fileadmin/template/js/hoverIntent.js"></script>
<script type="text/javascript" src="fileadmin/template/js/superfish.js"></script>
<script type="text/javascript" src="fileadmin/template/js/supersubs.js"></script>
<script type="text/javascript" src="fileadmin/template/js/login.js"></script>
<script type="text/javascript">
    // initialise plugins
    $(document).ready(function(){ 
            $("ul.sf-menu&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />.supersubs({ 
                minWidth:    11,   // minimum width of sub-menus in em units 
                maxWidth:    27,   // maximum width of sub-menus in em units 
                extraWidth:  1     // extra width can ensure lines don't sometimes turn over 
                                   // due to slight rounding differences and font-family 
            }).superfish({
    				animation:   {opacity:'toggle',height:'show',width:'show'},
    				speed: 'fast'
    			});  // call supersubs first, then superfish, so that subs are 
                             // not display:none when measuring. Call before initialising 
                             // containing tabs for same reason. 
        }); 
 
</script>
<div id="center">
    <div id="head">
        <div class="login">
            <!-- ###LOGIN### start -->
            Hier hätte ich gerne die LoginBox
            <!-- ###LOGIN### stop -->
        </div>
        <div id="logo">###LOGO###</div>
    </div>
    <div id="navigation">###NAVI###</div>
    <div id="headerbild">###HEADERBILD###</div>
    <div style="float:right;  padding-top: 55px; padding-right: 13px;" class="searchform">
        <form method="post" action="http://localhost/typo3/index.php?id=78" id="search">
            <input type="text" size="10" title="" value="" name="tx_indexedsearch[sword]" class="searchbox" placeholder="Suche..." />
            <input type="hidden" value="1" name="tx_indexedsearch[type]" />
            <input type="hidden" name="tx_indexedsearch[lang]" value="0" />
            <input type="hidden" value="1" name="no_cache" />
        </form>
    </div>
    <div style="clear:both;"></div>
    <div id="headernavi">###HEADERNAVI###</div>
    <div id="content">
        <div id="con-left-right">
            <div id="con-left">###CONTENT###</div>
            <div id="con-right">###RIGHT###</div>
        </div>
        <div id="footer">
            ###FOOTER###<br style="clear:both;" />
        </div>
    </div>
</div>
<!-- ###DOKUMENT### end



Würde mir bitte jemand helfen? Ich komm einfach nicht weiter..
Danke
Profil
Verfasst am: 25. 04. 2012 [13:00]
karlchen
Dabei seit: 19.10.2006
Beiträge: 998
du hast jetzt für deine Felogin Box einen Subpart in dein HTML geschrieben

Also musst du das ganz so in etwa ansprechen

TYPOSCRIPT
xx.render.haendlerlogin{
....
}
 
// achte darauf es deine Struktur anzupassen
page.10.subparts.LOGIN < xx.render.haendlerlogin


danach musst du noch das javascript hinzufügen

TYPOSCRIPT
// das von dir gepostet jquery skript sollte eher in den Footer, nicht in den Header
page.jsFooterInline.1234567890 < xx.panel_js


kannste aber auch alles im tsref.de nachlesen icon_wink.gif
Profil
Verfasst am: 25. 04. 2012 [13:14]
ginobranco
Themenersteller
Dabei seit: 23.03.2012
Beiträge: 69
Danke Karlchen,
für deine schnelle Hilfe icon_smile.gif

Meintest du es so?
TYPOSCRIPT
#################################
# Indexed Search aktivieren
#################################
config.index_enable = 1
 
 
# RealURL
#config.simulateStaticDocuments = 0
#config.baseURL = http://www.test-typo3.de/
#config.tx_realurl_enable = 1
#config.uniqueLinkVars = 1
#config.linkVars = L
 
#E-Mail Antispam
config.spamProtectEmailAddresses = 1
config.spamProtectEmailAddresses_atSubst = (at)
 
config {
  #Kommentare ausblenden
  disablePrefixComment = 1
  xhtml_cleaning = all
  index_enable = 1
  linkVars = L
  sys_language_uid = 0
  language = de
  locale_all = de_DE
  htmlTag_langKey = de
  metaCharset = utf-8
  #renderCharset = utf-8
  additionalHeaders = Content-Type:text/html;charset=utf-8
  extTarget=_blank
  doctype = xhtml_trans
}
 
 
#csc-header entfernen
lib.stdheader.stdWrap.dataWrap >
#�berschriften ohne Zus�tze
lib.stdheader.2.headerStyle >
lib.stdheader.3.headerClass >
# class="bodytext" bei RTE abstellen
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
# Ummantelung mit <p> bei folgenden Tags verhindern
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.encapsTagList = cite, div, p, pre, hr, h1, h2, h3, h4, h5, h6,table,tr,td
#p bei Tabellenzellen entfernen
#lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.removeTags = p
#Klassen in Tabellen zulassen
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list >
 
page = PAGE
page {
 
  config.disablePrefixComment = 1
  shortcutIcon = fileadmin/template/images/favicon.ico
  typeNum = 0
  bodyTag =
 
  includeCSS {
   file1 = fileadmin/template/style.css
   file1.media = screen
  }
   includeJS.file10 = fileadmin/template/js/jquery.min.js
 
  includeJSFooter{
  file11 = fileadmin/template/js/animated-menu.js
  file12 = fileadmin/template/js/general.js
  file13 = fileadmin/template/js/jquery.easing.1.3.js
}
 
 
  bodyTagCObject = TEXT
  bodyTagCObject.field = uid
  bodyTagCObject.wrap = <body id="page|">
 
  10 = TEMPLATE
  10.template = FILE
  10.template.file = fileadmin/template/template.html
  10.workOnSubpart = DOKUMENT
  10.marks {
 
    LOGO = TEXT
    LOGO.value = <a href="/" title="Startseite"><img src="fileadmin/template/img/logo.png"></a>
 
  NAVI= HMENU
     NAVI {
       special = directory
       special.value = 1
       1 = TMENU
       1 {
         wrap = <ul class="sf-menu">|</ul>
         noBlur = 1
         expAll = 1
         NO = 1
         NO.before.dataWrap = <li id="pageUid_{field:uid}"> |
         NO.wrapItemAndSub = |</li>
         NO.ATagTitle.field = title // nav_title     
         ACT < .NO
         ACT = 1
         ACT.ATagParams = class="active"
       }
       2 < .1
       2 {
         noBlur = 0
       }
       3 < .2
     }
 
   CONTENT = CONTENT
     CONTENT {
       table = tt_content
       select.orderBy = sorting
       select.languageField = sys_language_uid
       select.where = colPos = 0
       renderObj < tt_content
       renderObj.stdWrap.wrap = <div id="con-mitte-left"><!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end--></div>
     }
 
     RIGHT = CONTENT
     RIGHT {
       table = tt_content
       slide = -1
       select.orderBy = sorting
       select.languageField = sys_language_uid
       select.where = colPos = 2
       renderObj < tt_content
       renderObj.stdWrap.wrap = <div id="con-mitte-right"> | </div>
     }
 
     HEADERBILD = CONTENT
     HEADERBILD {
       table = tt_content
       slide = -1
       select.orderBy = sorting
       select.languageField = sys_language_uid
       select.where = colPos = 1
       renderObj < tt_content
       renderObj.stdWrap.wrap = <div id="con-headerbild"> | </div>
     }
 
     FOOTER = HMENU
     FOOTER {
       special = list
       special.value = 116,55,127,128
       1 = TMENU
       1 {
         wrap = <div class="menu-footer"> | </div>
         NO.allWrap = |&nbsp; |*|&bull;&nbsp;|&nbsp;|*|&bull;&nbsp;|
         NO.ATagTitle.field = title // nav_title
         ACT < .NO
         ACT = 1
         ACT.ATagParams = class="active"
       }
    }
 
     HEADERNAVI = HMENU
     HEADERNAVI {
       special = list
       special.value = 6,10,11
  1 = GMENU
  1.noBlur = 1
  1.wrap = |
  1.NO = 1
  1.NO {
     altImgResource.import = uploads/media/
       altImgResource.import.field = media
     altImgResource.import.listNum = 0
  }
  1.RO < .1.NO
  1.RO = 1
  1.RO.altImgResource.import.listNum = 1
       }
    }
 
  }
}
 
plugin.tx_indexedsearch._DEFAULT_PI_VARS.lang = 0
config.index_externals = 1 (z.B. für PDF Files)
config.sys_language_uid = 0
config.language = de
 
config.index_externals = 1
# Anzahl der anzuzeigenden Resultate pro Seite
plugin.tx_indexedsearch._DEFAULT_PI_VARS.results = 10
plugin.tx_indexedsearch {
  # ID der obersten Seite
  search.rootPidList = 1
  show.rules = 0
  show.advancedSearchLink = 1
  show.L1sections = 0
  templateFile = fileadmin/template/indexed_search.tmpl
  _DEFAULT_PI_VARS.lang = 0
  browseBoxWrap = <div class="browsebox">|</div>
  pageWrap = <span>|</span>
}
 
page.10.subparts.LOGIN = COA
    page.10.subparts.LOGIN {
        wrap = <div class="wrapper">|</div>
 
        30 = COA
        30 {
            10 = TEXT
            10.wrap = <a href="#" id="loginButton" class="h-button"><span>|</span></a>
            10.value = Händler-Login
 
 
 
            20 = COA
            20 {
                wrap = <div id="loginBox"> | </div>
                10 < plugin.tx_felogin_pi1
                10 {
                feloginBaseURL = xxx
                storagePid = 662
                templateFile = fileadmin/templates/felogin/felogin_standard.html
                showForgotPasswordLink = 1
                #welcomeHeader_stdWrap >
                #welcomeMessage_stdWrap >
                #logoutHeader_stdWrap >
                #logoutHeader_stdWrap >
                #successHeader_stdWrap >
 
                showLogoutFormAfterLogin = 1
                noSuccessMessageAfterLogin = 1
                dateFormat = d.m.Y
 
                redirectMode = login
                #_CSS_DEFAULT_STYLE >
                }    
                40 = TEXT
                40.value = <div class="reg-link"><a href="/?id=659" alt="Link zum Registrationsformular">Neu registrieren</a></div>    
            }
 
 
 
        }    
    }    
 
 
page.jsFooterInline.1234567890  = COA
    page.jsFooterInline.1234567890  {
 
        30 = TEXT
        30.value (
            <script type="text/javascript">
                $(function() {
                    var button = $('#loginButton');
                    var box = $('#loginBox');
                    var form = $('#loginForm');
                    button.removeAttr('href');
                    button.mouseup(function(login) {
                        box.toggle();
                        button.toggleClass('active');
                    });
                    form.mouseup(function() {
                        return false;
                        });
                    $(document).mouseup(function(login) {
                        if(!($(login.target).parents('#loginButton').length > 0)) {
                            button.removeClass('active');
                            box.hide();
                        }
                    });
                });
 
            </script>    
        )
 
 
    }
 
/*[usergroup=*]
   page.10.subparts.LOGIN = TEXT
   page.10.subparts.LOGIN.value(
      <form action="index.php?id=1" method="post">
      Angemeldet als: <span><!--###USERNAME###--></span>
 
      <input class="submit logout" type="submit" name="submit" value="Abmelden" />
      <input type="hidden" name="logintype" value="logout"/>
      <input type="hidden" name="pid" value="132" />
      </form>
   )
[else]
   page.10.subparts.LOGIN = TEXT
   page.10.subparts.LOGIN.value (
      <form action="index.php?id=1" method="post" onsubmit="superchallenge_pass(this); return true;">
      <input class="input" type="text" id="user" name="user" value="Benutzername" onfocus="if (this.value == 'Benutzername') this.value = '';"/>
      <input class="input" type="password" id="pass" name="pass" value="password" onfocus="if (this.value == 'password') this.value = '';"/>
      <input class="submit" type="submit" name="submit" value="Anmelden"/>
      <input type="hidden" name="logintype" value="login"/>
      <input type="hidden" name="pid" value="132" />
      <input type="hidden" name="redirect_url" value="index.php?id=1" />
      </form>
   )
[GLOBAL]*/
 
 
[globalVar = TSFE:id = 1]
page.includeJS.file81 = fileadmin/template/js/general-start.js
[global]
 
 
 
####
# Condition for layout
#####
 
[globalVar = TSFE:page|layout = 1]
page.10.template.file = fileadmin/template/temp-kontakt.html
[global]
 
 
[globalVar=TSFE:page|layout=2]
page.10.template.file = fileadmin/template/temp-start.html
[global]
 
 
[browser = msie]
page.includeCSS.file90 = fileadmin/template/ie.css
[GLOBAL]


Jetzt zeigt es mir zumindest den Button an! icon_smile.gif Darauf steht "Händler-Login"
Klicke ich drauf kommt "registrieren" bisschen komisch noch..
Ich denke aber ich bin nahe dran.. icon_frown.gif
Profil
Verfasst am: 25. 04. 2012 [14:15]
ginobranco
Themenersteller
Dabei seit: 23.03.2012
Beiträge: 69
Ok... bin doch alleine weiter gekommen! icon_smile.gif
Ich habe im Fildeadmin ein Template angelegt.
Jetzt lädt es auch den Teil mit der Benutzereingabe..
Doch klicke ich jetzt auf das Feld geht das ganze wieder zu icon_frown.gif
Profil
Verfasst am: 26. 04. 2012 [10:41]
ginobranco
Themenersteller
Dabei seit: 23.03.2012
Beiträge: 69
Im Moment funktioniert alles! icon_smile.gif
Bin gerade dabei die CSS anzupassen...
Das ganze sieht bis jetzt so aus, dass ich oben im Header auf "login" klicke dann togglet unten das Loginfeld auf...
Ich kann mich dann einloggen... Aber ich möchte das jetzt oben im Header drin steht Abmelden und als was man angemeldet ist..
praktisch gesagt die "logout-box" in der "felogin-template.html" habe ich versucht das Logout form zu formatieren hab dem Logout in meiner CSS auch eine ID gegeben funktioniert.. doch die position kann ich nicht verändern.. weil es kein eigenständiges DIV ist icon_frown.gif
Meine frage ist.. wie kann ich die Logout-Box anlegen? icon_frown.gif

hier mal mein TS teil:

TYPOSCRIPT
page.10.subparts.LOGIN = COA
    page.10.subparts.LOGIN {
        wrap = <div class="wrapper">|</div>
 
        30 = COA
        30 {
            10 = TEXT
            10.wrap = <a href="#" id="loginButton" class="h-button"><span>|</span></a>
            10.value = Login
 
 
 
            20 = COA
            20 {
                wrap = <div id="loginBox"> | </div>
                10 < plugin.tx_felogin_pi1
                10 {
                feloginBaseURL = xxx
                storagePid = 132
                templateFile = fileadmin/template/felogin/felogin_standard.html
                showForgotPasswordLink = 1
                #welcomeHeader_stdWrap >
                #welcomeMessage_stdWrap >
                #logoutHeader_stdWrap >
                #logoutHeader_stdWrap >
                #successHeader_stdWrap >
 
                showLogoutFormAfterLogin = 1
                noSuccessMessageAfterLogin = 1
                dateFormat = d.m.Y
 
                redirectMode = login
                #_CSS_DEFAULT_STYLE >        
 
        }    
    }    
 
 
page.jsFooterInline.1234567890  = COA
 
page.jsFooterInline.1234567890  {
 
        30 = TEXT
        30.value (
            <script type="text/javascript">
                $(function() {
                    var button = $('#loginButton');
                    var box = $('#loginBox');
                    var form = $('#loginForm');
                    button.removeAttr('href');
                    button.mouseup(function(login) {
                        box.toggle();
                        button.toggleClass('active');
                    });
                    form.mouseup(function() {
                        return false;
                        });
                    $(document).mouseup(function(login) {
                        if(!($(login.target).parents('#loginButton').length > 0)) {
                            button.removeClass('active');
                            box.hide();
                        }
                    });
                });
 
            </script>    
        )
 
 
    }


Ich glaub die CSS und die HTML werden nicht erstmal nicht benötigt oder?

danke schon mal icon_smile.gif
Profil
Verfasst am: 26. 04. 2012 [12:10]
karlchen
Dabei seit: 19.10.2006
Beiträge: 998
verstehe gerade nicht so ganz was du meinst,
die Logout-box wird also ausgegeben, aber an der falschen Stelle ? oder wird nicht angezeigt ?
Kannste mal ein paar Screenshots zeigen ?
Profil
Verfasst am: 26. 04. 2012 [12:27]
ginobranco
Themenersteller
Dabei seit: 23.03.2012
Beiträge: 69
Danke icon_smile.gif Für deine Nachricht
tut mir leid ist nicht immer so einfach das ganze zu beschreiben..
also..
hier wäre mal der 1. screen
http://www.bilder-upload.eu/show.php?file=aaf384-1335435803.png
der 2.
http://www.bilder-upload.eu/show.php?file=4d7342-1335435867.png
und hier der 3. der entscheidende...
http://www.bilder-upload.eu/show.php?file=dde62e-1335435897.png

Praktisch ist das die Anzeige wenn jemand eingeloggt ist..
diese taucht nur auf wenn man wieder auf "login" klickt..
dann steht da.. benutername etc.
Aber ich will nicht das es dort steht.. sondern konstant ganz oben..
aber ich kann das icht formatieren.. nur die formfelder und den button..
die box nicht weil die irgendwie zusammenhängt mit der loginbox icon_frown.gif

ich hoffe man hat mich jetzt verstanden banghead.gif

was natürlich luxus wäre.. wenn man angemeldet ist nicht mehr login sondern einfach loggout dran steht aber ich glaub das schaff ich nich icon_frown.gif

danke karlchen
Profil
Verfasst am: 26. 04. 2012 [15:20]
karlchen
Dabei seit: 19.10.2006
Beiträge: 998
Aha,

das sind jedoch alles eher CSS und jQuery Probleme, aufgrund deiner HTML/CSS/JS Strukturen kann man dir da gar nicht wirklich was genaues sagen.
Profil
Verfasst am: 27. 04. 2012 [10:09]
ginobranco
Themenersteller
Dabei seit: 23.03.2012
Beiträge: 69
Hallo Karlchen,

also ich versuchs nochmal zu beschreiben..
Es wird nur eine Box erstellt und zwar die LoginBOX
Das heisst, ich kann auch nur diese per CSS formatieren...
z.B. Ich sage die LoginBOX soll ganz rechts stehen..
ABER wenn ich eingeloggt bin soll eine neue BOX da sein die LogoutBOX
also ein neues DIV das ich formatieren kann und sagen kann das soll zb. links stehen oder im header... wenn ich in meinen Firebug sehe erstellt es aber nur lediglich ein DIV das loginbox..
das ist mein problem icon_frown.gif
Profil
Verfasst am: 15. 06. 2012 [17:02]
timmy2007
Dabei seit: 04.01.2007
Beiträge: 426
ginobranco schrieb:

Hallo Karlchen,

also ich versuchs nochmal zu beschreiben..
Es wird nur eine Box erstellt und zwar die LoginBOX
Das heisst, ich kann auch nur diese per CSS formatieren...
z.B. Ich sage die LoginBOX soll ganz rechts stehen..
ABER wenn ich eingeloggt bin soll eine neue BOX da sein die LogoutBOX
also ein neues DIV das ich formatieren kann und sagen kann das soll zb. links stehen oder im header... wenn ich in meinen Firebug sehe erstellt es aber nur lediglich ein DIV das loginbox..
das ist mein problem icon_frown.gif


Ich glaube ich weiss, was Du suchst. Denn auch ich bin auf der Suche nach einer Lösung, wie ich eine ähnliche Loginbox machen kann, wie es z.B. bei der aktuellen typo3.org Webseite verwendet wird.

Ich habe deswegen schon einen Thread aufgemacht:Loginformular mit Dropdownbox realisieren

Vielleicht kann uns jemand dabei weiterhelfen?
Profil