Is it possible to modify a scss style in Prestashop?

I have encountered an issue while using a default theme in Prestashop 1.6 that I need assistance with. My goal is to move the navbar up by 25px. I understand that I should make changes to

#block_top_menu {
padding-top: 25px;
}

in blocktopmenu.scss, which is located in the theme directory rather than the modules directory, indicating it should override the default style. Although I successfully disabled it using the browser Inspector tool, the changes are not permanent.

I attempted modifying the file by adjusting 25px to 0px. However, upon reloading the page, there was no change and the inspector displayed the original code. As a next step, I added !important to the CSS in blocktopmenu.css within the modules category:

#block_top_menu {
padding-top: 0px !important;
}

Hoping to override the scss file, but unfortunately, this did not produce any visible changes. In a last-ditch effort, I deleted the scss file from the server, yet nothing changed, and the Inspector continued to display it.

Feeling puzzled, I am unsure of what to do next. Should I attempt to clear the cache in Prestashop? Any guidance would be greatly appreciated.

EDIT: Upon clearing the cache, there were still no improvements.

Answer №1

The file

default-bootstrap/sass/modules/blocktopmenu/css/blocktopmenu.scss
is compiled into
default-bootstrap/css/modules/blocktopmenu/css/blocktopmenu.css

If you have come across the .scss file, there should also be a corresponding .css file.

While many users directly edit the .css file, it is recommended to make extensive style changes, such as altering the color scheme for the entire website, by editing the .scss files and compiling them into .css. Modifying a theme variable in the .scss file will reflect those changes throughout its usage, making it easier to manage styles by editing one location instead of multiple places.

To work with .scss, you will need two tools: sass and compass. Make sure to follow installation instructions specific to your operating system.

Once these tools are installed, navigate to the theme folder in the console and run the following command:

/var/www/themes/theme1/ > compass build

Executing this command in the theme folder will compile the .scss files into .css and save them in the css folder within the theme directory.

Answer №2

Insert the following code into the top menu.scss file within a wrapper class designated for that specific id:

$block-top-menu{padding-bottom:25px!important;}
  div.[your wrapper id which wraps the element]#block_top_menu{padding-bottom:$block-top-menu;} 

This will only affect that particular section and not impact the entire scss.

Answer №3

To convert SCSS into a CSS file is necessary since browsers can only understand CSS code.

In the case of Prestashop, it imports multiple CSS files with 'global.css' being the main one, along with specific stylesheets for various modules. By using developer tools, you can easily identify which styles are affecting margins and make necessary modifications. For example, the block top menu often uses a CSS file named 'superfish-modified.css'.

Additionally, keep in mind that Prestashop comes equipped with a caching system to optimize performance.

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

Having difficulty adjusting the margin-top for the menu div

Why am I unable to apply margin to my a links within the div identified by id="menu". I can successfully implement margin-left, but when attempting to use margin-top or margin-bottom, it does not work as expected. I wish to adjust the position o ...

Combining classes within LessCSS for nested functions

I'm struggling to get LessCSS to process a file with a series of nested rules using the "&" concatenation selectors. For instance, the code below works fine: .grey-table { background: #EDEDED; tr { th { background: #D ...

SVG is not extending to the entire viewport in mobile view

I need help with adjusting wave SVG's on my website to fill the entire viewport or screen width. Does anyone have any suggestions? To create the waves, I used a Wave SVG generator and placed them within a div element. <nav> <div> //align ...

What is the best way to create a CSS class for a list element in React?

I am facing an issue with styling buttons in my UI. These buttons represent different domains and are dynamically generated based on data fetched from the server using the componentDidMount() method. Since I do not know the quantity of buttons at the time ...

Seeking help with h2 headings, nested hyperlinks, and clickable images

Attempting to tackle a homework question today. This is the task at hand.... List a variety of foods in the following categories: Sandwiches, Drinks, Desserts. Use h2 tags to create these categories. Under each category, create a nested list that inc ...

Why do my tablet media queries take precedence over mobile view media queries?

I've noticed that when I view my website on mobile devices, the tablet media queries always seem to override my mobile media queries. Can anyone explain why this is happening? Here is how I have set it up: /* X-Small devices (portrait phones, less t ...

What is the best way to create a transparent sticky header that blends with the background while still maintaining visibility over images and text?

On my web page, the background features a radial gradient but the content extends beyond the viewport, causing the center of the gradient to not align with the center of the screen, producing the desired effect. However, I'm facing an issue with a sti ...

Personalize the md-tab component in Angular 2

I'm encountering an issue with styling the md-tab component in Angular 2. While I understand that Angular 2 Materials is currently under development, I am wondering if there is a way to customize it, such as removing the bottom-radius. Below is an exa ...

What is the best way to customize the styles of a reusable component in Angular2?

I am working with a reusable component called "two-column-layout-wrapper" that has its styles defined in the main .css file. In another module, I need to use this component but customize the width of two classes. How can I override these styles? import ...

Unable to close Bootstrap sidebar menu on mobile devices

I implemented a sidebar menu for mobile that opens when you click on the hamburger icon, with a dark overlay covering the body. The issue I encountered is that on mobile devices, the visibility of the menu does not change when clicked outside of it. It wor ...

Rearrange and place items at the dropped location

I am looking to create a drag-and-drop feature for moving items from a list of products to an empty container. Upon completion, I need to save the location and the selected items in a database so that I can recall this layout later. However, I have encoun ...

What is the best way to align vertically a horizontal list that includes both headers and icon images?

My goal is to create a horizontal navigation bar that features menu options with headings and icons below them. Upon hovering over each option, the block's background color should change and slightly increase in size. I initially used percentages for ...

What is the best way to ensure the logo is centered when the screen size reaches 750?

Looking to center the logo on a media screen size breakpoint? View the photo (Here): https://i.stack.imgur.com/UnB2F.png Check out my code below: .logo img { padding: 15px; width: 125px; } <nav> <ul class='nav-bar'> < ...

What is the method for displaying a div adjacent to a password input field?

I am attempting to display a password verification box next to an input field. The current logic is functioning properly, but the box containing all password requirements is not appearing in the correct position. Instead of being positioned adjacent to the ...

Creating Eye-Catching Images by Incorporating Image Overlays Using Just One Image

I'm facing a bit of a challenge here. I need to figure out how to overlay an image onto another image using just a single image tag. Specifically, I want to add a resize icon to the bottom right corner of an image to let users know they can resize it ...

Having trouble locating the nivoslider IE8 jQuery bug, can't seem to track it

I am encountering an issue with the nivoslider script in IE8 and I am having trouble identifying what is causing it. The nivoslider works perfectly fine in all other browsers except for IE8. Any help or guidance on this matter would be greatly appreciated ...

Tips for adjusting the height of a selection box in jQuery Mobile

I am trying to make the select box height the same as the label (模板分類:). <select id="TamplateClass" style="height:1.5em">...</select> you can use CSS #TamplateClass{height:1.5em;} However, no matter what I try, the results are all th ...

Tips for incorporating animated features into a bar graph using jQuery

How can I create a dynamic animated bar graph using jQuery? I am looking to make the bar slide up from the bottom, incorporating images for both the bar and background. I have already set the positioning in CSS and now need to add animation to make the bar ...

Height of border not being displayed accurately

I have been searching for a solution to my unique issue with inserting borders in HTML and CSS. When I try to add a border to three images, the height does not display correctly. This is all part of my learning process to improve my skills in coding. Belo ...

Is it possible to expand the Angular Material Data Table Header Row to align with the width of the row content?

Issue with Angular Material Data Table Layout Link to relevant feature request on GitHub On this StackBlitz demo, the issue of rows bleeding through the header when scrolling to the right and the row lines not expanding past viewport width is evident. Ho ...