Tips for personalizing your Magento 2 theme

As someone new to Magento 2 and front-end development with a basic knowledge of HTML and CSS, I am eager to customize the blank theme in Magento 2 to gain a deeper understanding of how things work. However, despite reading through the documentation, I am unsure of where to start. Should I be focusing on changing CSS files or altering the layout (XML) files?

I attempted to follow some tutorials on adding CSS files, but unfortunately, nothing seemed to change.

Below is an excerpt from the default_head_blocks.xml file:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
   <css src="css/source/style.css" />
  </head>
</page>

Here is an example snippet from the style.css file:

.navigation {
    background: #40e936;
    font-weight: 700;
    height: inherit;
    left: auto;
    overflow: inherit;
    padding: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 3;
}

Answer №1

If you want to incorporate a custom CSS theme file into Magento 2, follow these steps:

  1. First, create a file named custom.css in the pub/media/ directory.
  2. Next, navigate to Admin > Content > Configuration > [select the currently used theme] > HTML Head > Scripts and Style Sheets.
  3. Then, add the following line of code:
    <link  rel="stylesheet" type="text/css"  media="all" href="{{MEDIA_URL}}custom.css" />

However, it is important to note that although this method works, it is not the recommended approach in Magento 2. Instead, consider styling by creating a child theme and modifying the CSS and LESS files inherited from the parent theme.

Answer №2

Magento 2 has enhanced its ability to style websites by supporting CSS files and LESS files, making it easier to manage complex CSS files. If your custom theme is based on Magento default themes Luma or Black, you can override the LESS files by adjusting the values of variables in the default files. Follow these simple steps:

  • Create a new theme that inherits from the Black theme, naming it Orange theme.
  • Add the code for overriding at app/design/frontend/OrangeCo/orange/web/CSS/source/_theme.less

In the orange theme directory, you have the freedom to make changes such as altering button colors or any other desired modifications. If you encounter difficulties during customization, consider hiring a developer. For assistance, check out this link: kodematix

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

Spacing between navigation items

After working on my navigation menu locally, I noticed that when I uploaded it online, some changes didn't take effect on Chrome and the design on Firefox was different from what I intended. I'm not sure what I might be doing wrong here. Here is ...

How can I enable two-finger scrolling on mobile web browsers?

I am currently tackling a project that involves dragging operations on a canvas, making scrolling with a single finger impractical. My goal is to enable scrolling using two fingers instead. After testing different touch-action values, I discovered that pi ...

Photo not completing the table

Hey there, I'm currently working on creating a table to showcase some products but I am struggling with ensuring that the images display at the correct size. Any assistance on this matter would be greatly appreciated. #tbldesktops { width: 100%; ...

Adjust image source based on media query (CSS or JavaScript)

Is there a way to update the image src based on a media query with a maximum width of 515px? I'm considering using JavaScript, jQuery, or even AngularJS if there is an event equivalent to a CSS media query that can achieve this. I want to have differ ...

Display an HTML image within a span tag and ensure it is aligned to the bottom

I am facing a layout issue with 2 images that are placed side by side within their tag . The sizes of the images are different, but they are both anchored at the top of their parent element. <span style="position: relative; left: 0; top: 0; vertical- ...

Convert text to bold when checkbox is selected and alter color upon selecting a radio button

Having just started learning HTML, CSS, and PHP, I find myself in need of assistance. Despite extensive research online, I have hit a dead end and cannot seem to find any productive solutions. Any guidance or suggestions would be greatly appreciated! I am ...

Adjust the size of the image within a designated container to decrease its proportions when there is an excess of text present

I am working on a project where I need to resize an image based on the available space within its container. When there is text in the description, the image should adjust its size accordingly without pushing the text upwards. I am using React for this pro ...

Font and div placement varies on a mac within a WordPress environment

www.oihanevalbuenaredondo.be After styling my post titles in CSS using font-family: adobe arabic, I noticed that while they display correctly on my Windows machine, they appear in a basic font on Mac OS, Safari specifically. Why is it that Safari cannot r ...

Java Spring - The on-page styling is out of control

Currently, I am in the process of developing a taxi web application using Java Spring. After successfully creating the website with the help of a template, I encountered an issue when trying to integrate the login functionality. Strangely, the styling on ...

The alignment of margins appears as intended in Opera, Chrome, and IE, but unfortunately it does not

I have exhausted all possible options, but I am still struggling to get this page to appear correctly in Firefox. When you click inside the square, a menu with images should display on the right side. It is properly aligned in every browser except for Fire ...

Align the inner div in the center of the outer div, even when the outer div does not

I'm attempting to make sure the tail of the speechbubble aligns with the center of the image, regardless of their respective heights. Essentially, I want the image to always be centered within the current height of the wrapper, similar to how the spee ...

Guide to ensuring the navbar remains at the top of the webpage following an image

I am attempting to create a sticky navbar that stays at the top of the page once the header has been scrolled past. It should have a similar effect as shown in this example on codepen.io, but with the addition of an image that stretches across most of the ...

Steps for styling the header of an Antd Collapse Panel

I'm attempting to modify the text color in the header of an ant panel. Below is the entire ant collapse component code: <Collapse accordion defaultActiveKey={defaultOpenPanel}> <StyledCollapsePanel key="tasksAssignedToMe" header={ ...

Prevent browser menus from opening by using JavaScript without triggering a new popup window

In seeking to safeguard the source code of my website, I am looking to prevent any unauthorized access. Therefore, I aim to deactivate all common methods of accessing the code such as Ctrl+U, Ctrl+Shift+I, F12, and browser menu options. ...

Select a specific element to apply a CSS selector for a button

One of the challenges I am facing involves a webpage with multiple submit buttons. My goal is to iterate through each button and click on them one by one. While I am aware that this can be achieved using xpath like this (//button[@class='submit' ...

Div over which scroll editing is performed

I want to develop a website where my title div remains fixed in one position as I scroll down. However, the issue arises when I set it to be fixed because my navigation button on the left disappears and I'm unsure how to keep it in place. // JavaSc ...

Arrange the icons in multiple rows to ensure an equal distribution of icons on each row

There are 12 image icons displayed in a row within div elements using display: inline-block. However, when the browser window is resized, I would like the icons to be arranged on two or more rows so that each row contains an equal number of icons. ...

Invoke a function using the output of a different function

There is a function whose name is stored in the value of another function, and I need to invoke this function using the other one. The function I need to call is popup() random() = 'popup()' if ($.cookie('optin-page')) { } I attemp ...

Trigger the callback function once the datatables DOM element has finished loading entirely

Hello there! I have a question regarding datatables. Is there any callback function available that is triggered after the datatables DOM element has finished loading? I am aware of the callbacks fnInitComplete, but they do not serve my purpose. Specificall ...

Deleting database information using Jquery when a div is clicked

I'm looking to create an alert system where users will see a pop-up alert on their screen. However, I am facing a major issue in removing the div completely. I understand that I need to remove it from the database, but I'm struggling with finding ...