Incorporating CSS stylesheet into OpenCart pages depending on the designated route

Currently, I am working on a client's store using opencart (version 1.5.1.3.1) and I am trying to figure out the most efficient way to add specific stylesheets for certain routes.

For instance, I would like to apply a different stylesheet to my category page instead of the default one, or potentially have a custom stylesheet that overrides the default styles. This need extends to multiple routes, and I aim to achieve this with minimal code edits to avoid complications during future upgrades, especially considering opencart's tendency to introduce unexpected changes and bug fixes regularly.

cssopencartstylesheet

Answer №1

To begin, navigate to 

catalog/controller/common/header.php

Immediately after the line protected function index() {, add the following code on a new line:


$route = empty($this->request->get['route']) ? 'common/home' : $this->request->get['route'];
$css_file = str_replace('/', '_', $route) . '.css';

if(file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/stylesheet/' . $css_file)) {
$this->document->addStyle('catalog/view/theme/' . $this->config->get('config_template'). '/stylesheet/' . $css_file);
}

Next, navigate to your current theme and create a file in the 

catalog/view/your-theme/stylesheet/
directory named product_category.css. Input your desired styles within this newly created file. It's important to note that the stylesheet corresponds with your route name but with forward slashes replaced by underscores and ending with .css. For example, common/home becomes common_home.css.

Keep in mind that this method utilizes overriding rather than replacing your default stylesheet.

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

Media queries in CSS are not being executed properly when using the `max

Having some trouble fixing the display of a button when adjusting page width in Chrome using inspect and toggle device toolbar. Specifically, when the width is less than 600, the button doesn't show up. Can anyone point out what might be causing this ...

htmlcss

Insert placeholder text without access to the input field

Is it possible to activate a placeholder in a component that is outside of the current context? For example: <foreign-component [config]="someConfig" placeholder="somePlaceholder"></foreign-component> The <foreign-compo ...

cssangular

Ways to Align an Item Horizontally within a Material-UI Typography Element

Struggling with centering the logo in an AppBar on extra small screens while using MUI V5 in a react project. The Typography component is nested inside a ToolBar within an AppBar that only displays on xs screens. Check out my code snippet below: <Box ...

cssreactjsmaterial-ui

Styling Challenges with CSS/AngularJS Accordion in Footer

I want to create a page layout as shown below: +---------------------------+ | Auto-fill / v scrollable ^| | || | || | v| +---------------------------+ | Fixed [][][] ...

javascripthtmlcssangularjs

Fixed background & cover design for Internet Explorer 11

Visit this link for more information: http://apolytos.com/new/img/test.html <!doctype html> <html> <head> <meta charset="utf-8"> <style> body { background:url("background.jpg"); background-repeat:no-repeat; backgr ...

cssinternet-explorer-11background-attachment

Intermittent issue with div background switching feature on Firefox

There's a div where background images are changed using a script. I've simplified everything here: Sometimes, in Firefox, an error occurs about 10% of the time that looks like this: https://i.sstatic.net/JvSfx.png Everything seems to work fine i ...

javascriptjqueryhtmlcss

Div containing a centered span with a background

<div> <span style= "background: red; text-align: center;"> There seems to be an issue here </span> </div> The text alignment is not functioning as expected. I need the text to be centered along with the background. https://jsfiddl ...

css

Creating a dynamic page footer for a PDF document using Rotativa's content generation capabilities

As I work on generating a PDF, my employer has requested that I add a footer to each page of the document. Currently, the PDF is being created using Rotativa, where an HTML page is converted into a PDF. However, I am facing a challenge in determining the ...

c#htmljquerycssrotativa

What is the best way to showcase entire content over a background image on a mobile device?

Hello, I am facing an issue with displaying content on an image in desktop view that does not resize properly when the browser window is resized. The problem lies in setting a background image with full content. Can you please take a look at my images belo ...

csshtml

"Unable to get elements by tag name using the getElementsByTagName method in

function updateLayout() { var para = document.getElementsByTagName("p"); para[0].style.fontSize = 25; para[1].style.color = "red"; } <p>Text in paragraph 1</p> <p>Text in paragraph 2</p> <p>Text in paragraph 3</p& ...

javascripthtmlcss

Disabled button in Bootstrap4 displaying the wrong color as white instead of the intended color

On one of my pages, I have a bootstrap button that is disabled but the styling doesn't seem to be working correctly. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.mi ...

cssbootstrap-4

quirky behavior of form inputs on mobile devices in a responsive webpage

I encountered a strange issue while developing a responsive webpage with form input. Whenever I tapped on an input field on my mobile phone to enter something, the screen would zoom in and cut off the text box on the left side, making it impossible to see ...

androidhtmlcss

Display the latest tooltip in a Tree view

I have developed a unique custom component to incorporate tooltips for each individual node within a Tree. function StyledTreeItem(props) { const { nodeId, labelText, tooltipTitle, ...other } = props; return ( <Tooltip title={tooltipTitle} placem ...

cssreactjsmaterial-ui

Maintain the aspect ratio of a div with CSS styling

Attempting to create a div while maintaining a 16:9 aspect ratio using CSS led me to conduct a Google search. Fortunately, I stumbled upon a helpful resource on Stack Overflow that detailed how to achieve this: How to maintain the aspect ratio. Excited to ...

htmlcss

turn off redundant div wrapper in React

Is there a way to remove the extra div wrapper in React when using ES2015? This additional wrapper is causing issues with centering my component in C#. #First div .default-content { margin-right: auto; margin-left: auto; padding: 16px 16px 16 ...

cssreactjstypescriptless

Adjust hover effects based on true conditions

Currently working on a web app using HTML, CSS, JavaScript, and AngularJS. Progress so far includes a clickable box that triggers a javascript function to display more boxes upon click using ng-click. <div ng-click="!(clickEnabled)||myFunction(app)" cl ...

javascripthtmlcssangularjsangularjs-ng-click

Turn off hover effect using solely CSS

This is my first time posting on stackoverflow, so please excuse me if I overlook something obvious. I tried searching for a solution beforehand but couldn't find one that seemed relevant. In the following jsfiddle example, I have a div that acts as ...

csshover

Struggling with creating a slideshow - is the display set to none?

I've been working on a jQuery slideshow project and have encountered an issue where a hidden element is not showing up as expected. Below is the code I'm using: <section id="content"> <div id="jumbotron"> <div class="s ...

jqueryhtmlcss

Is there a way to keep the spotlight/shadow position fixed in relation to the horizontal center, regardless of the zoom level?

After working on the following code snippet, I've managed to keep the spotlight centered horizontally, except when the zoom factor is too high. This means that when I zoom in, the spot light no longer remains centered in the horizontal view port. It& ...

htmlcss

Step by step guide on inserting a message (memo/sticky note) onto an HTML page

Wondering how to accomplish this: I've designed an HTML5 homepage and I'm looking to display a message to visitors, such as "Dear visitor, I am currently on vacation from....", in the form of a memo or sticky note positioned in the top right cor ...

javascriptjquerycsshtml