I'm having a little problem applying some CSS styles to a Prestashop 1.7 template , a few days ago everything worked perfectly, now that I try to modify some things in the file custom.css
I find this bug, I've googled a lot and all the problems similar to mine have been solved applying a " !important
" to the CSS rules, my problem is that even with the declaration of !important the changes are not being applied from mycustom.css
What I have checked and tried :
*That there are no writing permission problems for the .css file
*Apply the css rule directly in the filetheme.css
*Replace entire filecustom.css
*Declare the rules with!important
my file head.tpl
:
{block name='head_charset'}
<meta charset="utf-8">
{/block}
{block name='head_ie_compatibility'}
<meta http-equiv="x-ua-compatible" content="ie=edge">
{/block}
{block name='head_seo'}
<title>{block name='head_seo_title'}{$page.meta.title}{/block}</title>
<meta name="description" content="{block name='head_seo_description'}{$page.meta.description}{/block}">
<meta name="keywords" content="{block name='head_seo_keywords'}{$page.meta.keywords}{/block}">
{if $page.meta.robots !== 'index'}
<meta name="robots" content="{$page.meta.robots}">
{/if}
{if $page.canonical}
<link rel="canonical" href="{$page.canonical}">
{/if}
{/block}
{block name='head_viewport'}
<meta name="viewport" content="width=device-width, initial-scale=1">
{/block}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{block name='head_icons'}
<link rel="icon" type="image/vnd.microsoft.icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
<link rel="shortcut icon" type="image/x-icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
{/block}
{block name='stylesheets'}
{include file="_partials/stylesheets.tpl" stylesheets=$stylesheets}
{/block}
{block name='javascript_head'}
{include file="_partials/javascript.tpl" javascript=$javascript.head vars=$js_custom_vars}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
{/block}
{block name='hook_header'}
{$HOOK_HEADER nofilter}
{/block}
{block name='hook_extra'}{/block}
my file _partials/stylesheets.tpl
:
{foreach $stylesheets.external as $stylesheet}
<link rel="stylesheet" href="{$stylesheet.uri}" type="text/css" media="{$stylesheet.media}">
{/foreach}
{foreach $stylesheets.inline as $stylesheet}
<style>
{$stylesheet.content}
</style>
{/foreach}
My .css file structure is as follows:
I would appreciate any comment that gives me an idea to solve this, it seems to be a fairly common error in certain versions of Prestashop 1.7.x
What happens in my case is the following, I use CloudFlare on my site, I don't mention it in my question because I couldn't find the relation to my problem.
Cloudflare speeds up client websites by storing a copy of the website's content on servers in its globally distributed data centers, that's why even if you clear your backoffice cache as many times as you want, it will still have the same result , the cache of cloudflare servers should be cleared.
To remove this cache:
For more info Purge Cloudflare caching
Note : I had to turn off Cloudflare while I'm in development mode, only clearing the cache didn't work because I would have to clear the cache every so often.
Cheers,