:: ClanSphere :: Free OpenSource Clan CMS :: - Forum

Antworten: 16

Seite [1]

dodger2876

Beginner

Herkunft: Mainz
Beiträge: 10

# Thema - 06.02.2011 um 12:53 Uhr

Hi zusammen,

der BFBC2 - Clan in dem ich spiele betreibt seine Website auch mit ClanSphere.

Um die die Facebook, Twitter oder xFire Seite bekannter und leichter zugänglich zu machen würden wir die Buttons
dafür gerne auf der Seite platzieren. Idealerweise als Icons mit Link zum jeweiligen Profil als Block links oder rechts.

Wir würden das gleiche auch gerne mit einem "JOIN US" Button in einem Block machen der dann zu einem Sticky Thread
verlinkt oder einem Formular.

Wir wissen jedoch nicht wirklich wie das anzustellen ist. Kann mir hier jemand helfen?

Vielen Dank schon mal vorab.

Gruß,
Dodger

PS: war mir nicht sicher wohin der Thread gehört (hierher, Module, Design,...) Habe auch mit der Suche nichts passendes gefunden, da ich keine Ahnung habe wie ich nach dieser Frage suchen muß

Zuletzt editiert von dodger2876 am 06.02.2011 um 12:55 Uhr (1x Editiert)

Inaktiv

Swifter

Specialist

Beiträge: 1841

# Antwort: 1 - 06.02.2011 um 14:27 Uhr

Schau mal auf unserer Seite unten rechts unter dem Kalender...
Da haben ich sowas auch eingebaut

------------------

Greetz Swifter

Wenn du dich klein, nutzlos, beleidigt und depressiv fühlst, denke immer daran: Du warst einmal das schnellste und erfolgreichste Spermium deiner Gruppe!

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 2 - 06.02.2011 um 14:43 Uhr

Brauchste kein Modul für.
Kann man auch hier sehen:

http://www.h34vy-w4t3r.de/

Packste dir einfach irgendwo mit rein.

1.
2.
3.
4.
5.

1. / 2. / ...

Und halt die Klassen in deiner css zuordnen.

------------------

www.iv-gaming.de | www.iv-artwork.de

Inaktiv

dodger2876
Thread-Ersteller

Beginner

Herkunft: Mainz
Beiträge: 10

# Antwort: 3 - 07.02.2011 um 12:52 Uhr

@swifter: So hatte ich mir das auch vorgestellt

Wäre super, wenn Du einen CS-Noob erklären könntest, wie ich das umsetze.

Das könnte man doch dann für alle Arten von HTML-Content nehmen, oder? Wie z.B. einen "JOIN US" Button etc.

Ist das "No Cheat" Logo in den Bannern irgendwie geschützt oder kann man das problemlos verwenden?

@ Geekboy: Danke für den Tip! Im Header wollte ich es jetzt nicht unbedint haben.
BTW: wieso muß ich das im CSS zuordnen, ich könnte doch dann direkt einfach den Code mit IMG und Link einbauen.
Bzw. wie würde ich den das in die CSS einbinden?

Zuletzt editiert von dodger2876 am 07.02.2011 um 14:02 Uhr (3x Editiert)

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 4 - 07.02.2011 um 15:40 Uhr

@ Geekboy: Danke...

Du kannst das z.B. so machen. Musst du halt nur die Werte dafür anpassen.
Ausserdem die entsprechenden Icons dafür in den richtigen Ordner packen.

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

1. / 2. / ...

.twitter {
       background-image: url('Bilder/Header/twitter.png');
    width: 50px;
    height:    50px;
    float: left;
    margin: 33px 0 0 531px;
}
.twitter:hover {
  background-image: url('Bilder/Header/twitter2.png');
}

.youtube {
        background-image: url('Bilder/Header/youtube.png');
    width: 50px;
    height:    50px;
    float: left;
    margin: 33px 0 0 3px;
}
.youtube:hover {
  background-image: url('Bilder/Header/youtube2.png');
}

.facebook {
        background-image: url('Bilder/Header/facebook.png');
    width: 50px;
    height:    50px;
    float: left;
    margin: 33px 0 0 2px;
}
.facebook:hover {
  background-image: url('Bilder/Header/facebook2.png');
}

------------------

www.iv-gaming.de | www.iv-artwork.de

Zuletzt editiert von Tress13 am 07.02.2011 um 15:42 Uhr (2x Editiert)

Inaktiv

dodger2876
Thread-Ersteller

Beginner

Herkunft: Mainz
Beiträge: 10

# Antwort: 5 - 07.02.2011 um 15:57 Uhr

Hehe...hab das mit dem Geekboy jetzt erst geschnallt

OK, mal später ausprobieren. Kann dafür ja eine extra CSS anlegen oder besser in die Standard-CSS?

Positionen der Icons kann ich aber nicht verändern, oder? Da rechtsbündig der Clan-Text steht.

Inaktiv

Tress13

Highlander

Herkunft: Lüdenscheid
Beiträge: 3048

# Antwort: 6 - 07.02.2011 um 16:02 Uhr

Kannste in irgend eine CSS rein packen.
Mit margin richtest du die Icons aus. Das bestimmt den Abstand in folgender Reihenfolge:

33px, 0, 0, 2px = oben rechts unten links

Das float machst du so:

wenn die Icons in die rechte Spalte kommen = float: right;
wenn sie in die linke Spalte sollen = float:left;

Die Höhe (height) und die Breite (width) musst du der Icongröße anpassen.

Mit nem Link zu deiner Page ist es einfacher.

------------------

www.iv-gaming.de | www.iv-artwork.de

Zuletzt editiert von Tress13 am 07.02.2011 um 16:03 Uhr (2x Editiert)

Inaktiv

dodger2876
Thread-Ersteller

Beginner

Herkunft: Mainz
Beiträge: 10

# Antwort: 7 - 07.02.2011 um 16:12 Uhr

Mist...Session abgelaufen, Antwort weg :(

OK...von meinem CSS Grundwissen kommt mir das mit oben, rechts,... bekannt vor. Habs aber falsch interpretiert eben.

Die Clan-Seite ist www.angelsnrockets.com

Ich denke als Position (wenn im Header) wäre folgendes denkbar:
- rechts unten in die Ecke, horizontal
- rechts unten in die Ecke, vertikal
- links oben in die Ecke, horizontal

Die Icons sollten dann eben auch nicht zu groß sein

BTW: wüßtest Du auch wie die andere Idee von Swifter umsetzbar ist, könnten wir für einen "JOIN US" Button oder vll.t später mit "Paypal" gut gebrauchen

Inaktiv

Swifter

Specialist

Beiträge: 1841

# Antwort: 8 - 07.02.2011 um 17:33 Uhr

1.
2.
3.
4.
5.

1. / 2. / ...

<div class="right_nav_top">Titel</div>
            <div class="right_nav_content">
            <div align="center"><a href="Link zur VZ Gruppe" target="_blank"><img src="Link zum VZ-Logo" alt="MeinVZ" title="MeinVZ" border="0" /></a></div>
<div align="center"><a href="link zur Facebookseite" target="_blank"><img src="Link zum Facebooklogo" alt="Facebook" title="Facebook" border="0" /></a></div>
            <div align="center"><a href="Link zur XFiregruppe" target="_blank"><img src="Link zum XFirelogo" alt="XFire" title="XFire" border="0" /></a></div></div>

Das is unser Code dafür....
Du müsstest noch die Divs anpassen (right_nav_top und right_nav_content) an deine Seite und natürlich die Links einbauen, an die entsprechenden Stellen...

Das nocheat Logo kannste verwenden...

Ansonsten einfach von der Seite mal den Quelltext ansehen, dann siehste auch schon wie das ungefähr aussehen muss

------------------

Greetz Swifter

Wenn du dich klein, nutzlos, beleidigt und depressiv fühlst, denke immer daran: Du warst einmal das schnellste und erfolgreichste Spermium deiner Gruppe!

Inaktiv

capino

Rock the board

Beiträge: 44

# Antwort: 9 - 07.02.2011 um 17:56 Uhr

Ich krieg das nicht hin.

css...

.facebook {
background-image: url('images/facebook_off.png');
width: 50px;
height: 50px;
float: right;
margin-top: 10px;
}
.facebook:hover {
background-image: url('images/facebook_hover.png');
}

.xfire {
background-image: url('images/xfire_off.png');
width: 50px;
height: 50px;
float: right;
margin-top: 61px;
}
.xfire:hover {
background-image: url('images/xfire_hover.png');
}

.steam {
background-image: url('images/steam_off.png');
width: 50px;
height: 50px;
float: right;
margin-top: 112px;
}
.steam:hover {
background-image: url('images/steam_hover.png');
}

.gametracker {
background-image: url('images/gametracker_off.png');
width: 50px;
height: 50px;
float: right;
margin-top: 163px;
}
.gametracker:hover {
background-image: url('images/gametracker_hover.png');
}

Bei mir schauts dann so aus:

................................................................................ .Bild1
.........................................................................Bild2
.................................................................Bild3
.........................................................Bild4

Und den Rest schiebt es nach unten, also

......................................................................Bilder1-4

.................Header..................
...................SITE....................

Obwohl ich ja eigentlich einfach 4 Grafiken untereinander am rechten Bildrand will, also am Rand der eigentlichen Seite.
Ich hoffe, ihr versteht, was ich meine

p.s. kann es sein, dass es png gar nicht anzeigt? Wenn nicht, dann hab ich irgendwo noch nen 2. Fehler drin

Inaktiv

dodger2876
Thread-Ersteller

Beginner

Herkunft: Mainz
Beiträge: 10

# Antwort: 10 - 07.02.2011 um 18:29 Uhr

@Swifter: Danke für den Code

Hab mal die index.html analysiert und bissl herumgespielt. Jetzt sieht es so aus (mit default Template): http://d.pr/9fve

Denke das sollte so passen. Hoffe ich krieg das Clan-Template bald zum Testen.

Zuletzt editiert von dodger2876 am 07.02.2011 um 18:31 Uhr (1x Editiert)

Inaktiv

Swifter

Specialist

Beiträge: 1841

# Antwort: 11 - 07.02.2011 um 18:44 Uhr

capino:
Sind denn jeweils 2 grafiken vorhanden? die normale und die hover?

Wenn du nur die Grafiken rechts unten haben willst nimm meinen Code, dann haut das auch hin

------------------

Greetz Swifter

Wenn du dich klein, nutzlos, beleidigt und depressiv fühlst, denke immer daran: Du warst einmal das schnellste und erfolgreichste Spermium deiner Gruppe!

Inaktiv

capino

Rock the board

Beiträge: 44

# Antwort: 12 - 07.02.2011 um 20:03 Uhr

Ja, hab ne hover und ne normale Grafik. Hab mal ein Bild gemalt, wie ich mir das vorstelle, damit wir nicht aneinander vorbei reden

Inaktiv

dodger2876
Thread-Ersteller

Beginner

Herkunft: Mainz
Beiträge: 10

# Antwort: 13 - 07.02.2011 um 21:29 Uhr

Capino: woher hast Du denn die beiden Icons? Sehen nicht schlecht aus, vor allem die gleiche Größe und gleicher Style

Inaktiv

capino

Rock the board

Beiträge: 44

# Antwort: 14 - 07.02.2011 um 22:48 Uhr

Die hab ich selbst gemacht. Ich hatte halt das Problem, dass es Facebook und xfire schon gibt, aber zu gametracker hab ich nichts passendes gefunden. Also kurzerhand mal schnell an Photoshot gesetzt und gemacht ^^

Inaktiv

dodger2876
Thread-Ersteller

Beginner

Herkunft: Mainz
Beiträge: 10

# Antwort: 15 - 19.02.2011 um 20:00 Uhr

BTW: wir haben das jetzt so umgesetzt wie Swifter geschrieben hat und das auch für den JOIN US-Button genutzt...finde sieht gut aus:
www.angelsnrockets.com

Danke nochmal !!

Inaktiv

Swifter

Specialist

Beiträge: 1841

# Antwort: 16 - 19.02.2011 um 20:18 Uhr

Wenn Du nu noch das About bzw. Scriptinfo wieder einbaust, sind wir alle zufrieden

------------------

Greetz Swifter

Wenn du dich klein, nutzlos, beleidigt und depressiv fühlst, denke immer daran: Du warst einmal das schnellste und erfolgreichste Spermium deiner Gruppe!

Inaktiv

Antworten: 16

Seite [1]

Sie müssen sich registrieren, um zu antworten.

Forum - Thema
Nächstes Thema ->
Forum -> Support -> Allgemein (Support) -> Block mit Social Media Icons