/* Theme Name: OceanWp Child Description: Theme enfant de OceanWP Author: Rouergue Création Author URI: https://rouerguecreation.fr/ Template: oceanwp Version: 1.0.0 */ /****************************************************************************************************************************** 1) BOUTIQUE OCEANWP 2) FICHE PRODUIT OCEANWP 3) PAGE CATÉGORIE OCEANWP 4) PAGE PANIER 5) PAGE COMMANDE 6) PAGE SUIVI DE COMMANDE 7) PAGE MON COMPTE 8) TEMPLATE ELEMENTOR POUR WOOCOMMERCE 9) HEADER 9.1) PANIER MENU 10)FOOTER WIDGET 11)FOOTER COPYRIGHT 12)PAGE CONTACT 12.1)MODIF FORMULAIRE NINJA FORM 13)CORRECTION BUG THEME ******************************************************************************************************************************/ /* inversion de colonnes pour une page avec un bloc 2 colonnes éditée sous gutenberg: Cliquer sur l’icône Bloc Navigation puis sur le container des colonnes afin de sélectionner le container des colonnes puis dans les paramétres avancé du bloc entrez la classe: inverser-colonnes */ @media only screen and (max-width : 599px) { .inverser-colonnes{ display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; /* marge basse du container des colonnes */ margin-bottom:0!important; } } /* marge basse d'une colonne avec image */ .colonne-image{margin-bottom:30px!important;} /* marge basse d'une colonne avec texte */ .colonne-texte{margin-bottom:30px!important;} /***********************************************************************************************/ /* WOOCOMMERCE */ /***********************************************************************************************/ /*-------------------------------------------------------------------------- BOUTIQUE OCEANWP ---------------------------------------------------------------------------*/ /* ------------On customise les fiches produits pour pc & tablette & mobile(régles a enlever avec Template elementor)----------*/ /* on met sous forme de boite la fiche produit .woocommerce ul.products li.product .woo-entry-inner { box-shadow: 1px 1px 6px 1px rgba(0,0,0,0.5); border-radius: 8px; }*/ /* Ipad pro & PC @media screen and (min-width:1024px) { .woocommerce ul.products li.product .woo-entry-inner { padding: 30px 30px 30px 30px; } }*/ /* tablette en mode portrait @media screen and (min-width:768px) and (max-width:1023px) { .woocommerce ul.products li.product .woo-entry-inner { padding: 20px 20px 20px 20px; } }*/ /* mobile large et petite tablette en mode portrait + mobile en mode paysage @media screen and (min-width:481px) and (max-width:767px) { .woocommerce ul.products li.product .woo-entry-inner { padding: 20px 20px 20px 20px; width:60%; display:block!important; margin:auto!important; } }*/ /* mobile en mode portrait @media screen and (max-width:480px) { .woocommerce ul.products li.product .woo-entry-inner { padding: 20px 20px 20px 20px; } }*/ /*Pour les tablettes & PC Alignement des fiches produits avec les prix qui sont au même niveau. le décalage est dû au fait que certains titres sont sur une ligne, d’autres sur deux. Pour y palier on met une hauteur au container du titre de 48px. mais de préférence éviter les titres sur deux lignes. @media screen and (min-width:1024px) { body.post-type-archive-product ul.products li.product li.title a {height:48px;} .woocommerce ul.products li.product .woo-entry-inner li.image-wrap{margin-bottom:10px!important} .woocommerce ul.products li.product .woo-entry-inner li {line-height:0.3!important} }*/ /*------------- REGLES CSS POUR LA BOUTIQUE AVEC PAGE ELEMENTOR--------- * /* régles pour le titre: Boutique avec Elementor*/ body.page-id-171 .page-header-title { color:#57BF6D;/*vert*/ } /* régles pour le titre du produit avec Elementor */ body.page-id-171 ul.products li.product li.title a { font-family: 'Kalam'; font-size: 26px; font-weight: 500; } /*--------- modification de la largeur de la barre de vue rapide(Ok et a inhiber avec gutenberg)------ */ /* modification pour se conformer a la largeur de l'image du produit cas d'une page largeur 1200px sur 3 colonnes. régles a modifier pour d'autres résolutions ou nbr de colonnes */ .owp-quick-view { margin-left:44px; width:77%!important; } /*-------------------------------------------------------------------------- FIN BOUTIQUE OceanWP ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- FICHE PRODUIT OCEANWP ---------------------------------------------------------------------------*/ /*------------ Titre H1 de la page Fiche Produit ---------------------*/ /* on masque le titre H1 qui fait doublon avec le titre du produit mais il faudra passer le titre du produit en balise H2 a partir du menu: Apparence/personnaliser/woocommerce/Produit unique/ balise HTML du titre = H2 */ .single-product .page-header-title{display:none;} /*-------------------------------------------------------------------------- FIN FICHE PRODUIT GUTENBERG ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- PAGE CATÉGORIE GUTENBERG ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- FIN PAGE CATÉGORIE GUTENBERG ---------------------------------------------------------------------------*/ /*------------------------------------------------------------------------------ PAGE PANIER(Régles CSS communes a Guttenberg & Elementor excepté Titres) -------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- FIN PAGE PANIER ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- PAGE COMMANDE(Régles CSS communes a Guttenberg & Elementor excepté Titres) ---------------------------------------------------------------------------*/ /*---------------------- section Click and collect -------------------------------*/ #title_click_and_collect{ margin-top: 20px;} /*---------------------- Expéditions -------------------------------*/ /* Bouton choisir le point de retrait */ body.woocommerce-checkout #lpc_pick_up_widget_show_map{ background-color: #cc4a0a!important; border: 0px!important; border-radius: 5px!important; padding: 8px 8px!important; color:#FFFFFF; } .woocommerce-checkout #lpc_pick_up_widget_show_map:hover{background-color: #F45F15!important;} /* on masque l'adresse de livraison dans le cas ou l'expédition n'est que selon deux modes: En Magasin ou en Colissimo Retrait */ .woocommerce .cart-collaterals p .woocommerce-shipping-destination{display:none!important;} /*---------------------- Moyens de paiement -------------------------------*/ /* image moyen de paiement */ .woocommerce-checkout #payment ul.payment_methods li img{max-height:52px!important} /*Texte données personelles & politique de confidentialité*/ .woocommerce-terms-and-conditions-wrapper{padding: 0px 15px 0px 15px;} /* Conditions Générales de ventes */ .woocommerce-checkout .woocommerce-terms-and-conditions h1 {font-size:30px!important;} .woocommerce-checkout .woocommerce-terms-and-conditions h2 {font-size:24px!important;} /* Label Conditions Générales */ .woocommerce form .form-row label { margin: 0 0 5px 20px!important; } /*-------------------------------------------------------------------------- FIN PAGE COMMANDE ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------- PAGE SUIVI DE COMMANDE( Page Gutenberg réalisée avec un short code Woocommerce) ----------------------------------------------------------------------------------------*/ /* Titre H1 de la page Suivi De Commande */ body.page-id-200 .page-header-title{ font-size:40px; font-weight:500; text-align:center; margin-top:30px; } /* Bouton SUIVI */ body.page-id-200 .woocommerce button.button{ border-radius:5px; } /* Titres de l'en-tête de la table Détails de la commande */ body.page-id-200 .woocommerce table.shop_table thead th{ color: #FFFFFF; } /*-------------------------------------------------------------------------- FIN PAGE SUIVI DE COMMANDE ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- PAGE MON COMPTE ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- FIN PAGE MON COMPTE ---------------------------------------------------------------------------*/ /***********************************************************************************************/ /* TEMPLATE ELEMENTOR POUR WOOCOMMERCE */ /***********************************************************************************************/ /*-------------------------------------------------------------------------- PAGE ACCUEIL ---------------------------------------------------------------------------*/ /* régles pour le titre du produit avec Guttenberg */ body.woocommerce-demo-store ul.products li.product li.title a h2 { font-size: 26px!important; } /* régles pour le titre du produit avec Guttenberg pour les mobiles */ @media screen and (max-width:959px) { body.woocommerce-demo-store ul.products li.product li.title a h2 { font-size: 20px!important; } } /*-------------------------------------------------------------------------- FIN PAGE ACCUEIL ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- BOUTIQUE TEMPLATE ELEMENTOR ---------------------------------------------------------------------------*/ .postid-243 .page-header-title{ color:#57BF6D!important;/*vert*/ font-weight:500; text-align:center; margin-top:30px; } /*pour les mobiles en mode portrait on supprime la disposition en grille des produits pour le template produit elementor*/ @media screen and (max-width:480px){ .elementor-element.elementor-products-grid ul.products{ display:block!important; margin:10px!important; } .elementor-element.elementor-products-grid ul.products li.product{ margin:25px!important; } } /*-------------------------------------------------------------------------- FIN BOUTIQUE TEMPLATE ELEMENTOR ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- FICHE PRODUIT ---------------------------------------------------------------------------*/ /* Quantité en stock */ .woocommerce div.product p.stock{color:#77A464!important;} /* variation avec déclinaisons du produits */ body.single-product table th, body.single-product table td {border-bottom: none;} /*-------------------------------------------------------------------------- FIN FICHE PRODUIT ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- PAGE CATÉGORIES DE PRODUITS ---------------------------------------------------------------------------*/ /* régles pour le titre du produit*/ body.tax-product_cat ul.products li.product li.title a { font-family: 'Montserrat'; font-size: 18px; font-weight: 600; } /*-------------------------------------------------------------------------- FIN PAGE CATÉGORIES DE PRODUITS ---------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------- HEADER ---------------------------------------------------------------------------*/ /* Effet ombré bas de la barre de menu */ #site-header {box-shadow: 0 2px 5px rgba(0,0,0,0.1);} /* pour que la vue rapide du produit passe devant le menu fixe */ #mysticky-nav.wrapfixed{z-index:999!important;} /*-------------------PANIER MENU--------------------------------------*/ /* Utilise l'icône de panier sac(bag) et un style de menu déroulant compact */ /* container du menu déroulant du panier .dropdown-menu .sub-menu, #searchform-dropdown, .current-shop-items-dropdown {padding:10px!important;}*/ /* Utilise l'icône de panier sac(bag) et un style de menu déroulant compact */ /* container du menu déroulant du panier: on met une marge interne et on ajuste la hauteur du menu déroulant pour que les boutons Voir le Panier et Commander soit visible quand on a 3 articles ou plus dans le panier fonctionne quelque soit le style de menu déroulant compact ou spacieux*/ .elementor-menu-cart__products{ padding:15px!important; max-height: calc(100vh - 290px)!important; /* on ajuste la hauteur du menu déroulant */ } /* nbr de produit dans le détail du panier */ .elementor-menu-cart__product-price{ color:#666666!important; } /* On Met les boutons commander & panier cote à cote */ .elementor-menu-cart__footer-buttons{ display:inline-block!important; } /* bouton commander & Panier */ .elementor-menu-cart__footer-buttons .elementor-button { border-radius: 5px!important; max-width:51%!important; padding:15px 20px 15px 20px!important; } /* On centre les boutons du panier sur PC */ .widget_shopping_cart_content .elementor-menu-cart__footer-buttons .elementor-button--view-cart{ margin-left:0.7em; margin-right:1.1em } /* On centre les boutons du panier sur Mobile */ @media screen and (max-width:959px) { .widget_shopping_cart_content .elementor-menu-cart__footer-buttons .elementor-button--view-cart{ margin-left:0.3em; margin-right:0.7em } } /* marge des boutons par rapport au bas du menu déroulant*/ .elementor-menu-cart__footer-buttons{ padding:15px!important; } /* bordures séparant les articles dans le panier de menu l'option OceanWP existe mais n'est pas prise en compte? */ .elementor-menu-cart__product:not(:last-of-type), .elementor-menu-cart__products, .elementor-menu-cart__subtotal{ border-bottom: 1px solid rgba(204,74,10,0.5)!important; } /* bouton commander & Panier */ .elementor-menu-cart__footer-buttons .elementor-button { background: #CC4A0A; /* l'option OceanWP existe mais n'est pas prise en compte?*/ } /* bouton commander & Panier au survol l'option OceanWP existe mais n'est pas prise en compte?*/ .elementor-menu-cart__footer-buttons .elementor-button:hover {background: #F45F15;} /* icône supression article du panier l'option OceanWP existe mais n'est pas prise en compte? */ .elementor-menu-cart__product-remove:after, .elementor-menu-cart__product-remove:before{ background: #CC4A0A!important; } /* icône supression article du panier l'option OceanWP existe mais n'est pas prise en compte?*/ .elementor-menu-cart__product-remove {border-color: #CC4A0A!important;} /* .elementor-menu-cart__product-remove:hover{ border-color: #F00000!important; }*/ /*-------------------------------------------------------------------------- FIN HEADER ---------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------- FOOTER WIDGET /*---------------------------------------------------------------------------------------*/ .elementor-493 .elementor-element.elementor-element-bb89f11 > .elementor-background-overlay{ background-color:#282624!important; } /* bordure orange pour les titres des widgets */ .elementor-widget-heading .elementor-widget-container{border-color:#F45F15!important;} /*---------------------------------------------------------------------------------------- FIN FOOTER WIDGET /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------- MODIF FOOTER COPYRIGHT /*---------------------------------------------------------------------------------------*/ #footer-bottom #copyright{ font-size:16px!important; line-height:1.6em!important; } #footer-bottom #copyright a{ color:#FFFFFF!important; font-weight:700; } #footer-bottom #copyright a:hover{opacity:0.7;} /*---------------------------------------------------------------------------------------- FIN MODIF FOOTER COPYRIGHT /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------- PAGE CONTACT /*---------------------------------------------------------------------------------------*/ /* Numéros de téléphone bas de page */ .elementor-690 .elementor-element.elementor-element-511e077a a{color:#FFFFFF;} /*---------------------------------------------------------------------------------------- MODIF FORMULAIRE NINJA FORM /*---------------------------------------------------------------------------------------*/ /* Modification Container Formulaire Ninja Form */ .nf-form-content { background-color: #FFFFFF!important; border-radius:6px!important; box-shadow: 3px 3px 9px rgba(0,0,0,.5)!important; padding:20px!important; } /* On applique des régles aux champs de type Text, Email,Paragraphe lorsqu'ils ont le focus*/ .nf-field-element input[type="text"]:focus, .nf-field-element input[type="email"]:focus, .nf-field-element textarea:focus { background:#FFFFFF!important;/* Blanc */ border-color: #CC4A0A!important;/* orange */ } /* Mention de tranparence */ .nf-field-element { font-size:18px; } /* On applique des régles au bouton de soumission */ .nf-field-element input[type="button"] { background-color:#CC4A0A!important; /* orange de la palette colorimétrique */ border: 2px solid #CC4A0A!important; color: #FFFFFF!important;/* blanc */ font-size:14px; padding: 1em 1em 1em 1em ; font-weight: 700; letter-spacing:1px; border-radius: 4px; box-shadow: 0 2px 18px 0 rgba(0,0,0,.1); display:block; margin:auto; } /* On applique des régles au survol pour le bouton de soumission */ .nf-field-element input[type="button"]:hover { background-color:#FFFFFF!important; /* blanc */ border: 2px solid #CC4A0A!important;/* orange de la palette colorimétrique */ color: #CC4A0A!important; } /* Encadrement du message succés & couleur du message succés */ .nf-response-msg { background-color:#FFFFFF; /* blanc */ border: 2px solid #CC4A0A;/* orange */ border-radius: 4px; color: #CC4A0A;/* orange */ padding:5px!important; text-align:center; } /*---------------------------------------------------------------------------------------- FIN MODIF FORMULAIRE NINJA FORM /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------- FIN PAGE CONTACT /*---------------------------------------------------------------------------------------*/ /*---------------------------------------------------------------------------------------- CORRECTION BUG THEME /*---------------------------------------------------------------------------------------*/ .pswp{display:none;}