Different Blog-Element DIY: 3-collumn Footer

Hallo zusammen :D
Da ich nun schon einige Tuts zu einem responsive Template geschrieben habe (und mindestens noch 1 in Planung habe), dachte ich, dass es vielleicht einfacher ist, wenn ich einzelne Teile davon noch anschneide. Für all diejenige, die mithilfe meiner Tuts selbst was machen wollen, also ein kleiner Guide zu den einzelnen "Bausteinen" und dann könnt ihr einfach nur zusammensetzen was ihr haben wollt.
Da wir ja alle faule Menschen sind und einen Code, den wir schon einmal geschrieben haben, nicht noch einmal schreiben wollen (wozu auch?) sind wir(/ich) ganz euphorische Copy-Paste-Nutzer.
Ich geh also immer wieder zu meinen einzelnen Tuts zurück und kopiere munter einzelne Schnipsel. Den 3-Spalten-Footer ist dabei einer meiner Favoriten, weil er "klassisch" ist und einfach mehr Möglichkeiten bietet, platzsparend Gadgets zu platzieren. Vor allem da die meisten Gadgets für eine Sidebar konzipiert sind, folglich also keine ganze Blogbreite für sich alleine beanstpruchen.

Hi there :D
Since I've written already quite a few posts about responsive templates (and planning at least 1 more), I thought about writing about specific parts of it. Because we are all lazy human beings (at least I am) and just prefer to copy paste a code if it's written once, I thought giving you those "puzzle pieces" might be very helpful with putting your own template together.

I'm gonna start with a 3-column footer, which is "classy" and really useful since widgets are mostly built to fit into a sidebar and do not need the full widthe of a sidebar.



Okay, jetzt hab ich eine ganze Weile gelabert, gehen wir zum Code über.
Wie immer verwende ich five, welches ich in meinen Testblog einfüge.
Der Ästhetik wegen habe ich Bootstrap eingebunden und dem ganzen Blog eine Breite von 80% gegeben.

Okay, let's start with the code.
As always I use five which I added into my testblog. I did add some style by pasting Bootstrap CSS into ist and gave my blog a width of 80%.



Der HTML-Code wird euch aus der Spalten-Startseite bekannt sein, es ist genau das selbe. Der Unterschied liegt allein darin, dass diesmal einzelne Gadget-Sections in ihnen liegen, also Gadgets eingefügt werden können.

You'll recognize the basic markup from my column home page style, because it's exactly the same princible. The only difference is that this time we'll add widget-sections into them.

<div id="footer" class="grid3"> 
    <div class="col">
        <b:section class='footer' id='footer1' locked='false' showaddelement='yes'>
            <!-- Footer Widgets -->
        </b:section> <!-- /.footer -->
    </div> <!-- /.col (1) -->

    <div class="col">
        <b:section class='footer' id='footer2' locked='false' showaddelement='yes'>
            <!-- Footer Widgets -->
        </b:section> <!-- /.footer -->
    </div> <!-- /.col (2) -->

    <div class="col">
        <b:section class='footer' id='footer3' locked='false' showaddelement='yes'>
            <!-- Footer Widgets -->
        </b:section> <!-- /.footer -->
    </div> <!-- /.col (3) -->
</div> <!-- /#footer -->

Diesen Code platziert ihr dann sehr wahrscheinlich unter dem Hauptinhalt, also unterhalb des Blog-Gadgets.

Und dann kommt die CSS rein, die die Spalten macht.


You'll place this code at the bottom of your page, most probably underneath the blog-widget.

And then add the following CSS to create the columns.

/* Column Style Footer
--------------------------*/ 
.col {
        float: left;
        padding-left: 3.2%;
        margin-bottom: 80px;
}

.grid3 .col {
        width: 33.3%;
}

.grid3 .col:nth-of-type(3n+1) {
        margin-left: 0;
        clear: left;
}

/* reset cols to 2-column */
@media screen and (max-width: 800px) {
        .grid3 .col {
                width: 50%;
        }

        .grid3 .col:nth-of-type(3n+1) {
                padding-left: 3.2%;
                clear: none;
        }

        .grid3 .col:nth-of-type(2n+1) {
                margin-left: 0;
                clear: left;
        }
}

/* reset cols to fullwidth */
@media screen and (max-width: 600px) {
        .col {
                width: 100% !important;
                margin-left: 0 !important;
                clear: none !important;
        }
}

Zusätzlich kann dann natürlich jede andere CSS auch auf den Footer angewendet werden. Wie das geht, werde ich hoffentlich nicht mehr erklären müssen.
In meinem Fall habe ich den Footer ebenfalls auf eine Breite von 80% gesetzt.

Und wenn wir das speichern und dann unter Layout gehen, schaut das folgendermassen aus:

Of course you can add all kinds of CSS in addition to this, but that's just the basic stuff.
In my case I added a width of 80% to the whole footer, just like I did with the blog-widget.

After you saved it, you can now go to the layout-tab and see that there are 3 collumns for your widgets.



Wir haben drei Spalten, in die wir unsere Gadgets einfügen können.

You can add your widgets into them now.



Und? Findet ihr sowas gut? Soll ich mehr dazu schreiben?

And? Do you like such posts? Should I write more of them?