Προσθήκη Social Network Icons

Γεια σου @BitcoinHellas,

Αρχικά πας:
Πίνακας Διαχείρισης > Λειτουργικές Μονάδες > Portal & Widgets > Widgets του φόρουμ και θα δημιουργήσεις ένα νέο widget όπου μέσα εκεί θα προσθέσεις τους σύνδεσμους των Social Media της σελίδας σου και θα τα τροποποιήσεις με CSS.
Δηλαδή:
Για το Facebook:
Θα βάλεις παραδείγματι αυτό:

Κώδικας:

<a title="Facebook" target="_blank" href="LINK HERE" class="facebookButton"> </a>

όπου:
- title="Facebook" : είναι το κείμενο που θες να βγάζει όταν περνάς το ποντίκι σου πάνω από τον σύνδεσμο
- target="_blank" : σου ανοίγει τον σύνδεσμο σε νέο παράθυρο
- href="LINK HERE" : εδώ αντικαθιστάς το LINK HERE με τον σύνδεσμο που θες
- class="facebookButton" : με βάση αυτό το κομμάτι οποιαδήποτε αλλαγή σχεδιαστική κάνεις στο CSS σου με την εντολή .facebookButton { ... } θα αλλάξει εμφανισιακά

Αναλόγως κάνεις την ίδια διαδικασία για όλα τα κουμπιά των Social Media που θες απλά θα αλλάζεις το title και το class για να αλλάξεις την εμφάνιση των κουμπιών.

Καλησπέρα Luffy,

έγραψα αυτό



αλλά δε μου εμφανίζει το button στο forum.Έκανα κάτι λάθος?

BitcoinHellas έγραψε:Καλησπέρα Luffy,

έγραψα αυτό



αλλά δε μου εμφανίζει το button στο forum.Έκανα κάτι λάθος?

Καλησπέρα @BitcoinHellas,

Όχι, δεν έκανες κάτι λάθος. Πρέπει να προσθέσεις μία εικόνα με την ανάλογη εντολή CSS που σου είπα προκειμένου να εμφανίσει κάτι. Έτσι όπως το πέρασες, πέρασες έναν σύνδεσμο απλά και δεν βρίσκει κάποια εικόνα να στην εμφανίσει. Δοκίμασε να βάλεις στο CSS σου την εντολή και να της προσθέσεις μια εικόνα και θα στο εμφανίσει κανονικά.

Επειδή δεν γνωρίζω απ' αυτά, μπορείς να μου πεις πως ακριβώς να το κάνω αυτό στο CSS και τι εντολή πρέπει να γράψω?

BitcoinHellas έγραψε:Επειδή δεν γνωρίζω απ' αυτά, μπορείς να μου πεις πως ακριβώς να το κάνω αυτό στο CSS και τι εντολή πρέπει να γράψω?

Με βάση τον κώδικα που πρόσθεσες, η κλάση που όρισες είναι .facebookButton οπότε παίρνεις αυτή την κλάση και ορίζεις εικόνες και στυλιστικά στο CSS.
Δηλαδή:

Κώδικας:

.facebookButton {
    background: url(http://i21.servimg.com/u/f21/19/06/26/04/facebo11.png) no-repeat #ADADAD; /*H εικόνα με το χρώμα (#ADADAD) */
    border-radius: 3px; /*Οι γωνίες στο κουμπί που σχηματίζονται*/
    display: inline-block; /*Η κεντρική στοίχιση*/
    margin: 3px; /*Η μετατόπιση κατά 3 pixel του περιεχομένου*/
    transition: 250ms; /*Ομαλή εμφάνιση απόκριψη ανά δευτερόλεπτο*/
    padding: 5px; /*Πρόσθετη απόσταση εσωτερικά ανα pixel*/
}
.facebookButton:hover { /*Αυτή η εντολή περιέχει το ":hover" όπου είναι όταν περάσεις το ποντίκι σου πάνω από την εντολή σου*/
  background: url(http://i21.servimg.com/u/f21/19/06/26/04/facebo11.png) no-repeat blue; /* Αλλάζει το χρώμα σε μπλε*/
  transition: 250ms;
}

Σ' ευχαριστώ πολύ.Θα το δοκιμάσω.Μπορώ να το κάνω και φτιάχνοντας ένα widget με εικόνα και βάζοντας από πίσω τον σύνδεσμο της σελίδας στο Facebook.Μπορείς να κλειδώσεις το θέμα.

Πολύ καλά.

To θέμα λύθηκε, κλειδώθηκε και μεταφέρεται στο αρχείο.