Πώς να κάνετε το Slider του Prestashop πλήρους πλάτους

create a full slider in Prestashop 1

Όλοι γνωρίζουν ότι στο προεπιλεγμένο θέμα του Prestashop 1.7 το τμήμα περιεχομένου έχει σταθερό πλάτος boxed, γι ‘αυτό και το περιεχόμενο στην αρχική σελίδα όπως πχ το slider έχει και αυτό σταθερό πλάτος boxed. Κανείς μας δεν θέλει περιορισμούς στην ιστοσελίδα του ή το eshop του, γι ‘αυτό θα το κάνουμε πλήρους πλάτους.

create a full slider in Prestashop 1

Ο τρόπος βασίζεται σε style CSS. Πρέπει να εκτελέσουμε τα εξής στην αρχική σελίδα στο τμήμα περιεχομένου: για να φτιάξουμε το ίδιο πλάτος με το μπλοκ και το .container, δηλαδή το block και το .container θα πρέπει να είναι 100% σε πλάτος. Επομένως, πρέπει να ανοίξουμε το αρχείο css (για παράδειγμα, “themes / classic / assets / css / theme.css”) και να προσθέσουμε τον ακόλουθο κώδικα:

body.page-index #wrapper .container {
max-width: 100%;
width: 100%;
padding-left: 0;
padding-right: 0;
}
body.page-index #wrapper .featured-products,
body.page-index #wrapper .banner,
body.page-index #wrapper #custom-text{
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 992px) {
body.page-index #wrapper .featured-products,
body.page-index #wrapper .banner,
body.page-index #wrapper #custom-text{
max-width: 940px;
}
}
@media (min-width: 1200px) {
body.page-index #wrapper .featured-products,
body.page-index #wrapper .banner,
body.page-index #wrapper #custom-text{
max-width: 1140px;
}
}
@media (max-width: 991px) {
body.page-index #wrapper .featured-products,
body.page-index #wrapper .banner,
body.page-index #wrapper #custom-text{
max-width: 100%;
}
}

Το αποτέλεσμα; Έχουμε ένα slider πλήρους πλάτους!!!

create a full image slider in Prestashop 1

Αφήστε ένα Σχόλιο

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *