CSS has no effect

While editing the CSS for a module in PrestaShop, I encountered an issue where the changes I made were not reflecting on my website. To troubleshoot, I deleted the CSS stylesheet to confirm that I was working with the correct CSS file. Surprisingly, all the properties disappeared. I then proceeded to comment out each line of code one by one to identify the problem. After re-uploading the edited stylesheet, the properties appeared as intended.

Website: backlabel.com. Please check the newsletter block in the footer section, specifically the <button> element where I attempted to remove the position:absolute property.

CSS Stylesheet:

/* Block newsletter */

 #columns #newsletter_block_left .form-group {
   margin-bottom: 0;
 }

 ... (CSS stylesheet continues here) ...
htmlcsspropertiesprestashop

Answer №1

Most online stores utilize heavy caching systems, so consider turning it off temporarily.

In Prestashop versions 1.4 and above, data is cached using Smarty. The cached information can be found in the following directories:

/tools/smarty/cache

/tools/smarty/compile

/tools/smarty_v2/cache

/tools/smarty_v2/compile

All these folders are located within your Prestashop's installation directory. For instance, if your Prestashop store is installed in the public_html folder of your hosting account, then the cached data will be stored in:

public_html/tools/smarty/cache

public_html/tools/smarty/compile

public_html/tools/smarty_v2/cache

public_html/tools/smarty_v2/compile

Reference: Siteground

If you're using Chrome, open the developer tools and go to the network tab. Check the box at the top that says "disable cache". This will prevent caching while the dev tools are active.

Answer №2

#footer #newsletter_block_left .form-group .button-small {

  color: #999999;

  font-size: 17px;

  border: 0;

  background: transparent;

  position: initial;

  right: 0px;

  top: 0px;

  padding: 8px 10px;

}

The display in my browser matches exactly what you're describing, so it seems like the issue you're encountering may be due to an outdated cached version on your system. This isn't likely caused by PrestaShop or your hosting provider since I can view the updated version fine. To resolve this issue, try clearing the cache specific to that site in your browser. The steps will vary depending on which browser you use, but a quick Google search should help guide you through the process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Snug enclosure surrounding an image

I'm currently working on creating a chat application and I need the chat bubbles to snugly wrap around their contents. It's working fine for text, but when an image is included in the bubble, it creates some issues. Below is the HTML code that I ...

htmlcsscss-positionpositioning

NodeJS is facing a severe challenge in properly rendering HTML and its accompanying CSS code, causing a major

Once upon a time, I built a beautiful website while practicing HTML, CSS, and JS. It had multiple web pages and used Express for the backend. Unfortunately, I lost all the files associated with it and took a break from web programming for some time. Now, w ...

javascripthtmlcssnode.jsexpress

How can content be kept from dropping below a stationary header?

One thing I've noticed when creating a fixed header is that I often resort to using padding in order to push the content back into view if it falls below the header. Is there a way to create a fixed header without relying on padding or margin to keep ...

htmlcss

Design a personalized button with a hand-shaped image using CSS

I am aiming to design a unique custom button that resembles the shape of a hand featured in this image, with the intention of adding some functionality to it later. My attempts so far have involved using an SVG path created in GIMP within a button, but all ...

htmlcss

Substitute Default Tokens with Updated Values as Soon as New Values are Received

Currently, I am facing an issue where I need to initialize my token with a specific value first. However, the token values will change when new values are received. Below is my code: <form> <init> <set token="CH1_CHW_FLOW"> ...

htmlxmltokensplunk

"Enhance your website with a dynamic hover effect and striking letter spacing in

In the div below, there is a span with the following code: <div class="mission-button"><span class="mission">view our mission</span></div> Accompanied by this CSS: .mission-button::before { content:'&ap ...

htmlcss

Transform the query results into clickable links

Is there a way to automatically turn specific results fetched from a MySQL $row into hyperlinks? For example, if I fetch the website Google.com in a search query, is there a method for making it an active hyperlink that goes directly to Google.com when cli ...

phphtml

How can we validate the radio buttons to show a value even if none of the buttons are checked?

In my registration form, I have a gender radio option with "male" or "female" choices. Both options are unchecked initially so the user must select one. Here is the HTML code: <label class="radio"> <input type="radio" name="gender" id="option ...

phphtmlformsradio-button

One way to change the cursor CSS property is by dynamically altering it based on scrolling behavior. This involves modifying the cursor property when scrolling

I'm attempting to adjust the cursor property within an Angular function. The issue I'm facing is that when I begin scrolling the webpage, the cursor changes to a pointer, but when I stop scrolling, it remains as a pointer. I've attempted to ...

javascripthtmlcssangularjsangular

Artwork expanding incorrectly on HTML canvas

I'm encountering an issue while attempting to draw on an HTML canvas. I've specified 50 circles and multiple lines within a canvas of size 1000x1000 px, but not all circles are appearing as expected. My assumption is that the elements are being ...

javascriptcsshtmlcanvas

Ensure that the width of the checkbox label in HTML/CSS using Bootstrap remains consistent and fixed, regardless of

Seeking assistance for a bootstrap checkbox button behavior. Currently, the text on the button changes when clicked, but I would like to set a fixed width for the button regardless of the text length and center the text inside it after clicking. Any guidan ...

jqueryhtmlcsstwitter-bootstrap

Failing to verify the presence of specific text within a dropdown menu using Selenium

Previously, I successfully implemented this code, however, the HTML/CSS for the dropdown has since changed and now I am unable to get it to function correctly. Below is the structure for the dropdown code, with specific text highlighted that I am trying t ...

javascripthtmlcssseleniumselenium-webdriver

I require assistance in understanding how to successfully implement ParseINT with (row.find)

enter image description hereHow To Utilize ParseINT Using row.find(). I Attempted This Code But It Doesn't Work. This is My Code : function update_qty() { var row2 = $(this).parents('.item-row'); var price2 = row2.find(parseInt($ ...

javascriptjqueryhtml

When there are spaces in the button, it will result in the button creating a new line within the Navbar

There is a line break in the navbar when a space is added to the button text The CSS for the Navbar is manually inputted (Utilizes Bootstrap) <img src="images/SCP_Logo.jpg" style='width: 100%; max-width:100%;'> & ...

htmlcssbuttonnavbar

What are the choices for the active element in a bootstrap navbar?

Is there a way to highlight the active element in bootstrap 4? Right now, Home is the active element, but it doesn't stand out enough. https://i.sstatic.net/5tKBx.png <li class="nav navbar-nav "> <a class="nav-link {{ Request::is(&apos ...

phpcsshtmllaravelbootstrap-4

"What could be causing the sticky sidebar to not float as intended

Take a peek at this example where I implement the affix for the right sidebar (unfortunately, Bootstrap 4 doesn't have true affixes) - Violy Theme Right Sidebar Example. The sticky behavior is achieved through this style: .sidebar { border-radius: ...

htmlcssbootstrap-4

The process of eliminating body padding in Nuxt.js

I'm considering building a website using Nuxt.js because I've heard it's both cool and user-friendly. While I do have some knowledge of vue.js, I'm stuck on a particular issue: How can I remove the padding from the body? I understand ...

javascripthtmlcssnuxt.js

What is the best way to sort ng-options in an AngularJS select element?

I am encountering a situation where I have the following code snippet: <select ng-model="person" ng-options="person.name for person in mv.people"> However, within the mv.people array, there are certain members that I need to hide. For examp ...

htmlangularjsangularjs-ng-options

What is the best way to instruct npm to generate a .min.css file from scss?

Currently, I have setup a process to automatically compile CSS from SCSS using a JSON script. However, the issue is that the ".min" suffix is being removed during this compilation. Here is the output from the terminal displaying the script I am running and ...

cssnpmsassnpm-scripts

Request to api.upcitemdb.com endpoint encountering CORS issue

This code may seem simple, but for some reason, it's not working as expected. What I'm trying to achieve is to call the GET API at: I want to make this API call using either JavaScript or jQuery. I've attempted various approaches, but none ...

javascriptjqueryhtmlajaxxmlhttprequest