Problème modification couleur menu

Skillz47 · March 25, 2015

Bonjour,

Je possède le thème shopperspoint mais j'ai un souci pour personnaliser le menu. Voir ici :

Le menu s'établit à partir d'un css meanmenu.css, où j'ai pu remplacer le orange par du bleu, mais visiblement il y a un autre css de background-color avec le orange qui est en !important et qui du coup prend le dessus. par contre cette div contrôle tout ce qui a le orange (y compris par exemple les sous titre de menu et le nombre d'articles dans le panier en haut à droite), sauf que quand je regarde avec le debug chrome, je ne sais absolument pas où se trouve ce css...

Quelqu'un pourrait m'aider?

Il s'agit du menu "Top Navigation Menu" de "Omicron" (fournit avec le thème), renommé dans les modules "blocktopmenuheader"

Merci pour votre aide précieuse !

Ariane Web et Plus · March 26, 2015

Ce sont des styles qui sont dans le html

Vraisemblablement dans le header.tpl

En plus ils sont appelés après les feuilles de styles ils ont donc la priorité.

Il faudrait voir comment ils sont générés, peux être en dur, dans ce cas supprimer .res-menu si c'est le seul élément que vous souhaitez mettre en bleu. Sinon supprimer le important, mais vous pouvez avoir des surprises sur le reste du thème.

Bonne journée

Skillz47 · March 26, 2015

Ce n'est pas le seul malheureusement.. J'aimerais pouvoir accéder à ce CSS là pour remplacer le orange par mon bleu et ça va le changer partout, mais je ne trouve pas où dans le tpl..

Voici mon header.tpl

{*

* 2007-2013 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

*  @author PrestaShop SA<[email protected]>*  @copyright  2007-2013 PrestaShop SA

*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)

*  International Registered Trademark & Property of PrestaShop SA

*}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="{$lang_iso}"> <![endif]-->

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="{$lang_iso}"> <![endif]-->

<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="{$lang_iso}"> <![endif]-->

<!--[if gt IE 8]> <html class="no-js ie9" lang="{$lang_iso}"> <![endif]-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">

<!--<![endif]-->

<head>

<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>

{if isset($meta_description) AND $meta_description}

<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />

{/if}

{if isset($meta_keywords) AND $meta_keywords}

<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />

{/if}

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<meta http-equiv="content-language" content="{$meta_language}" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="generator" content="PrestaShop" />

<meta name="robots" content="{if isset($nobots)}no{/if}index,{if isset($nofollow) && $nofollow}no{/if}follow" />

<link rel="icon" type="image/vnd.microsoft.icon" href="{$favicon_url}?{$img_update_time}" />

<link rel="shortcut icon" type="image/x-icon" href="{$favicon_url}?{$img_update_time}" />

<script type="text/javascript">



			var baseDir = '{$content_dir|addslashes}';

			var baseUri = '{$base_uri|addslashes}';

			var static_token = '{$static_token|addslashes}';

			var token = '{$token|addslashes}';

			var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};

			var priceDisplayMethod = {$priceDisplay};

			var roundMode = {$roundMode};



		</script>



<!--[if lt IE 9]>



	<script type="text/javascript" src="{$js_dir}html5shiv.js"></script>



    <script type="text/javascript">



    runFancy = false;



 </script>



<![endif]-->

{if isset($css_files)}



	{foreach from=$css_files key=css_uri item=media}

<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />

{/foreach}



{/if}

<link href="{$css_dir}digitalomicron.css" rel="stylesheet" type="text/css" media="{$media}" />

<link href="{$css_dir}responsive_grid.css" rel="stylesheet" type="text/css" media="{$media}" />

<link href="{$css_dir}style.css" rel="stylesheet" type="text/css" media="{$media}"/>

<link href="{$css_dir}meanmenu.css" rel="stylesheet" type="text/css" media="{$media}"/>

<link href="{$css_dir}boxedslide.css" rel="stylesheet" type="text/css" media="{$media}"/>

<link href="{$css_dir}isotope.css" rel="stylesheet" type="text/css" media="{$media}"/>

<link href="{$css_dir}font.css" rel="stylesheet" type="text/css" media="{$media}"/>

{if $page_name == 'products-comparison'}

<link href="{$css_dir}jquery.jscrollpane.css" rel="stylesheet" type="text/css" media="{$media}" />

{/if}





{if isset($js_files)}



	{foreach from=$js_files item=js_uri}

<script type="text/javascript" src="{$js_uri}"></script>

{/foreach}



{/if}

<script type="text/javascript">

      //$.noConflict();

    </script>

<script type="text/javascript" src="{$js_dir}cookie.js"></script>

<script type="text/javascript" src="{$js_dir}jquery.selectbox-0.2.js"></script>

<script type="text/javascript" src="{$js_dir}cycle/jquery.cycle.all.min.js"></script>

<script type="text/javascript" src="{$js_dir}jquery.multipleelements.cycle2.js"></script>

<script type="text/javascript" src="{$js_dir}isotope/jquery.cycle.all.min.js"></script>

<script type="text/javascript" src="{$js_dir}isotope/jquery.isotope.min.js"></script>

<script type="text/javascript" src="{$js_dir}isotope/custom.js"></script>



{if $page_name == 'index'}

<script type="text/javascript" src="{$js_dir}jquery-ui.min.js"></script>

{/if}



{if $page_name == 'products-comparison'}

<script type="text/javascript" src="{$js_dir}jquery.jscrollpane.min.js"></script>

{/if}



		{$HOOK_HEADER}

</head>



<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if}">

{if isset($ad) && isset($live_edit)}



		{include file="$tpl_dir./live_edit.tpl"}



	{/if}



	{if !$content_only}



		{if isset($restricted_country_mode) && $restricted_country_mode}

        <div id="restricted-country">

  <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>

</div>

{/if}

<div id="page" class="clearfix">

<div class="topofpage">

  <div class="topoflinks"></div>

  

  <!-- Header -->

  

  <div id="topheader" class="container_column"> 

    

    <!-- Header -->

    

    <header id="header" class="grid-full">

      <div class="headerarea v-grid-container">

        <div class="grid12_2 v-grid" id="header_left"> 

        <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"> 

        <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} /> 

        </a> 

        </div>

        <div id="header_right" class="grid12_2 v-grid"> {$HOOK_TOP} </div>

      </div>

      

      </header>

  </div>

</div>

{hook h='menuTab'} 

{if $page_name == 'index'}

		{hook h='sliderBox'}

 <div class="custom_adbanner">{hook h='homeadvt'}</div>

{/if}

<div class="main-container">

<div id="wrapper" class="container_column">

<div id="columns" class="grid-full clearfix">

<section id="main_column">



<!-- Center -->



<div id="center_column">

{if $page_name == 'index'}

<div class="tabs_deal">

  <div class="main_tabs_deal"> {hook h='hometabCategory'} </div>

</div>

{/if}



	{/if}

Ariane Web et Plus · March 27, 2015

C'est peux être un module. Il faudrait que vous contactiez le créateur du thème.

Vous n'avez pas vu passer un module de gestion de couleur avec le thème ?

Je ne connais pas ce thème alors c'est difficile de savoir d'ou ça vient. Ce qui est sur c'est que vous ne pourrez pas régler le problème proprement en css.

Baba deCode · March 28, 2015

Bonsoir,

En regardant la console de debug je peux voir meanmenu.css

/*! #######################################################################



	MeanMenu

	--------

	

	To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)



####################################################################### */



/* hide the link until viewport size is reached */

Donc je regarde jquery.meanmenu.js

(function ($) {
	"use strict";
    $.fn.meanmenu = function (options) {
        var defaults = {
            meanMenuTarget: jQuery(this), // Target the current HTML markup you wish to replace
            meanMenuContainer: 'div.res-menu .container_column', // Choose where meanmenu will be placed within the HTML
            meanMenuClose: "<div>Menu<span></span><span></span><span></span></div>", // single character you want to represent the close menu button
            meanMenuCloseSize: "18px", // set font size of close button
            meanMenuOpen: "<div>Menu<span></span><span></span><span></span></div>", // text/markup you want when menu is closed
            meanRevealPosition: "right", // left right or center positions
            meanRevealPositionDistance: "0", // Tweak the position of the menu
            meanRevealColour: "", // override CSS colours for the reveal background
            meanRevealHoverColour: "", // override CSS colours for the reveal hover
            meanScreenWidth: "959", // set the screen width you want meanmenu to kick in at
            meanNavPush: "", // set a height here in px, em or % if you want to budge your layout now the navigation is missing.
            meanShowChildren: true, // true to show children in the menu, false to hide them
            meanExpandableChildren: true, // true to allow expand/collapse children
            meanExpand: "+", // single character you want to represent the expand for ULs
            meanContract: "-", // single character you want to represent the contract for ULs
            meanRemoveAttrs: false, // true to remove classes and IDs, false to keep them
            onePage: false // set to true for one page sites
        };
        var options = $.extend(defaults, options);
        
        // get browser width

à // override CSS colours for the reveal background ----> peut être qe tu peux mettre la couleur de ton choix, a voir.

Cordialement

Skillz47 · March 29, 2015

Non ça ne marche pas :/

mais cette couleur a une incidence sur beaucoup de balises ! (menu, compteur d'items dans le panier, sous titre de menu etc)

C'est peux être un module. Il faudrait que vous contactiez le créateur du thème.

Vous n'avez pas vu passer un module de gestion de couleur avec le thème ?

Je ne connais pas ce thème alors c'est difficile de savoir d'ou ça vient. Ce qui est sur c'est que vous ne pourrez pas régler le problème proprement en css.

Sauf qu'il m'est impossible de contacter le créateur, il est introuvable sur internet maintenant...

Ajout : J'ai fini par trouver le fameux module en question qui gère le thème! : p

Edited March 29, 2015 by Skillz47 (see edit history)

Ariane Web et Plus · March 31, 2015

Du coup à partir du module vous pouvez changer la couleur générale ?

Sign In

Problème modification couleur menu

Recommended Posts

Skillz47

Link to comment

Share on other sites

Ariane Web et Plus

Link to comment

Share on other sites

Skillz47

Link to comment

Share on other sites

Ariane Web et Plus

Link to comment

Share on other sites

Baba deCode

Link to comment

Share on other sites

Skillz47

Link to comment

Share on other sites

Ariane Web et Plus

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com