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 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"<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 |
|
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 |
|
Verfasst am: 25. 04. 2012 [13:14]
|
|
|
ginobranco
Themenersteller
Dabei seit: 23.03.2012
Beiträge: 69
|
Danke Karlchen, für deine schnelle Hilfe 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 = | |*|• | |*|• | 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! Klicke ich drauf kommt "registrieren" bisschen komisch noch.. Ich denke aber ich bin nahe dran.. |
|
Verfasst am: 25. 04. 2012 [14:15]
|
|
|
ginobranco
Themenersteller
Dabei seit: 23.03.2012
Beiträge: 69
|
Ok... bin doch alleine weiter gekommen! 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 |
|
Verfasst am: 26. 04. 2012 [10:41]
|
|
|
ginobranco
Themenersteller
Dabei seit: 23.03.2012
Beiträge: 69
|
Im Moment funktioniert alles! 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 Meine frage ist.. wie kann ich die Logout-Box anlegen? 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 |
|
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 ? |
|
Verfasst am: 26. 04. 2012 [12:27]
|
|
|
ginobranco
Themenersteller
Dabei seit: 23.03.2012
Beiträge: 69
|
Danke tut mir leid ist nicht immer so einfach das ganze zu beschreiben.. also.. hier wäre mal der 1. screen ![]() der 2. ![]() und hier der 3. der entscheidende... ![]() 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 ich hoffe man hat mich jetzt verstanden ![]() 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 danke karlchen |
|
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. |
|
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 |
|
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 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? |







