Social Buttons in den Footer "Kopfzeile" Bereich. Wie?

[withoutatrac3]

Hallo.

Könnte mir jemand erklären, wie ich den Facebook-Knopf, Google+1-Knopf und Twitter-Knopf in dem Bereich integrieren kann, wo die Markierung auf dem Screenshot (Link darunter) ist?
Sie sollten alle schön nebeneinander sein. Dabei wäre es evtl. besser, wenn nur der "Gefällt mir" Knopf integriert wird und nicht auch noch "Mir,...und 39 weiteren Personen gefällt das.
Und wenn doch, dann ohne Userpics vielleicht.
Noch besser würde ich es aber finden, wenn sie als Symbole auf der linken Seite der Homepage integriert sind, wie man es von vielen anderen Homepages kennt.
Allerdings habe ich für mein Contao 3.0.3 leider keine solche Socialbar Erweiterung gefunden.



Was sagt Ihr?

Mein erster Gedanke wäre, einen "Footer-Eigenen HTML Code" zu erstellen und zwar in der Kopfzeile.
Aber wie müsste dann der Code aussehen?
Wie aber bereits geschrieben, wäre es mir auf der linken Seite der Homepage lieber.

Bitte um Hilfe und danke im Voraus

Gleich vorweg..Bitte Schritt für Schritt

Gruß

[stefan-at-work]

Das bringt Contao doch von Haus aus mit. Beim Anlegen eines Artikels kannst Du doch beim Punkt "Syndikation" entscheiden, welcher Social-Button erscheinen soll. Platzierung dann per CSS.

[withoutatrac3]

Das bringt Contao doch von Haus aus mit. Beim Anlegen eines Artikels kannst Du doch beim Punkt "Syndikation" entscheiden, welcher Social-Button erscheinen soll. Platzierung dann per CSS.

Das war mir bekannt und das hab ich auch auf mehreren Seiten so eingerichtet, nur eben ohne CSS.
Allerdings habe ich nicht das nötige KnowHow mit CSS, bzw. ich weis nicht, wie ich diese Buttons an die Stellen bringe, wo ich sie gerne hätte (Entweder ganz oben im header Bereich oder noch besser auf der linken Seite der Homepage).

Kannst Du mir sagen, wie ich das bewerkstellige?

[stefan-at-work]

Firebug ist Dein Freund. Installiere mal dieses Add-On und untersuche mal die jetzige CSS-Anweisung für die Buttons. Dann weist Du im Regefall
1. in welchem Stylesheet diese definiert sind
2. die Parameter die zu modifizieren sind.

Es sei denn, Du kennst Dich mit CSS so gar nicht aus dann wirds Zeit sich mit diesem Thema zu beschäftigen.
Gibt es einen Link, wo man sich das anschauen kann?

[withoutatrac3]

Firebug wäre installiert, nur habe ich mit CSS noch gar nichts am Hut..

Ich werde mich aber auf jedenfall informieren und da einlernen...
In der Zwischenzeit wäre ich überaus dankbar, wenn man mir da ein bischen unter die Arme greifen könnte für dieses eine Vorhaben

Hier der Link:
http://www.hchuskies.com

[stefan-at-work]

Dann definiere und veröffentliche doch bitte im Artikel "Willkommen auf der Homepage des HC Huskies" mal bei Syndication" die Buttons die Du möchtest.

[withoutatrac3]

Habe ich soeben gemacht...

[stefan-at-work]

.pdf_link {
    left: 25px;
    position: absolute;
    margin-top: 0px;
    font-size: 11px;
}

Anschließend evt. noch das margin-top bei h1 auf 1em erhöhen

[derRenner]

Hallo,

ich denke, dass die Social-Media-Buttons der Syndikation nur dem erstellten Artikel selbst "angehören".
Die Buttons, die du jetzt auf deiner rechten Spalte stehen hast, und die du verschieben möchtest, dürften Erweiterungen sein, die sich auf die aktuell angezeigte Site beziehen, in deinem Fall auf die index.php.

Wenn du diese Erweiterungen aus der rechten Spalte in den Header verschieben möchtest, müsstest du die Module dazu im Header anzeigen lassen und sie aus der 'rechten Spalte' raus nehmen.
(im Seitenlayout unter 'Eingebundene Module' die entsprechenden Module unter 'Spalte' die Auswahl auf 'Kopfzeile' setzen)
Dann kannst du sie mit CSS noch ein wenig dorthin plazieren, wo du sie haben möchtest ... dazu benötigst du aber dringend CSS-Kenntnisse

[withoutatrac3]

Ich bin nun so vorgegangen:

1. Unter Themes navigiert
2. Die Stylesheets des Theme ID 1 bearbeiten
3. "Welcome" ausgewählt bzw. auf bearbeiten geklickt
4. Neue Formatdefinition ganz oben eingefügt
5. Alle Einstellungen so belassen wie sie waren aber unten bei "Eigener Code" da habe ich deinen Code eingefügt
6. Speichern und Veröffentlichen gedrückt

Allerdings sehe ich da jetzt keine Veränderung.
Die Homeseite, also da wo "Willkommen auf der Homepage des HC Huskies steht" der habe ich das Seitenlayout "Welcome" zugeordnet..

@Der Renner:

Ja, dabei handelt es sich um Erweiterungen...

Diese Social-Media-Buttons hatte ich schonmal im Header drinnen, nur waren die genau dort, wo mein logo ist und das ist nicht optimal
Leider habe ich wie Du bereits gelesen hast keine CSS Kenntnisse, daher wusste ich nicht, wie ich die Social-Media-Buttons vom Logo wegbekomme und irgendwo anders im header platzieren kann...

Sollte ich etwa so vorgehen:

1. Bei all meinen Seitenlayouts ein neues Modul hinzufügen "Layout Footer - Eigener HTML Code" und da den von Dir erzeugten Code einfügen?
2. Anschließend dieses Modul in der Kopfzeile darstellen lassen

[stefan-at-work]

die Klasse .pdf_link gibt es bereits!!! Diese dürftest Du in Deinem Theme unter dem Stylsheet "content" finden. Diese Klasse musst Du dann entsprechend modifizieren. Nimm bitte Deine Anwiesung im Stylesheet "Welcome" wieder raus. Hier sind lediglich spezielle Anweisungen für die Startseite definiert.

P.S. Buchempfehlung: Little Boxes von Peter

[stefan-at-work]

ich denke, dass die Social-Media-Buttons der Syndikation nur dem erstellten Artikel selbst "angehören".
Die Buttons, die du jetzt auf deiner rechten Spalte stehen hast, und die du verschieben möchtest, dürften Erweiterungen sein, die sich auf die aktuell angezeigte Site beziehen, in deinem Fall auf die index.php.)

Macht auf der Startseite über Syndikation ja aber auf jeden Fall Sinn, da das Ergebnis, das gleiche ist, das ganze aber für withoutatrac3 einfacher zu bewerkstelligen ist

[withoutatrac3]

Nun sind die Buttons auf der linken Seite und immer noch unter der Navigationsleiste, aber ich wollte sie ja oberhalb der "Login" und "Registrieren" Buttons haben (So wie es auf dem screenshot zu sehen ist)

[derRenner]

Macht auf der Startseite über Syndikation ja aber auf jeden Fall Sinn, da das Ergebnis, das gleiche ist, das ganze aber für withoutatrac3 einfacher zu bewerkstelligen ist

OK, klingt überzeugend ...

um die Buttons oben, rechts zu plazieren kannst du deine Daten wie folgt abändern:

.pdf_link {
right: -280px;
top: -55px;
position: absolute;
margin-top: 0;
font-size: 11px;
}

bei den Werten für right und top kannst du ja dann selbst ein wenig schrauben - damit du die nach deinen Wünschen plazieren kannst

[withoutatrac3]

Perfekt! Nun hats funktioniert danke euch beiden!
Allerdings werden diese Buttons ja nur auf der Home Seite angezeigt.
Wie muss ich vorgehen, damit diese Buttons immer angezeigt werden?

Das sind die Stylesheets des Templates, welches ich gekauft habe und welches ich auch verwende:

• basic
• content
• events
• form
• info
• layout
• modules
• navigation
• welcome

Muss ich dazu diesen Code:

.pdf_link {
right: -280px;
top: -55px;
position: absolute;
margin-top: 0;
font-size: 11px;
}

in all diesen Stylesheets einfügen mit Ausnahme des Stylesheets "Content" natürlich, weil ich es da ja schon modifiziert habe?
Wenn ja, macht es einen Unterschied, an welcher Position dieser Code dann steht in der Liste der Formatdefinitionen? Wenn ja, an welche Stelle muss der Code?

Nur so nebenbei noch zu wissen...Könnte man diesen Buttons oben (Sind ja nicht die Buttons der 3 Erweiterungen, die ich installiert habe "Facebook Knopf, Google+1 Knopf, Twitter Knopf) einen Counter anhängen, so wie es bei meinen Buttons dieser Erweiterungen in der rechten Spalte der Homeseite ober "Unsere Sponsoren" der Fall ist? Also nur, wieviele Leute schon geliked haben, nicht wer alles geliked hat (Userpics), damits nicht zu viel wird...

[derRenner]

jetzt muss ich ein klein wenig in mich reinschmunzeln ... das ist das, was ich in meinem ersten post oben gemeint habe ... die Buttons der Syndikation sind nur die Buttons, die einem Artikel angehören und nicht einer aktuellen Seite. Nun ja ...
Noch dazu hat diese Lösung mit der .pdf_link den Nachteil, dass nun ALLE Artikel, bei denen du die Syndikation anhakst, die gleichen Koordinaten bekommen, wie du sie soeben deklariert hast. Also wenn du nun z.B. zwei Artikel (an einer anderen Seite) untereinander stehen hast und die Syndikation dazu angehakt hast, erscheinen die ersten Buttons evtl. noch oben im Header aber die vom zweiten Artikel erscheinen dann schon "irgendwo" auf der Seite - also dort, wo es die Koordinaten der CSS-Anweisung eben sagen.

Du musst also schauen, dass du die Erweiterungen, die Module der Erweiterungen in die Kopfzeile bekommst - und von dort aus dann die Position via CSS festlegen.
Damit könntest du, wie von dir jetzt gewünscht, auch die Buttons in allen anderen Seiten mit dem gleichen verwendeten Layout, darstellen.

[withoutatrac3]

Verstehe

Wie gesagt, die 3 Buttons der Erweiterungen hatte ich bereits im header nur eben dort wo mein Logo ist...

Wenn ich sie wieder in den header einbette, wie kann ich dort jetzt die Position via CSS festlegen?
Wo muss ich da hinnavigieren usw.?

[derRenner]

probier mal wie folgt:

die drei Erweiterungen fügst du in die Kopfzeile ein.
Nun erstellst du neue CSS-Anweisungen mit den Klassen
.googleplus1
.twitter
.mod_fblikeit_xfbml
und je Klasse fügst du folgendes hinzu:
position:absolute;
top: 50px;
left: 900px;

wobei sich die Koordinaten top und left von dir selbst ergänzt werden müssen (sind hier nur ein Beispiel), je nachdem wo du sie stehen haben möchtest - probier einfach ein wenig herum, dann siehst du auch gleich, was hier bewirkt wird.
Die Werte für 'left' müssen sich aber immer um die Breite der Buttons vergrössern - vergibst du bei allen drei die gleiche left-Wert stehen die Buttons übereinander!

Noch ein Tipp: wenn du einen Modultyp 'Facebook "Gefällt mir" (like)' auswählst anstatt dem 'Facebook "Gefällt mir" (like) XFBML' steht dann nur der Button dort (so wie du das in deinem ersten post wolltest). Dann musst du aber auch die Klasse .mod_fblikeit (ohne dem '_xfmbl') ansprechen.

[withoutatrac3]

Auf der Home Seite hab ichs jetzt hinbekommen.

Nun möchte ich das allerdings auf alle anderen Seitenlayouts übernehmen.
Dazu habe ich z.B. bei meinem Seitenlayout "News" die 3 Erweiterungen in die Kopfzeile gesetzt.

Irgendwie finde ich aber das Verzeichnis nicht, wo ich da wieder mit CSS nachhelfen möchte, damit die an der gleichen Position sind wie die Erweiterungen auf der Home Seite

EDIT:

Ist es möglich den "Google+1 Button" auf die gleiche Größe zu reduzieren wie die "Gefällt mir" und "Twitter" - Buttons ?

[derRenner]

Ist es möglich den "Google+1 Button" auf die gleiche Größe zu reduzieren wie die "Gefällt mir" und "Twitter" - Buttons ?

Hallo,

probier mal in den Moduleinstellungen 'Grösse' (Grösse des Knopfes) die 4 Möglichkeiten (Klein, Mittel, Standard, Gross) aus ...

[withoutatrac3]

Hallo...

Danke, werd ich gleich :-)

Und wie bringe ich die Buttons auf alle anderen Seiten (News, Der Verein, usw.)?

Ich weis nicht genau, wo ich neue Definitionen erstellen muss. Ich habe ein Template gekauft damals mit vorinstallierten Seiten. Usw.

[derRenner]

Ich kann nicht sagen, welches stylesheet du verwenden musst, aber ich vermute mal im 'layout' könnte schon das Richtige sein.
Wenn dieses dann über alle Layouts übergreift, kannst du evtl. die drei klassen aus dem welcome-stylesheet wieder raus nehmen (wär sonst doppeltgemobbelt)

[withoutatrac3]

Ich habe die originalen Stylesheets meist so belassen wie sie sind und habe manche kopiert und bearbeitet (Umbenannt, Andere Module, usw.).
Diese Stylesheets habe ich dann bestimmten Seiten zugeordnet.

Wenn ich aber nun unter der Sektion "Stylesheets" bin, sehe ich natürlich nur die originalen Stylesheets aber nicht die, die ich selbst erstellt habe.
Wie kann ich dort bei "Stylesheets" meine eigenen Stylesheets (die, die ich erstellt habe) einfügen bzw. erstellen und mit meinen Stylesheets "verknüpfen" damit ich dort diese 3 Erweiterungen abspeichern kann?

Wenn ich unter "Stylesheets" ein neues Stylesheet mit dem Namen "news" ("News" ist ein von mir erstelltes Seitenlayout) anlege und als Medientyp "Alle" oder "screen" auswähle, dann hat das keine Auswirkungen auf das Frontend (Ich habe der best. Seite das Seitenlayout "News" zugeordnet)