Additional Footer ohne Plugin einbinden

In diesem Tutorial möchte ich euch einmal erklären, wie ihr den additionalFooter, ohne Plugin, in euer Forum einbauen könnt.
Hierzu müssen wir zuerst eine Templategruppe erstellen.

Achtung:
Wenn euer Design schon eine eigene Gruppe mitbringt, muss dies nicht mehr gemacht werden. Dann dort einfach das Template hinzufügen.





Nun musst du deinem Design noch diese Templategruppe zuweisen.
Darstellung > Stile > Stile auflisten > (Dein Design) bearbeiten > Global > Allgemein



Nun erstellen wir das Template.
Ihr wählt eure Templategruppe und nennt euer Template additionalFooter

Dort fügt ihr folgendes ein:

Smarty-Template

  1. <div class="additionalFooterContent">
  2. <div class="footerContent1">
  3. <h3 class="subHeadline">Überschrift</h3>
  4. <p><a href="http://link.de">LINK</a></p>
  5. <p><a href="http://link.de">LINK</a></p>
  6. <p><a href="http://link.de">LINK</a></p>
  7. <p><a href="http://link.de">LINK</a></p>
  8. <p><a href="http://link.de">LINK</a></p>
  9. <h3 class="subHeadline"></h3>
  10. </div>
  11. <div class="footerContent2">
  12. <h3 class="subHeadline">Überschrift</h3>
  13. <p><a href="http://link.de">LINK</a></p>
  14. <p><a href="http://link.de">LINK</a></p>
  15. <p><a href="http://link.de">LINK</a></p>
  16. <p><a href="http://link.de">LINK</a></p>
  17. <p><a href="http://link.de">LINK</a></p>
  18. <h3 class="subHeadline"></h3>
  19. </div>
  20. <div class="footerContent3">
  21. <h3 class="subHeadline">Überschrift</h3>
  22. <p><a href="http://link.de">LINK</a></p>
  23. <p><a href="http://link.de">LINK</a></p>
  24. <p><a href="http://link.de">LINK</a></p>
  25. <p><a href="http://link.de">LINK</a></p>
  26. <p><a href="http://link.de">LINK</a></p>
  27. <h3 class="subHeadline"></h3>
  28. </div>
  29. <div class="footerContent4">
  30. <h3 class="subHeadline">Überschrift</h3>
  31. <p><a href="http://link.de">LINK</a></p>
  32. <p><a href="http://link.de">LINK</a></p>
  33. <p><a href="http://link.de">LINK</a></p>
  34. <p><a href="http://link.de">LINK</a></p>
  35. <p><a href="http://link.de">LINK</a></p>
  36. <h3 class="subHeadline"></h3>
  37. </div>
  38. <div style="clear:left;"></div>
  39. </div>
Alles anzeigen




Sofern das Template "footer" noch nicht in eurer Templategruppe habt, müsst ihr dies auch hinzufügen.
Ihr nennt es "footer" und fügt folgendes ein:

Smarty-Template

  1. {if $additionalFooterContents|isset}{@$additionalFooterContents}{/if}
  2. </div>
  3. <div id="footerContainer">
  4. <div id="footer">
  5. {include file=footerMenu}
  6. <div id="footerOptions" class="footerOptions">
  7. <div class="footerOptionsInner">
  8. <ul>
  9. {if $additionalFooterOptions|isset}{@$additionalFooterOptions}{/if}
  10. {if $stylePickerOptions|count > 1}
  11. <li class="stylePicker{if !SHOW_CLOCK} last{/if}">
  12. <a id="changeStyle" class="hidden"><img src="{icon}styleOptionsS.png{/icon}" alt="" /> <span>{lang}wbb.global.changeStyle{/lang}</span></a>
  13. <div class="hidden" id="changeStyleMenu">
  14. <ul>
  15. {foreach from=$stylePickerOptions item=style key=styleID}
  16. <li{if $styleID == $this->style->styleID} class="active"{/if}><a rel="nofollow" href="{if $this->session->requestURI && $this->session->requestMethod == 'GET'}{$this->session->requestURI}{if $this->session->requestURI|strpos:'?'}&amp;{else}?{/if}{else}index.php?{/if}styleID={$styleID}{@SID_ARG_2ND}"><span>{$style}</span></a></li>
  17. {/foreach}
  18. </ul>
  19. </div>
  20. <script type="text/javascript">
  21. //<![CDATA[
  22. onloadEvents.push(function() { document.getElementById('changeStyle').className=''; });
  23. popupMenuList.register('changeStyle');
  24. //]]>
  25. </script>
  26. <noscript>
  27. <form method="get" action="index.php" class="quickJump">
  28. <div>
  29. <input type="hidden" name="page" value="Index" />
  30. <select name="styleID" onchange="if (this.options[this.selectedIndex].value != 0) this.form.submit()">
  31. <option value="0">{lang}wbb.global.changeStyle{/lang}</option>
  32. <option value="0">-----------------------</option>
  33. {htmlOptions options=$stylePickerOptions selected=$this->style->styleID}
  34. </select>
  35. {@SID_INPUT_TAG}
  36. <input type="image" class="inputImage" src="{icon}submitS.png{/icon}" alt="{lang}wcf.global.button.submit{/lang}" />
  37. </div>
  38. </form>
  39. </noscript>
  40. </li>
  41. {/if}
  42. {if SHOW_CLOCK}
  43. <li id="date" class="date last" title="{@TIME_NOW|fulldate} UTC{if $timezone > 0}+{@$timezone}{else if $timezone < 0}{@$timezone}{/if}"><em><img src="{icon}dateS.png{/icon}" alt="" /> <span>{@TIME_NOW|fulldate}</span></em></li>
  44. {/if}
  45. <li id="toTopLink" class="last extraButton"><a href="#top" title="{lang}wcf.global.scrollUp{/lang}"><img src="{icon}upS.png{/icon}" alt="{lang}wcf.global.scrollUp{/lang}" /> <span class="hidden">{lang}wcf.global.scrollUp{/lang}</span></a></li>
  46. </ul>
  47. </div>
  48. </div>
  49. <p class="copyright">{lang}wbb.global.copyright{/lang}</p>
  50. </div>
  51. </div>
  52. {if !$this->user->userID && !LOGIN_USE_CAPTCHA}
  53. <div class="border loginPopup hidden" id="quickLoginBox">
  54. <form method="post" action="index.php?form=UserLogin" class="container-1">
  55. <div>
  56. <input tabindex="1" type="text" class="inputText" id="quickLoginUsername" name="loginUsername" value="{lang}wcf.user.username{/lang}" title="{lang}wcf.user.username{/lang}" />
  57. <input tabindex="2" type="password" class="inputText" id="quickLoginPassword" name="loginPassword" value="" title="{lang}wcf.user.password{/lang}" />
  58. {if $this->session->requestMethod == "GET"}<input type="hidden" name="url" value="{$this->session->requestURI}" />{/if}
  59. {@SID_INPUT_TAG}
  60. <input tabindex="4" type="image" class="inputImage" src="{icon}submitS.png{/icon}" alt="{lang}wcf.global.button.submit{/lang}" />
  61. </div>
  62. <p><label><input tabindex="3" type="checkbox" id="useCookies" name="useCookies" value="1" /> {lang}wbb.header.login.useCookies{/lang}</label></p>
  63. </form>
  64. </div>
  65. {/if}
Alles anzeigen


Nun fügt ihr folgende Codezeile in das Template "footer" ein:

Smarty-Template

  1. {include file=additionalFooter}




Nun sollte es so Aussehen:



Jetzt fügen wir noch den CSS-Code hinzu.
Ihr geht auf: Darstellung > Stile > Stile auflisten > (Dein Design) bearbeiten > Erweitert > Zusätzliche CSS-Deklarationen

Dort fügt ihr in die erste CSS-Deklarationen folgendes ein:

CSS-Quellcode

  1. .additionalFooterContent p {
  2. margin-bottom:3px;
  3. font-size:1.1em;
  4. }
  5. .additionalFooterContent h3, .additionalFooterContent, .footerMenu li, .footerOptions li {
  6. border-color: #4E5055 !important;
  7. }
  8. .additionalFooterContent {
  9. padding:10px 0;
  10. color:#ccc;
  11. }
  12. .additionalFooterContent h3 {
  13. border-bottom:solid 1px;
  14. }
  15. .footerContent1 h3, .footerContent2 h3, .footerContent3 h3{
  16. margin-right:10px;
  17. }
  18. .footerContent1, .footerContent2, .footerContent3, .footerContent4 {
  19. float: left;
  20. width: 25%;
  21. }
  22. #footerContainer {
  23. color:#ccc;
  24. }
Alles anzeigen

(Die Farben könnt ihr natürlich anpassen.)



Solltet ihr alles Schritt für Schritt befolgt haben, sollte es nach mehrmaligem F5 drücken so aussehen:



Ich hoffe, ich konnte euch ein wenig helfen. Wenn ihr Fragen habt, steht euch das Forum zu Verfügung.
Über den Autor
Keine Angabe

982 mal gelesen

Kommentare 1

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen