Wie kann ich die WoltLab Homepage emulieren?

cazz2206 · Sep 27th 2020

Quote from KingKaSo

Vielen Dank Sir. Eine Frage habe ich, wie mache ich das am besten, wenn ich nun 3x Box nebeneinander haben möchte? Alles in einem Themplate?

Kann mir hier keiner weiterhelfen?

Felix | D1strict · Sep 27th 2020

Quote from Felix | Sir.Robo Media

Dafür kannst du das HTML, welches du zu Anfang hattest nutzen. Ich habe es dich nur zur besseren Übersicht entfernen lassen. Natürlich musst du dort das Template-Script wieder einfügen.

cazz2206 · Sep 27th 2020

Quote from Felix | Sir.Robo Media

Ich stehe mitlerweile aufm Schlauch. Welches HTML? Was fürn Themplate Script?

Felix | D1strict · Sep 27th 2020

Dein HTML von gestern

Quote from KingKaSo

<div class="gridLayout row">
<div class="gridBox col-md-4">
<div class="gridBoxContent gridBoxIcon gridBoxJustify">
<div class="gridBoxContentHeroIcon gridBoxCenter">
<span class="icon icon96 fa-question"></span>
</div>
<p>We have seen some unacceptable instances where international journalists have been kicked out We have seen some unacceptable instances where international journalists have been kicked out We have seen some unacceptable instances where international journalists have been kicked out</p>
</div>
</div>
<div class="gridBox col-md-4">
<div class="gridBoxContent gridBoxIcon gridBoxJustify">
<div class="gridBoxContentHeroIcon gridBoxCenter">
<span class="icon icon96 fa-meh-o"></span>
</div>
<p>We have seen some unacceptable instances where international journalists have been kicked out We have seen some unacceptable instances where international journalists have been kicked out We have seen some unacceptable instances where international journalists have been kicked out</p>
</div>
</div>
<div class="gridBox col-md-4">
<div class="gridBoxContent gridBoxIcon gridBoxJustify">
<div class="gridBoxContentHeroIcon gridBoxCenter">
<span class="icon icon96 fa-recycle"></span>
</div>
<p>We have seen some unacceptable instances where international journalists have been kicked out We have seen some unacceptable instances where international journalists have been kicked out We have seen some unacceptable instances where international journalists have been kicked out</p>
</div>
</div>
</div>

Display More

musst du mit deinem nun funktionierenden Script anpassen, sodass es schön aussieht.

Quote from Felix | Sir.Robo Media

<h2 class="sectionTitle">Aktuelle Themen</h2>
<ul class="homeThreadList">
{foreach from=$homeThreads item=thread}
<li data-object-id="{$thread->threadID}">
<a href="{$thread->getLink()}" class="box48" data-user-id="{$thread->getLastPosterProfile()->userID}">
<span><img src="{$thread->getLastPosterProfile()->getAvatar()->getURL(48)}" alt="" style="width: 48px; height: 48px"></span>

<div>
<small>
<ul class="inlineList dotSeparated">
<li>{@$thread->lastPostTime|time}</li>
<li>{$thread->getLastPosterProfile()->username}</li>
</ul>
</small>
<h3>{$thread->getTitle()}</h3>
</div>
</a>
</li>
{/foreach}
</ul>

Display More

cazz2206 · Sep 27th 2020

Quote from Felix | Sir.Robo Media

Dein HTML von gestern

musst du mit deinem nun funktionierenden Script anpassen, sodass es schön aussieht.

Das werde ich nicht selber hinkriegen. Muss da anscheinend jemanden holen, der mir das ganze entgeldlich macht. Die 3 Boxen erstellen ist zwar kein Problem, aber Sie nebeneinander hinsetzen wird wieder tagelang dauern.

RainerSF · Sep 27th 2020

Warum? Wenn du das mit dem php doch hin bekommst ist das mit 3 Containern nebeneinander doch nur noch Gelächter! Denkst du gerade vielleicht etwas zu kompliziert ?

cazz2206 · Sep 27th 2020

Quote from RainerSF

Warum? Wenn du das mit dem php doch hin bekommst ist das mit 3 Containern nebeneinander doch nur noch Gelächter! Denkst du gerade vielleicht etwas zu kompliziert ?

um ehrlich zu sein fehlt mir das Wissen von HTML und CSS. Ich bin hinter diesen Seiten und Box System nicht gekommen. Weiß garnicht, wie das ganze miteinander zusammenhängt.

Felix | D1strict · Sep 27th 2020

Benutz' doch einfach das Layout-Expansion-Kit von cls-design (https://www.cls-design.com/fil…3-x-layout-expansion-kit/)

& hier sind noch beispiele dafür:

http://demo.ws3.cls-design.com/index.php?layout/

Aze · Sep 27th 2020

Quote from KingKaSo

um ehrlich zu sein fehlt mir das Wissen von HTML und CSS

Dann eigne es dir an, HTML und CSS sind keine Raketenwissenschaft.

cazz2206 · Sep 27th 2020

Ich habe bereits denn Code kopiert, aber kriege die Tabellen nicht nebeneinander, dass ist mein Problem.

cazz2206 · Sep 27th 2020

Mein aktueller Code sieht wie folgt aus:

Code

<div id="links">
<div class="col col-xs-12 col-md-4">
                <section class="box boxWithIcon">
                    <h2 class="boxTitle">
                        <span class="icon icon64 fa-bullhorn"></span>
                        Neuigkeiten
                    </h2>
                    
                    <div class="boxContent">
    {foreach from=$homeThreads item=thread}
<br />   
                                                {$thread->getLastPosterProfile()->username} 
-
                        {@$thread->lastPostTime|time} 
            <a href="{$thread->getLink()}" class="box48" data-user-id="{$thread->getLastPosterProfile()->userID}">
                
                <div>
                    <small>
                        <ul class="inlineList dotSeparated">

                        </ul>
                    </small>
                    <h3>{$thread->getTitle()}</h3>
                </div>
            </a>

    {/foreach}

                        
                        <hr class="boxContentSeparator">
                        
                        <p class="diveIntoActionFooter"><a href="">Weitere Neuigkeiten</a></p>
                    </div>
                </section>
            </div>
</div>

<div id="rechts">
<div class="col col-xs-12 col-md-4">
                <section class="box boxWithIcon">
                    <h2 class="boxTitle">
                        <span class="icon icon64 fa-bullhorn"></span>
                        Neuigkeiten
                    </h2>
                    
                    <div class="boxContent">
    {foreach from=$homeThreads item=thread}
<br />   
                                                {$thread->getLastPosterProfile()->username} 
-
                        {@$thread->lastPostTime|time} 
            <a href="{$thread->getLink()}" class="box48" data-user-id="{$thread->getLastPosterProfile()->userID}">
                
                <div>
                    <small>
                        <ul class="inlineList dotSeparated">

                        </ul>
                    </small>
                    <h3>{$thread->getTitle()}</h3>
                </div>
            </a>

    {/foreach}

                        
                        <hr class="boxContentSeparator">
                        
                        <p class="diveIntoActionFooter"><a href="">Weitere Neuigkeiten</a></p>
                    </div>
                </section>
            </div>
    </div>
    
    <div id="mitte">
        
<div class="col col-xs-12 col-md-4">
                <section class="box boxWithIcon">
                    <h2 class="boxTitle">
                        <span class="icon icon64 fa-bullhorn"></span>
                        Neuigkeiten
                    </h2>
                    
                    <div class="boxContent">
    {foreach from=$homeThreads item=thread}
<br />   
                                                {$thread->getLastPosterProfile()->username} 
-
                        {@$thread->lastPostTime|time} 
            <a href="{$thread->getLink()}" class="box48" data-user-id="{$thread->getLastPosterProfile()->userID}">
                
                <div>
                    <small>
                        <ul class="inlineList dotSeparated">

                        </ul>
                    </small>
                    <h3>{$thread->getTitle()}</h3>
                </div>
            </a>

    {/foreach}

                        
                        <hr class="boxContentSeparator">
                        
                        <p class="diveIntoActionFooter"><a href="">Weitere Neuigkeiten</a></p>
                    </div>
                </section>
            </div>            
    </div>

Display More

mein .css

Code

#links {
width: 12em;
float: left;
}

#mitte {
margin-left: 12em;
margin-right: 12em;
}

#rechts {
width: 12em;
float: right;
}

Display More

Resultat:

Hitman · Sep 27th 2020

Wieso arbeitest du mit float

Das brauchst du eigentlich nicht, da hier mit flex gearbeitet wird.

Hast du mal eine Liveansicht?

cazz2206 · Sep 28th 2020

https://baudeinkopf.de/index.php?dashboard/

Auf dieser Seite kannst Du dir es Live anschauen.

Ich habe jetzt die Boxen per HTML eingebunden. Nur möchte ich eine Spalte mit Neuigkeiten (Themen der ForenID: x) angezeigt werde. Funktioniert derzeit einwandfrei. Nun möchte ich in der mittleren Spalte die letzten 5 neue Themen angezeigt bekommen und in der letzten Spalte die letzten 5 neuen Beiträge.

Kann mir jemand helfen?

Hitman · Sep 28th 2020

Quote from KingKaSo

Kann mir jemand helfen?

Da hat sich wohl einer schon Gedanken gemacht, da es jetzt korrekt aussieht

RainerSF · Sep 28th 2020

Quote from KingKaSo

Auf dieser Seite kannst Du dir es Live anschauen.

Sehr gelungen ...

cazz2206 · Sep 28th 2020

Quote from Hitman

Da hat sich wohl einer schon Gedanken gemacht, da es jetzt korrekt aussieht

Richtig. Ich möchte mich an dieser Stelle an Darklord bedanken. Vielen vielen Dank.

Darklord · Sep 28th 2020

Quote from KingKaSo

Richtig. Ich möchte mich an dieser Stelle an Darklord bedanken. Vielen vielen Dank.

Keine Ursache

cazz2206 · Sep 28th 2020

Quote from Darklord

Keine Ursache

Darf ich es mit deinem Einverständnis denn Code für andere zur Verfügung stellen?

Lyr1c_ · Oct 3rd 2020

Quote from KingKaSo

Darf ich es mit deinem Einverständnis denn Code für andere zur Verfügung stellen?

Das würde mich auch sehr interessieren

visuello · Nov 11th 2020

Könnte jemand eine Schritt für Schritt Anleitung zusammenfassen? Bisher habe ich 3 Postings gefunden, die den Aufbau erklären (und es sieht bei mir nicht so aus wie es sein sollte)

Wie kann ich die WoltLab Homepage emulieren?

Participate now!

Share