I am using Prestashop for the first time. I try to change icons in the default theme but the change doesn't reflect on the UI
E.g: in block contact info, I have originally
<li>
<i class="icon-phone"></i>{l s='Call us now:' mod='blockcontactinfos'}
<span>{$blockcontactinfos_phone|escape:'html':'UTF-8'}</span>
</li>
I want to remove
<i class="icon-phone"></i>
and add my own icon <img src="\img\icons\call.png" />
But the UI still look the same after I changed the code to
<li>
<!--<i class="icon-phone"></i>-->
<img src="\img\icons\call.png" />{l s='Call us now:' mod='blockcontactinfos'}
<span>{$blockcontactinfos_phone|escape:'html':'UTF-8'}</span>
</li>
I use chrome inspector and see that the source code doesn't change at all. How can I add my own icons in prestashop?
It's because Prestashop uses 1) Module overrides and 2) Template cache system. You should disable cache memory in BO in Settings -> Performance and then clean the cache with the button on the top right. Next You need to edit:
not: root/modules/blockcontactinfos/blockcontactinfos.tpl
but root/themes/yourthemename/modules/blockcontactinfos/blockcontactinfos.tpl file.
This should help fix Your problems :)
Related
I'm building a website while also trying to keep changing code an easy task.
For that, I include the navbar with <?php require_once('./includes/navbar.php'); ?> so that I only need to change the navbar.php to see changes site-wide.
I also use Bootstrap 5 and let it take care of styling the currently active page by using <a class="active"> (and also using the recommended aria-current="page" attribute).
Now my problem is that I need to somehow dynamically apply the above mentioned class and tag to only the active page. I have no idea how to do that in an elegant way but thought that this might be possible in PHP?
Does somebody know how to do it?
Click here to see code of the navbar
I did some research and managed to fix my problem with a little bit of javascript code which you can just add with <script></script> tags anywhere in the html code:
Give every link in the navbar html a unique id (e.g. id="pricing").
Add class="active" to active page and Bootstrap.css will style that element accordingly.
Remove class="active" from the other pages/links which are not active.
Set aria-current="page" to active page and set aria-current="none" to inactive pages.
in navbar.php:
<a id="home" class="nav-link active" href="index.php">Home</a> <!-- 1. -->
<a id="pricing" class="nav-link" href="pricing.php">Pricing</a> <!-- 1. -->
in pricing.php:
<script>
var pricing = document.getElementById("pricing");
pricing.classList.add('active'); //2.
pricing.setAttribute("aria-current", "page"); //4.
var home = document.getElementById("home");
home.classList.remove('active'); //3.
home.setAttribute("aria-current","none"); //4.
</script>
Hope this may help someone else too.
Last 5 submenu icons are not showing http://newlayouthomepage1.bluebirdpackaging.com/ . In mega menu wordpress is unable to save the settings for the icons. So I just tried to add them up through dev tool. Now the problem is how do I save these edits.
I added this <i class="im-icon-arrow-right-2"></i> and changed class="item_link disable_icon" tabindex="44"> to class="item_link with_icon" tabindex="44"> to show the submenu icon
<a href="http://newlayouthomepage1.bluebirdpackaging.com/product-category/custom-printed-apparel-packaging-boxes-wholesale/" class="item_link disable_icon" tabindex="44">
<span class="link_content">
<span class="link_text">
Apparel Boxes
</span>
</span>
</a>
The result I am looking for is to save the html edits I do from dev tool to make them permanent.
I'm currently using prestashop 1.7.4.3, I need to edit the header.tpl file in the _partials. I barely know about this framework.
My problem is:
What I attempted: Tried to add a custom class name for the header logo
<div class="col-md-2 hidden-sm-down hlogo" id="_desktop_logo">
{if $page.page_name == 'index'}
<h1>
<a href="{$urls.base_url}">
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
</a>
</h1>
{else}
<a href="{$urls.base_url}">
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
</a>
{/if}
</div>
As you can see I have added hlogo a custom class to the header logo and I tried display:none in my custom.css
My problem is: The newly added class name is not updated in the front office.
Guide me if I made anything wrong!
As I said before, try clear your cache
To clear cache: Go to Back office Configure/Advanced Parameters/Performance/Clear Cache
You can find the clear cache button in the top right corner in the back office.
Also you can clear cache manually from root_folder/var/cache/dev/smarty/cache
If the problem persists to continue re-check the file you are editing make sure you are editing the correct theme's files
As Viira said, you need to clear your cache. You can do this within your admin panel by going to Configure -> Advanced Parameters -> Performance and press button Clear cache(right top corner) or you can delete it forcibly by clearing folders root_folder/var/cache/dev/smarty/cache and root_folder/var/cache/dev/smarty/compile.
And also it's better to turn off Cache and turn on Template compilation until you will not finish all your customizations. You can do this in Configure -> Advanced Parameters -> Performance as well.
I want to open the audio and video files through the plugin in the wordpress.and i am currently use the plugin wp video lightbox plugin in the wordpress.
I have iframe code like..
<iframe width="325" height="64" src="http://www.ewihosting.com/evp/?id=Mi0wMSBJbnRlcm5ldCBSaWNoZXMgTWFkZSBFYXN5Lm1wMw%3D%3D&profile=default&mode=iframe" frameborder="0" style="background:#fff;" allowfullscreen></iframe>
and i use the logic like..
<li>
<span class="audio_upload_icon"></span><h3>Audio</h3><h4>Lesson #1</h4>
</li>
and i click on the image then open the lightbox but my audio file is not working but may video file is working are correctly.
So please advise me to which plugin very useful for me or any done the code modification.
Thank You.
I am assuming that you are self hosting your Wordpress, or at least you have access to your ftp files in your hosting service. If so, then:
You may wish to save a myvideo.html file in your server, then invoke it via
<li>
<a href="myvideo.html" rel="wp-video-lightbox[iframes]">
<span class="audio_upload_icon"></span>
<h3>Audio</h3>
<h4>Lesson #1</h4>
</a>
</li>
You can include the full path of your local html files, which allow you to make a folder inside of which you can save all your needed iframes, the code will look like this:
<li>
<a href="myvideo.html" rel="wp-video-lightbox[iframes]">
<span class="audio_upload_icon"></span>
<h3>Audio</h3>
<h4>Lesson #1</h4>
</a>
</li>
Lightbox, Shadowbox and other similar tools/plugins will now work. BUT if you are not self-hosting your wordpress nor be able to gain access to the files on your web hosting, you will need a different solution. Please let us know what is the case in order to provide the proper support.
Good luck!
You can use Fancbox Jquery Plugin.
Its pretty simple and usage. For more click here.
How could I change the code generated by wp_nav_menu?
Right now it generates:
<ul class="rounded ">
<li class="arrow">Menus</li>
</ul>
I'd like it to look like this:
<ul class="rounded ">
<li class="arrow">Menus</li>
</ul>
i found this link, but could not get it working properly.
http://wordpress.org/support/topic/how-do-i-modify-wp_nav_menu-link-hrefs?replies=2
The link from support forum doesn't talk about the version number of the wordpress that he is using. I am currently on 3.2.1, it is having the menu options under Appearance section. You can check out this awesome post on menus. It gives you an option of modifying the href as well.
I hope you are on version > 3. If not possible to update then it has to be done using wp functions.