Joomla Tutorials

 

Με το δυναμικό ενσωματωμένο πρότυπο του Joomla, γνωστό και ως Cassiopeia, μπορείς να κάνεις περισσότερα απ΄όσα νομίζεις . Σε αυτόν τον οδηγό, θα δημιουργήσουμε μια λεπτή και κομψή επικεφαλίδα μόνο με CSS!

Τα περισσότερα μέρη της επικεφαλίδας του Cassiopeia είναι ενθέματα, οπότε ας ξεκινήσουμε με τη δομή. Μπορείς να βρεις τις θέσεις των ενθεμάτων, αλλάζοντας από τη ρύθμιση για την εμφάνιση των θέσεων των ενθεμάτων σε “ναι” στις επιλογές προτύπου (Σύστημα-> Πρότυπα Ιστότοπου->Επιλογές στην πάνω δεξιά γωνία) και πληκτρολογώντας “tp=1” στο τέλος της διεύθυνσης url.

Δομή της επικεφαλίδας στο Cassiopeia


Οι topbar και below-top είναι θέσεις ενθεμάτων, όπου μπορείς να εισάγεις οτιδήποτε περιεχόμενο θέλεις. Χρησιμοποιούνται συχνά για τα στοιχεία επικοινωνίας (διεύθυνση, email, κινητό) μια εταιρίας ή άλλες σύντομες πληροφορίες μιας γραμμής.

Η θέση brand χρησιμοποιείται για την εμφάνιση του λογότυπου, τον τίτλο (εναλλακτικά) και το σλόγκαν όπως ορίζεται στη διαμόρφωση του προτύπου.

Οι θέσεις menu και search είναι ενθέματα που περιλαμβάνουν το γνωστό σε όλους μας μενού και το πεδίο αναζήτησης.

Η παρακάτω εικόνα δείχνει την απλοποιημένη δομή της επικεφαλίδας σε html:



Ανάλογα με την χρήση αυτών των στοιχείων η επικεφαλίδα μπορεί να καταλάβει πολύ χώρο γι’αυτό οι χρήστες συχνά ρωτούν αν είναι δυνατόν να τοποθετηθούν το λογότυπο και η πλοήγηση στην ίδια γραμμή. Η απάντηση φυσικά είναι: ναι!

Τροποποίηση της επικεφαλίδας
Έχω δοκιμάσει διάφορους τρόπους για να μορφοποιήσω την επικεφαλίδα, μερικές φορές αν χρησιμοποιούνται όλες οι θέσεις προκύπτουν παράξενα αποτελέσματα. Σε αυτόν τον σύντομο οδηγό, θα δημιουργήσω ένα css grid, όπως αυτό του κύριου μέρους της ιστοσελίδας, και θα ταξινομήσω τα διάφορα στοιχεία της κεφαλίδας μέσα στο πλέγμα. Στο τέλος, η επικεφαλίδα θα φαίνεται έτσι:

.container-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "top below" 
                         "logo logo" 
                         "nav nav";
}
.container-header .container-topbar {
    padding: .5em;
}
.container-header .container-topbar {
    grid-area: top;
}
.container-header .container-below-top {
    grid-area: below;
    justify-content: flex-end;
}
.container-header .grid-child:has(.navbar-brand) {
    grid-area: logo;
}
.container-header .container-nav {
    grid-area: nav;
}
@media (width >= 991.98px) {
    .container-header {
        grid-template-columns: 
            [full-start] minmax(0,1fr) 
            [main-start] repeat(4,minmax(0,19.875rem))
            [main-end] minmax(0,1fr)[full-end];
        grid-template-areas: ". logo nav nav nav .";
        gap: 0 1rem;
    }
    .container-header:has(.container-below-top, .container-topbar) {
        grid-template-areas: ". top top below below ." 
                             ". logo nav nav nav .";
    }
}

Αν ακόμη δεν χρησιμοποιείτε αρχείο user.css, δημιουργήστε ένα για να είστε σίγουροι ότι ο κώδικας css δεν θα αφαιρεθεί κατά την ενημέρωση του ιστότοπου.

Ξεκινάμε καθορίζοντας το πλέγμα για το container-header με μορφοποίηση (display) : grid. Ορίζουμε 2 στήλες για το πλέγμα και δίνουμε ονόματα στις διαφορετικές περιοχές, για να είναι ευκολότερη η τοποθέτηση των μερών αργότερα.
Το container-topbar τοποθετείται στη περιοχή “top” (αυτή είναι η πρώτη στήλη στην πρώτη σειρά του πλέγματος), το container-below-top τοποθετείται στην περιοχή “bellow” (δεύτερη στήλη, πρώτη γραμμή). Το λογότυπο (.container-header .grid-child:has(.navbar-brand)) τοποθετείται στη θέση “logo” που εκτείνεται σε δύο στήλες στη δεύτερη γραμμή του πλέγματος. Τέλος, το μενού και η αναζήτηση (είναι μαζί μέσα στο container-nav) τοποθετούνται στη θέση “nav” που εκτείνεται σε δύο στήλες στην τρίτη γραμμή του πλέγματος.

Πιθανόν να σκέφτεστε: τι στο καλό είναι τα .container-header .grid-child:has(.navbar-brand); Όπως μπορείτε να δείτε παραπάνω στον απλοποιημένο html κώδικα, το κοντέινερ που βρίσκεται το λογότυπο, έχει μια γενική κλάση, “grid-child” που χρησιμοποιείται επίσης και σε άλλα μέρη. Επομένως, δεν μπορούμε να τροποποιήσουμε αυτή την κλάση χωρίς παρενέργειες. Ευτυχώς, από το 2023 έχουμε τη css ψευδοκλάση :has() που μας επιτρέπει να επιλέξουμε ένα γονικό στοιχείο και να χρησιμοποιήσουμε ένα από τα παιδιά του. Με άλλα λόγια αυτό σημαίνει: παρακαλώ επιλέξτε το στοιχείο με την κλάση “grid-child” που περιέχει ένα στοιχείο με την κλάση “navbar-brand”.

Στο επόμενο κομμάτι κώδικα παρακάμπτουμε τον ορισμό για τα παράθυρα προβολής ευρύτερα από 991.98px (μετά από αυτό έχουμε την έκδοση του μενού σε κινητό). Σε μεγαλύτερες μορφοποιήσεις χρειαζόμαστε περισσότερες στήλες στο πλέγμα μας, συνολικά έξι:

grid-template-columns: 
            [full-start] minmax(0,1fr) 
            [main-start] repeat(4,minmax(0,19.875rem))
            [main-end] minmax(0,1fr)[full-end];

Τα πλέγματα μπορούν να έχουν ονοματισμένες γραμμές (συνήθως έχουν μόνο αριθμούς), παρόμοια με τις περιοχές του πλέγματος: έτσι διευκολύνεται η τοποθέτηση των στοιχείων σε αυτό. Οι ονομασίες που μπορούν να έχουν είναι named full-start, main-start, main-end και full-end. Σε αυτόν τον οδηγό οι ονομαστικές γραμμές δεν είναι σημαντικές, αλλά ο συγκεκριμένος ορισμός πλέγματος χρησιμοποιείται επίσης στο κύριο περιεχόμενο ενός ιστότοπου Cassiopeia. Επιπλέον, οι γραμμές χρησιμοποιούνται για την τοποθέτηση του περιεχομένου, της πλευρικής μπάρας (ή τις πλευρικές μπάρες) και για τη δημιουργία κοντέινερ πλήρους πλάτους. Η πρώτη και η τελευταία στήλη έχουν το ρόλο του λεγόμενου placeholder (προσωρινές θέσεις ή αλλιώς θέσεις κράτησης), έτσι ώστε τα μέρη να είναι κεντραρισμένα στην κεφαλίδα και ευθυγραμμισμένα με το περιεχόμενο της σελίδας. Ενδιάμεσα, δημιουργούμε τέσσερις ίσες στήλες.

Τώρα χρειαζόμαστε μια νέα προσέγγιση της περιοχής του πλέγματος. Αν δεν εκμεταλλευτούμε τις θέσεις topbar και below-top, τότε θα τοποθετήσουμε το λογότυπο, το μενού και την αναζήτηση ως εξής:

grid-template-areas: ". logo nav nav nav .";

Οι τελείες είναι οι θέσεις κράτησης/κενές στήλες, το λογότυπο καταλαμβάνει μία στήλη και το μενού/αναζήτηση τρεις στήλες.

Εάν το πεδίο topbar ή/και below-top υπάρχει, το τοποθετούμε πάνω από το λογότυπο και το μενού, και κάθε ένα διεκδικεί μία στήλη:

grid-template-areas: ". top top below below ." ". logo nav nav nav .";

Στο πρόγραμμα περιήγησής σας (browser) μπορείτε να δείτε πως απεικονίζεται το πλέγμα με δεξί κλικ-> inspector -> κλικ στο σύμβολο του πλέγματος. Στην επόμενη εικόνα φαίνονται τα βήματα αυτά στο Firefox:



Σε οθόνες κάτω από 992px, το πλέγμα φαίνεται έτσι:



Ενώ σε μεγαλύτερες εικόνες φαίνεται έτσι:



Με τη χρήση σύγχρονης CSS είναι δυνατό να αλλάξουμε πολλά πράγματα, χωρίς να ξανά γράψουμε τον κώδικα html του προτύπου.

Πηγές
Η ψευδοκλάση :has(): https://developer.mozilla.org/en-US/docs/Web/CSS/:has
CSS περιοχές πλέγματος: https://ishadeed.com/article/css-grid-area/                                                                                                                                                                                           Εξετάζοντας διατάξεις πλέγματος στο Firefox: https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html
Inspect CSS διατάξεις πλέγματος στο Chrome: https://developer.chrome.com/docs/devtools/css/grid

Μερικά άρθρα που δημοσιεύονται στο Joomla Community Magazine αντιπροσωπεύουν την προσωπική άποψη ή εμπειρία του αρθρογράφου στο συγκεκριμένο ζήτημα και μπορεί να μην συμβαδίζουν με την επίσημη στάση του Joomla Project.