Post by xsteved » Wed Mar 18, 2015 12:33 am

Hello--

I've learned how to override certain templates by creating a directory of my own in catalog/view/theme --

Code: Select all

catalog/view/theme/default/
catalog/view/theme/my-theme/
Inside the "my-theme" directory, I recreate any directories and subdirectories I find within the default theme if I need them in which to place customized .tpl files copied from the default theme.

However, I'm having difficulty overriding the default CSS file (catalog/view/theme/default/stylesheet/stylesheet.css). I thought that merely adding a stylesheet directory into my own theme directory and copying the default stylesheet into that directory, then editing it, would override the default CSS stylesheet, but apparently not.

/catalog/view/theme/my-theme/stylesheet/stylesheet.css seems to be ignored.

Is there any documentation about how to override OpenCart's theme and CSS? I was unable to find any such information in the OpenCart documentation linked-to in the "Documentation" menu at the top of most OpenCart.com pages. Thank you.
---

UPDATE

I'll answer my own question, for anyone else who may be interested. The CSS stylesheet to be used with any particular theme is specied in the /catalog/view/theme/theme-name/template/common/header.tpl file.

So first one needs to make a directory in one's own theme folder called "common" --

Code: Select all

/catalog/view/theme/MY-THEME-NAME/common/
Then one needs to copy the "header.tpl" file from /catalog/view/theme/default/common/ directory into one's own theme's "common" directory--

Code: Select all

/catalog/view/theme/MY-THEME-NAME/common/header.tpl
Then one can edit their own theme's header.tpl file to load their own stylesheet, by editing the line that reads like this--

<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">

and make it look like this instead--

<link href="catalog/view/theme/MY-THEME-NAME/stylesheet/stylesheet.css" rel="stylesheet">

Of course, substitute the actual name you have given the directory that contains your theme (instead of using "MY-THEME-NAME")

---

New member

Posts

Joined
Tue Dec 24, 2013 4:47 am

Post by viethemes » Thu Mar 19, 2015 12:26 am

There is a helpful tutorial http://code.tutsplus.com/tutorials/crea ... -cms-21786, you may like it :)

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by esseyejay » Wed Apr 01, 2015 4:29 am

Sorry for hijacking a thread...

I have followed these instructions to a tee numerous times, but once I view the page in the browser nothing is different and the source code shows it's still calling the default stylesheet. I am frustrated and at a loss. It's a new install, and I'm working locally with MAMP.

My TPLs work. I've changed things in the footer, and the change is apparent. I've added text to the header, and it shows up when I view the page. The only thing that doesn't get recognized is my stylesheet. I checked it by replacing the one in the default theme, and my changes show up with no problem.

Any idea what the heck I am doing wrong? Any suggestions would be most appreciated.

Newbie

Posts

Joined
Wed Apr 01, 2015 4:20 am

Post by viethemes » Wed Apr 01, 2015 10:15 pm

May there is a OCMOD extension which make a cache for the header.tpl file. You can try go to admin > Extensions > Modifications > click on the Refresh button and recheck the problem.

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by gartheman » Thu Jul 09, 2015 5:49 am

viethemes wrote:May there is a OCMOD extension which make a cache for the header.tpl file. You can try go to admin > Extensions > Modifications > click on the Refresh button and recheck the problem.
thank you for this tip, i couldn't figure out what the hell was going on!!!

New member

Posts

Joined
Tue Feb 16, 2010 5:12 pm

Post by viethemes » Thu Jul 09, 2015 8:36 pm

gartheman wrote:
viethemes wrote:May there is a OCMOD extension which make a cache for the header.tpl file. You can try go to admin > Extensions > Modifications > click on the Refresh button and recheck the problem.
thank you for this tip, i couldn't figure out what the hell was going on!!!
Glad to hear that you figured out the problem :)

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm

Who is online

Users browsing this forum: No registered users and 15 guests