Séane

Hello, Yes, I do know, but then again, since this is a jquerry plugin, the CSS is set up outside of the component, from what I understood from my early tests. I'll keep in mind what you told me and proceed to further tests. Thank you for your help and patience. Séane

Hello tommat, Thank you for your kind help, the !important worked like a charm and I'll test the homeslider.css. Thank you, Séane

Hello, I am trying to customise the homeslider module, which is calling a jQuery Plugin stored in: ThirtyBees\js\jquery\plugins\bxslider\jquery.bxslider.css Everything I type in the global.css or if I create a specific css file within the module, inside of the theme, I can't override the css from the jQuery plugin. Basically I would like to remove the ::after tag in the CSS and change the width of the arrows, but the css from the plugin takes the lead. Any idea? Séane

So, I found out the issue. I while stripping the code, I removed the includ global.tpl from the footer. I don't understand why, but apparently the call of the javascript functions is linked to the global.tpl. Everything works just fine now. Thank you for reading 🙂

UPDATE I narrowed down the issue to the following: I called the javascript function directly in the tpl and it now loads correctly. Since I am loading the Javascript in the header this might be the issue. But when I change the theme to the default community theme, it works just fine, without loading the javascript in the footer. Why would the function not be called in my theme, with the same code?

I was able to confirm that the javascript is correctly loading (in the header), so the fonction to append the jquery plugin (the bx wrapper) should work. But it's not. This is the javascript function: if (!!$.prototype.bxSlider) $('#homeslider').bxSlider({ useCSS: false, maxSlides: 1, slideWidth: homeslider_width, infiniteLoop: homeslider_loop, hideControlOnEnd: true, pager: false, autoHover: true, auto: homeslider_loop, speed: parseInt(homeslider_speed), pause: homeslider_pause, controls: true }); and the begining of the homeslider.tpl from the module in the theme: {if $page_name =='index'} {if isset($homeslider_slides)} <div id="homepage-slider" class="col-xs-12"> {if isset($homeslider_slides[0]) && isset($homeslider_slides[0].sizes.1)}{capture name='height'}{$homeslider_slides[0].sizes.1}{/capture}{/if} <ul id="homeslider"{if isset($smarty.capture.height) && $smarty.capture.height} style="max-height:{$smarty.capture.height}px;"{/if}> We have the right <ul id="homeslider"> around which the bxSlider should be appearing. So in short: javascript seems to be loading, but does not apply to the ID. Séane

Hello, Working on a personal them to get to know Thirty Bees, I am stripping down the code to better understand how it works. I've come to the HomeSlider module which is a bit painful to me. Basically, I am re-arranging the structure of the templates/modules, so it is easier for me to play with. I duplicated the module into my theme folder: Theme_Name > modules > homeslider > - header.tpl - homeslider.tpl - index.php The module is called through the 'displayTopColumn' hook which was called in the header.tpl initially. I decided to call the hook in another .tpl, called topcolumn.tpl. This tpl contains: {capture name='displayTopColumn'}{hook h='displayTopColumn'}{/capture} {if !empty($smarty.capture.displayTopColumn)} <div id="top_column" class="row">{$smarty.capture.displayTopColumn}</div> {/if} and I am calling this .tpl in the layout.tpl with an include: {include file="$tpl_dir./topColumn.tpl"} The slider is loading (the content, the tumbnails, etc.). So far, there is nothing really wrong. Still, there is one thing which is not working: the .bxSlider implementation. .bxSlider is supposed to be called in the root/modules/homeslider/homeslider.php file public function hookdisplayHeader($params) { if (!isset($this->context->controller->php_self) || $this->context->controller->php_self != 'index') return; $this->context->controller->addCSS($this->_path.'homeslider.css'); $this->context->controller->addJS($this->_path.'js/homeslider.js'); $this->context->controller->addJqueryPlugin(array('bxslider')); $config = $this->getConfigFieldsValues(); $slider = array( 'width' => $config['HOMESLIDER_WIDTH'], 'speed' => $config['HOMESLIDER_SPEED'], 'pause' => $config['HOMESLIDER_PAUSE'], 'loop' => (bool)$config['HOMESLIDER_LOOP'], ); $this->smarty->assign('homeslider', $slider); return $this->display(__FILE__, 'header.tpl'); } public function hookdisplayTop($params) { return $this->hookdisplayTopColumn($params); } public function hookdisplayTopColumn($params) { if (!isset($this->context->controller->php_self) || $this->context->controller->php_self != 'index') return; if (!$this->_prepareHook()) return false; return $this->display(__FILE__, 'homeslider.tpl', $this->getCacheId()); } Here we can clearly see that it's fine to load the slider in the displayTopColumn hook, and since the content is showing in the html page there is no problem, so far, again. The part which seems not to be working in the above is here: $this->context->controller->addCSS($this->_path.'homeslider.css'); $this->context->controller->addJS($this->_path.'js/homeslider.js'); $this->context->controller->addJqueryPlugin(array('bxslider')); When browsing the page through inspector, I can't find any trace of the jquery plugin being called (bxslider). And actually, when visiting the demo page from thirty bees (https://front.thirtybees.com/) browsing through inspector I can't find any trace of jquery or bxslider. I don't understand how it's called. At all. My issue seems to be really with the javascript, as I tested the integration with the same code than the default theme (using the same theme module). I am missing the navigation: <div id="homeslider-pager"> <span>More offers:</span> <span id="homeslider-pages"> [EMPTY] </span> </div> The way the .bxSlider feature is called is simply by appending the .bxSlider function to a class or an ID. $('#homeslider').bxSlider( But since the javascript (or the jquery plugin bxslider) does not seem to be loaded, it does not work. Can someone help me understand how the javascript is supposed to be loaded? I did not touch the core module, and the slider is correctly positionned to the right (TopColumn) hook, so it should load. Séane

Well, I am more of a designer than a programmer, so I could not judge. I am tweaking the code as much as I can. But this is frustrating. Even trying to bypass this with Javascript seems to be difficult as you need to add a class to the module and create a hook in the header. You can't really load a .js file from the .tpl. I might end up changing the core code after all. Séane Edit: actually loading a .js from the .tpl was quite easy: <script type="text/javascript" src="{$tpl_uri}modules/blocktopmenu/blocktopmenu.js"></script>

Hi, My bad. I actually figured out: The override folder is at the root of Thirty Bees. But then, this is not exactly what I would like to do, since I would like the override to happen from the theme folder. Basically, I would like the user to download the theme and install the theme, and the override would work straight away without any change of the core/root folder. I guess I will need to use javascript as mentioned in a previous comment. I find it odd we can override modules .tpl in the theme folder but not the .php files. Thank you for your help, Séane

Hello, It does not seem to work on my side. I've cleared the cache, just in case, but so far no luck. Could you please indicate it the 'overrides' folder should be at the root of the theme, or elsewhere? Séane

Hello, Actually, I don't want to update the .tpl as you can't do anything inside. The only code there is is: {if $MENU != ''} <div id="blocktopmenu-tpl"> <nav> <ul> {$MENU} </ul> </nav> </div> {/if} What I would like to do is to amend the html and add specific class, such as a class for all the parent <li>. This can only be done in the .php but the class is private. Any guess?

Hello, I am trying to everride the blocktopmenu module without touching the code .php file. The class is generateCategoriesMenu is protected, which should allow to modify it from the theme. What I am trying to do is basically to add a class="parent" to <li> for parent categories. Would there be a specific way with ThirtyBees? Kind regards, Séane