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:
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:
Alles anzeigen
Nun fügt ihr folgende Codezeile in das Template "footer" ein:
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:
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.
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
- <div class="additionalFooterContent">
- <div class="footerContent1">
- <h3 class="subHeadline">Überschrift</h3>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <h3 class="subHeadline"></h3>
- </div>
- <div class="footerContent2">
- <h3 class="subHeadline">Überschrift</h3>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <h3 class="subHeadline"></h3>
- </div>
- <div class="footerContent3">
- <h3 class="subHeadline">Überschrift</h3>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <h3 class="subHeadline"></h3>
- </div>
- <div class="footerContent4">
- <h3 class="subHeadline">Überschrift</h3>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <p><a href="http://link.de">LINK</a></p>
- <h3 class="subHeadline"></h3>
- </div>
- <div style="clear:left;"></div>
- </div>
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
- {if $additionalFooterContents|isset}{@$additionalFooterContents}{/if}
- </div>
- <div id="footerContainer">
- <div id="footer">
- {include file=footerMenu}
- <div id="footerOptions" class="footerOptions">
- <div class="footerOptionsInner">
- <ul>
- {if $additionalFooterOptions|isset}{@$additionalFooterOptions}{/if}
- {if $stylePickerOptions|count > 1}
- <li class="stylePicker{if !SHOW_CLOCK} last{/if}">
- <a id="changeStyle" class="hidden"><img src="{icon}styleOptionsS.png{/icon}" alt="" /> <span>{lang}wbb.global.changeStyle{/lang}</span></a>
- <div class="hidden" id="changeStyleMenu">
- <ul>
- {foreach from=$stylePickerOptions item=style key=styleID}
- <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:'?'}&{else}?{/if}{else}index.php?{/if}styleID={$styleID}{@SID_ARG_2ND}"><span>{$style}</span></a></li>
- {/foreach}
- </ul>
- </div>
- <script type="text/javascript">
- //<![CDATA[
- onloadEvents.push(function() { document.getElementById('changeStyle').className=''; });
- popupMenuList.register('changeStyle');
- //]]>
- </script>
- <noscript>
- <form method="get" action="index.php" class="quickJump">
- <div>
- <input type="hidden" name="page" value="Index" />
- <select name="styleID" onchange="if (this.options[this.selectedIndex].value != 0) this.form.submit()">
- <option value="0">{lang}wbb.global.changeStyle{/lang}</option>
- <option value="0">-----------------------</option>
- {htmlOptions options=$stylePickerOptions selected=$this->style->styleID}
- </select>
- {@SID_INPUT_TAG}
- <input type="image" class="inputImage" src="{icon}submitS.png{/icon}" alt="{lang}wcf.global.button.submit{/lang}" />
- </div>
- </form>
- </noscript>
- </li>
- {/if}
- {if SHOW_CLOCK}
- <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>
- {/if}
- <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>
- </ul>
- </div>
- </div>
- <p class="copyright">{lang}wbb.global.copyright{/lang}</p>
- </div>
- </div>
- {if !$this->user->userID && !LOGIN_USE_CAPTCHA}
- <div class="border loginPopup hidden" id="quickLoginBox">
- <form method="post" action="index.php?form=UserLogin" class="container-1">
- <div>
- <input tabindex="1" type="text" class="inputText" id="quickLoginUsername" name="loginUsername" value="{lang}wcf.user.username{/lang}" title="{lang}wcf.user.username{/lang}" />
- <input tabindex="2" type="password" class="inputText" id="quickLoginPassword" name="loginPassword" value="" title="{lang}wcf.user.password{/lang}" />
- {if $this->session->requestMethod == "GET"}<input type="hidden" name="url" value="{$this->session->requestURI}" />{/if}
- {@SID_INPUT_TAG}
- <input tabindex="4" type="image" class="inputImage" src="{icon}submitS.png{/icon}" alt="{lang}wcf.global.button.submit{/lang}" />
- </div>
- <p><label><input tabindex="3" type="checkbox" id="useCookies" name="useCookies" value="1" /> {lang}wbb.header.login.useCookies{/lang}</label></p>
- </form>
- </div>
- {/if}
Nun fügt ihr folgende Codezeile in das Template "footer" ein:
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
- .additionalFooterContent p {
- margin-bottom:3px;
- font-size:1.1em;
- }
- .additionalFooterContent h3, .additionalFooterContent, .footerMenu li, .footerOptions li {
- border-color: #4E5055 !important;
- }
- .additionalFooterContent {
- padding:10px 0;
- color:#ccc;
- }
- .additionalFooterContent h3 {
- border-bottom:solid 1px;
- }
- .footerContent1 h3, .footerContent2 h3, .footerContent3 h3{
- margin-right:10px;
- }
- .footerContent1, .footerContent2, .footerContent3, .footerContent4 {
- float: left;
- width: 25%;
- }
- #footerContainer {
- color:#ccc;
- }
(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.
1.081 mal gelesen
Trauerwelt -
Wie kann ich diese Verkleinern und einen eigenen Background geben, damit es aussieht wie bei z.b zeitdertrauer.de/index.php?page=Home