22Ιαν

Μερικά CSS tricks για το WordPress!

, 22 Ιανουαρίου 2009 | WORDPRESS | 3 Σχόλια

Το WordPress δυστυχώς υστερεί στο CSS του όταν πρόκειται για μερικά όχι και τόσο σημαντικά στοιχεία για τους απλούς χρήστες αλλά σημαντικά για αυτούς που θέλουν να το πάνε λίγο ποίο πέρα.

Αφήνοντας κενά

Εάν χρησιμοποιείτε τον Rich editor του WordPress για να γράφετε θα παρατηρήσετε, πως ακόμη και να πατήσετε αρκετές φορές το enter, το κενό που θα δημιουργηθεί όταν θα δημοσιεύσετε το άρθρο σας, δεν θα έχει, καμία σχέση με αυτό που πραγματικά θέλετε.

Αυτό που μπορείτε να κάνετε είναι ένα πολύ μικρό, CSS hack

p {
margin-bottom: 1.4em;
}

Με αυτό τον τρόπο, αυξάνετε το κενό που δημιουργείται κατά 1.4em. Εάν θέλετε, μπορείτε να αλλάξετε τις διαστάσεις με κάτι της προτίμησης σας.

Top Margin

Ακόμη ένα θέμα το οποίο μπορείτε να διακρίνεται είναι πως οι browsers έχουν από μόνοι τους 0 top margin. Έτσι το design σας θα «κολλήσει» ψηλά στην οθόνη σας. Η λύση είναι η παρακάτω:

*{
margin:0;
padding:0;
}

Όπου ο αστερίσκος χρησιμοποιείτε για να αλλάξει τις τιμές του browses σας σε padding και margin

Centre Layout

Όταν σχεδιάζετε το layout σας, θέλετε να το φέρετε στο κέντρο της οθόνης, αφού το layout σας έχει συγκεκριμένες διαστάσεις. Αυτό που έχετε να κάνετε είναι να χρησιμοποιήσετε το παρακάτω CSS styling για να το καταφέρεται.

#wrapper {
margin:0 auto;
}

Τελειώνοντας το άρθρο μας θα σας παρουσιάσουμε και κάτι που λείπει από τα περισσότερα CSS files των templates που βρίσκονται διαθέσιμα

img.wp-smiley{
border:none;
}

Ο παραπάνω κώδικας σας δίνει την δυνατότητα να αφαιρέσετε ένα border που δημιουργείται στα image icons που χρησιμοποιείτε στα Blog Post σας!

Happy WordPress CSSing!

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Μερικά CSS tricks για το WordPress! γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

3 comments so far

  • Τόλης Says: Ιανουάριος 22, 2009 at 1:09 μμ

    Η λύση του
    *{
    margin:0;
    padding:0;
    }

    Δεν είναι σωστή…Θα επιβαρύνει πολύ τον browser..

    Καλύτερα να χρησιμοποιηθεί κάποιο από τα reset css που κυκλοφορούν.

    Απάντηση
  • user Says: Ιανουάριος 24, 2009 at 3:27 μμ

    Όπως το BluePrint CSS Framework.

    Απάντηση
  • Boog Says: Ιούνιος 26, 2011 at 1:41 μμ

    What a neat article. I had no inkinlg.

    Απάντηση

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter