Ελλάδα
801-1136624

Επεξεργασία εικονιδίων carousel
Icon Printer



Ετοιμάστε μερικά εικονίδια

Μπορείτε είτε να δημιουργήσετε τα δικά σας εικονίδια, είτε να κατεβάσετε από κάποιο από τα πολλά sites που παρέχουν online, δωρεάν εικονίδια. Κάντε μια αναζήτηση στο Google με τον όρο 'free icons'.

Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε ορισμένα δωρεάν εικονίδια από το site: http://wefunction.com/2008/07/function-free-icon-set

 

Μέγεθος και τύπος αρχείου εικονιδίου

Θα πρέπει να αλλάζετε τη διάσταση των εικονιδίων, στην κατάλληλη πριν τα εισάγετε στο Website Builder. Ένα ιδανικό μέγεθος είναι περίπου στα 48 pixels. Θα πρέπει να αποθηκεύετε τα εικονίδια σας σε PNG αρχείο.

 

Παραδείγματα εικονιδίων

Μπορείτε να κατεβάσετε το σχετικό αρχείο με εικονίδια που θα βρείτε στη σελίδα http://wefunction.com/2008/07/function-free-icon-set

Στο συγκεκριμένο παράδειγμα επιλέξαμε να χρησιμοποιήσουμε τα αρχεία:
'arrow-left-green' και 'arrow-right-green'


 

Εισάγετε τα εικονίδια στο WebSite Builder



Πατήστε στην ετικέτα MEDIA (1) και στη συνέχεια στο ΠΡΟΣΘΗΚΗ (2). Επιλέξτε και "ανεβάστε" τα 2 εικονίδια


 

Προσθήκη carousel widget στη σελίδα σας



 

Πατήστε στο εικονίδιο επεξεργασίας


Κάντε κλικ στο εικονίδιο επεξεργασίας


 

Πατήστε πάνω στην ετικέτα CSS


Κάντε κλικ πάνω στην ετικέτα CSS (1) και εντοπίστε τις 2 γραμμές CSS που σχετίζονται με τα κουμπιά


 

Edit the CSS


Το εικονίδιο στα αριστερά (1) και το εικονίδιο στα δεξιά (2) χρειάζονται την προσθήκη ακόμα μίας σειράς CSS.

Προσθέστε μια νέα σειρά μετά το πρώτο '{'

Επικολλήστε το background-image:url('URL-EIKONAS-EDO')

Αντικαταστήστε το URL-EIKONAS-EDO με το URL για το εικονίδιο στα αριστεράτο οποίο αντιγράψατε προηγουμένως. Σημείωση: το URL θα πρέπει να είναι ανάμεσα σε μονά εισαγωγικά ( ' ).

Επαναλάβετε τη διαδικασία και για το εικονίδιο δεξιά.

Αποθηκεύστε το CSS (3)

Το ολοκληρωμένο CSS θα πρέπει να εμφανίζεται έτσι:

.widget-carousel-previous
{
background-image:url('URL-EIKONAS-EDO')
}

.widget-carousel-next
{
background-image:url('URL-EIKONAS-EDO')
}


 

Αντιγράψτε τα URLs των εικονιδίων


Ανανεώστε τη σελίδα στο browser που χρησιμοποιείτε (πατήστε στο πληκτρολόγιο F5 για Windows ή Cmd-r για Mac).Πατήστε στην ετικέτα ΕΙΚΟΝΕΣ (1) και στη συνέχεια κάντε κλικ στο εικονίδιο "i". Ίσως χρειαστεί μερικές ανανεώσεις για να εμφανιστεί το URL. Αντιγράψτε και επικολλήστε το URL (2) σε έναν editor κειμένου όπως το Notepad (Win) ή TextEdit (Mac).

φΤο URL θα πρέπει να εμφανίζεται κάπως έτσι:

ttp://www.websitestool.com/files/writeable/uploads/papaki186/image/arrow_left_green_48.png

Σημείωση: Είναι πολύ εύκολο να λείπει κάποιος χαρακτήρας από την αρχή ή το τέλος του URL κατά την αντιγραφή επικόλληση. Βεβαιωθείτε ότι το URL σας ξεκινά με 'http' και τελειώνει σε '.png'

Επαναλάβετε αυτή τη διαδικασία και για το άλλο εικονίδιο.


 

Τα νέα εικονίδια θα εμφανιστούν μετά την Αποθήκευση των Ρυθμίσεων



Εάν τα νέα εικονίδια δεν εμφανιστούν θα πρέπει να τσεκάρετε ότι το CSS σας είναι ίδιο με το παραπάνω παράδειγμα.

Συνηθισμένα λάθη είναι:

Να λείπουν τα μονά εισαγωγικά ( ' ) από τα URL
Να λείπει κάτι από το URL
Να υπάρχουν κενά στην αρχή ή το τέλος του URL
Να έχει διαγραφει καταλάθος κάποια παρένθεση { ή }

 


 
Σχόλια Comments
Δεν υπάρχουν σχόλια σε αυτό το άρθρο. Γράψε πρώτος ένα σχόλιο.
ajax-loader.gif