Υ.Γ. Είναι ελαφρύ, γραμμένο με καθαρό CSS και κανένα Script. Αλλά δεν θα το βλέπουν μόνο από ΙΕ 9 και παλαιές εκδόσεις δεν θα το βλέπουν.

Παραδείγματα:

1.

Πίνακας Διαχείρισης Εμφάνιση Αρχική σελίδα | Δομή και ιεραρχία Split categories on index : Medium

2. Στο πρότυπο index_box (Home page : categories list) προσθέστε το

Κώδικας:

<div class="contcolor">

πριν το

Κώδικας:

<div class="main-head">

και ένα

Κώδικας:

</div>

πριν το

Κώδικας:

<!-- END tablefoot -->

Πατήστε υποβολή και δημοσιεύστε το πρότυπο.

3. Στο CSS βάζουμε το παρακάτω:

Κώδικας:

    .main .contcolor:nth-child(1) {
    background: transparent url('http://i44.servimg.com/u/f44/16/54/26/99/russia10.png') top left repeat-x;
    padding-top: 50px;
    }
    .main .contcolor:nth-child(1) .tcl, .main .contcolor:nth-child(1) .tc2,  .main .contcolor:nth-child(1) .tc3, .main .contcolor:nth-child(1) .tcr {
    background-color: #BC8F8F;
    border-color: #A27B7B;
    }

.main .contcolor:nth-child(1) - είναι κοντέινερ πρώτη κατηγορίας, το φόντο οποίου θα είναι ορατό πάνω από τον τίτλο
background: transparent url('https://i.servimg.com/u/f44/16/54/26/99/russia10.png') top left repeat-x;	Η ίδια η εικόνα. repeat-x - αλληλεπικάλυψη (διπλό αντίγραφο) της εικόνας οριζόντια, αν χρειάζεστε μη αλληλεπικάλυψη της εικόνας - αντικαταστήστε repeat-x με no-repeat top left - ευθυγράμμιση με το αριστερό άκρο, αν θέλετε sτο κέντρο - πρέπει να αντικαταστήσετε με το top center
padding-top: 50px	εσοχή στην κορυφή, θα πρέπει να είναι ίση με το ύψος της εικόνας
.main .contcolor:nth-child(1) .tcl, .main .contcolor:nth-child(1) .tc2, .main .contcolor:nth-child(1) .tc3, .main .contcolor:nth-child(1) .tcr - αυτά είναι όλα τα κελιά της πρώτης κατηγορίας τα οποία θα ξαναβαφτούνε
background-color: #BC8F8F; border-color: #A27B7B;	χρώμα φόντου χρώμα γραμμών

Για τη δεύτερη κατηγορία, προσθέστε μια δεύτερη σειρά των ρυθμίσεων, αλλάζοντας τα χρώματα, την εικόνα πάνω από την κατηγορία και τον αριθμό της κατηγορίας

Κώδικας:

.main .contcolor:nth-child(2) {
    background: transparent url('http://i44.servimg.com/u/f44/16/54/26/99/united10.png') top left repeat-x;
    padding-top: 50px;
    }
    .main .contcolor:nth-child(2) .tcl, .main .contcolor:nth-child(2) .tc2, .main .contcolor:nth-child(2) .tc3, .main .contcolor:nth-child(2) .tcr {
    background-color: #D4FF91;
    border-color: #9ACD32;
    }

Ομοίως, προσθέστε τις ρυθμίσεις για την τρίτη:

Κώδικας:

.main .contcolor:nth-child(3) {
    background: transparent url('http://i44.servimg.com/u/f44/16/54/26/99/nether10.png') top left repeat-x;
    padding-top: 50px;
    }
    .main .contcolor:nth-child(3) .tcl, .main .contcolor:nth-child(3) .tc2, .main .contcolor:nth-child(3) .tc3, .main .contcolor:nth-child(3) .tcr {
    background-color: #FFCF78;
    border-color: #DAA520;
    }

και ούτω κάθε εξής...