Prestashop Modules

Featured Project - Just Whisky

Just Whisky

PrestaShop Modules Development Course

PrestaShop Modules Course

The Complete PrestaShop Modules Development Course will guide you from the process of making a PrestaShop module from scratch, up to creating complex addons.

More Info

PrestaShop SEO URLs

Prestashop SEO URLs Module

Remove IDs from PrestaShop Urls without effort, and add more search engine Optimization with custom url routes for every language

More Info Request Demo
blocktopmenu

Quick Tip: Editing the top menu module (blocktopmenu)

in Tips n Tricks on August 24, 2012 Level: Basic 17 comments

In today’s quick tip, we’ll see why the top horizontal menu (bundled with the new template) can’t be edited the default way, causing trouble to many people, and how to make it re-usable for future projects.

The idea for this quick tip came from a topic in the Prestashop Forums. Hope you find it useful!

Subscribe Post Scriptum's Youtube Channel

Resources

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

Related Articles

  • Maria

    Hi Nemo,

    Can I do some simple coding and add/remove categories from the top menu?
    I understand there is a module called Top Horizontal Menu, but that does not work for me. So can I change the blocktopmenu.php or blocktopmenu.css in some way to add/remove existing categories.

    I also felt that when I do inspect element on the browser, the HTML code looked very easy, but finding the right directory to change is a headache. But overriding seems quite challenging as well. Could you give me a general direction on just editing PrestaShop from back-office (since most modules I tried did not work)?

    Thanks,

    Maria

  • Dpaez

    HI Nemo,

    I´m trying to change the font of the blocktopmenu, but I can´t find the way to do it.
    Could you explain how to modify superfish-modify.css in order to do it please?

    Thank you very much!

    • http://nemops.com Nemo

      Hi,
      you need to change .sf-menu li a {font: thefotnname}. Use an !important keyword if you don’t see it changing

      • Dpaez

        Hi again,

        I´m working with filezilla to connect with the server. And I´m editing directly the superfish-modify.css file in the server. But I can´t see no changes after saving and overwriting.

        Firstly I wanted to change the font but after seeing no changes at all I decided to try the changes you do at your video but not even those work.

        Any advice?

        Thanks again.

        • http://nemops.com Nemo

          Be sure you’re not caching any css file, and that force compile is ON.
          Of course, there is a change yourm css rules are not targeting the correct aleme4nt, maybe something else is overriding. Inspect it with chrome developer tools

  • Mike

    do you know how to add .current to this css. so the current page is highlighted?

    • http://nemops.com Nemo

      It’s a bit complex to explain, you will need to add it in the PHP file. However, if you’re on 1.5.3.1, current categories have the class “sfHoverForce”, which you can use to target the current state ;)

      • Mike

        yes i am on 1.5.3.1. Just new to the whole prestashop thing. Where exactly do you put sfHoverForce?

        • http://nemops.com Nemo

          You can target it in the css like any normal class

  • alreadynight

    Hi,
    I have an issue on IE8 / IE9 with this css. IE probably don’t read styles from file superfish-modified.css.
    Do you have this issue too?

    • http://nemops.com Nemo

      Yes, but only as long as it’s incorporated in the TPL. If you add it to the overall css files with Tools::addCSS (1.4) or $this->context->controller->addCSS (1.5) it should e fixed

      Fabio

  • http://allproscience.com reefdvrjim

    I’m wondering if there is a way to override the blocktopmenu.php in the themes folder instead? I don’t want my changes to be overwritten on an update.

    Thanks!!

    • http://nemops.com Nemo

      Unfortunately not. Php files can’t be overridden as far as I know, although a confusing “override modules behavior” section appears in the official doc, which only tells you how to override tpl, css, and js

  • tobi

    hello,

    do you might have a link to this whole css override thingy in PS 1.5…it does not work at all for me no matter what i do…

    i am trying to change the css of blockuserinfo and i tried it in themes/newtheme/modules/blockuserinfo folder as well in themes/newtheme/css/blockuserinfo folder but no sucess also i modified the link in blockuserinfo.php as mentioned but i never get an override tohappen…what do i wrong?

    thanks

    tobi

    • http://nemops.com Nemo

      Hi,
      This is for blocktopmenu. I don’t know ehay blockuserinfo is not working, since it should.
      At any rate, I’ll try to have a look at this for 1.5 when I have some time, but i suppose it’s about the same

  • fiki

    Yes it can be overridden.
    Just copy the css file to /themes/your_theme/css/modules/blocktopmenu/css/superfish-modified.css

    • http://nemops.com Nemo

      No, at least not in version 1.4.x, since it’s embedded in the tpl. At least, this is what i experienced (and also many others)

Store Top Sales

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: