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.

csssassprestashop

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

Get rid of the paper border in Material-ui

Is there a way to remove the top border in material-ui Paper component? I've attempted the code below, but it doesn't seem to be effective. <Paper sx={{ border: 0, borderTop: 0, borderRadius: 0, ...

cssmaterial-ui

Is it possible to highlight only a specific color on the div background?

I'm trying to create a layout similar to this: I've managed to get most of it working, but I'm struggling with the yellow rectangle that spans the background of the screen. Currently, it looks like this: The issue is that the rectangles ar ...

htmlcssreactjs

CSS: Position an element based on the size of the screen

I'm currently developing a program that will dynamically resize elements based on the viewer's screen size. The program is being built using JSP/SQL/XHTML/CSS, and I have a couple of queries. Is there a way to select a CSS file by storing the sc ...

cssjspalignment

Learn the best way to utilize a stylus in Vue files to interact with JavaScript variables

For instance: <script> export default { data() { return{ varinjs: 1, } } } </script> <style lang="stylus"> varincss = varinjs body if varincss == 0 ba ...

cssvue.jssasslessstylus

What could be the reason my CSS and Javascript animation is not functioning properly?

Currently working on creating a dynamic animation menu using CSS and Javascript, but encountering some issues. The concept involves having a menu with initially hidden opacity (using CSS), which becomes visible when the hamburger menu is clicked, sliding i ...

javascripthtmlcsstailwind-css

Clicking will cause my background content to blur

Is there a way to implement a menu button that, when clicked, reveals a menu with blurred content in the background? And when clicked again, the content returns to normal? Here's the current HTML structure: <div class="menu"> <div class=" ...

javascriptjqueryhtmlcss

Utilizing the Strength of Code Snippets and the Art of Style Sheet Separation

When it comes to developing beautiful web pages and forms from scratch, I often struggle as the end result tends to be quite unappealing. Luckily, there are numerous CSS code snippets available that offer stunning solutions. Currently, I am delving into py ...

htmlcssdjangostylesheetcode-snippets

Differences Between Mobile and Desktop Browser Media Queries

As I work on creating a responsive website, I have come across various examples of sites that adapt well to both desktop and mobile browsers. Currently, my stylesheet setup includes different media queries for various screen sizes. However, I've notic ...

cssresponsive-designmedia-queries

Issue with multiple dropdowns not functioning in Bootstrap 5

Before you criticize my imports, here are the scripts I am using: <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to create a new column that wraps content from existing columns?

While working on some homework, I encountered an issue with flex-wrap. I have columns that I want to wrap into at least two columns, but instead, they are overflowing my container. Note: I am aware that this can be achieved with grid as well, but I wanted ...

htmlcssflexbox

What causes the Bootstrap navbar dropdown to be partially obscured in IE8?

While working on a specific project, I have encountered an issue where everything seems to function properly in newer browsers except for IE8 during testing. The dropdown menu is functional, however, it appears hidden behind the main content area labeled ...

jqueryhtmlcsstwitter-bootstrap

Height that is determined in real-time

I am attempting to adjust the height of a div based on the size of the screen. Within this div, there is a calendar that contains multiple lines of content, which can be displayed or hidden based on user preference. The height of the calendar is not fixed, ...

css

Switch button while moving cursor

I'm struggling with getting this 2048x512 image, which has 4 stages of transition, to work properly. While I know how to switch it to the final stage on hover, I can't seem to figure out how to incorporate a transition effect. Can someone help? ...

javascriptjquerycsscss-transitions

Leverage the power of Bootstrap's col-push and col-pull

Here is the code snippet I am currently working with: <div class="col-md-9 col-md-offset-3"> <div class="row> <div class="col-sm-4 col-sm-push-4"></div> <div class="col-sm-8 col-sm-pull-8"></div> </div> ...

csstwitter-bootstrap

When adjusting styles using Chrome DevTools with Webpack HMR, the page layout can become distorted

Encountering a peculiar issue: Currently utilizing Webpack in conjunction with Vue-CLI and HMR. On attempting to modify styles via DevTools in the browser, the page itself undergoes unexpected changes - some styles are removed (screenshots provided below) ...

csswebpackvue.jsgoogle-chrome-devtoolswebpack-hmr

Maintaining a consistent style input until it is modified

I'm currently dealing with this code (continuing from a previous question): input[type=submit]:focus { background-color: yellow; outline: none; } The issue I'm facing is that when I click anywhere else on the screen, the background color go ...

javascripthtmlcss

Adding a drop shadow effect to borders using CSS is a great way to

I created this unique button design using Figma and now I want to implement it in CSS. Upon closer inspection, you'll notice that I included a highlight with a white shadow on the border. However, when I try to replicate it using the following CSS c ...

htmlcssstylesshadow

The boundary extends fully to the right

Recently, I created a calculator to convert kilograms to pounds and encountered an issue when trying to add a border to a p element. The problem was that the border extended all the way to the right side of the page. Here is the corresponding HTML code: &l ...

htmlcssborder

What are some methods to achieve consistent alignment of input fields across different mobile devices using CSS?

I have been working on a login page that looks good on desktop and laptop devices. However, I am facing an issue with its display on mobile devices. The design appears differently on various mobile devices - for instance, it looks acceptable on an iPhone 1 ...

htmlcsscakephp-2.0

Omit the element from the event listener

Is there a way to prevent the image from triggering a click event in this code snippet? $('#templtable .trhover *:not(#infoimg)').live('click', function(event) { event.stopPropagation(); $(this).toggleClass('selected&a ...

jquerycss