Jump to content

Archived

This topic is now archived and is closed to further replies.

Twocanes

Theme Switcher

Recommended Posts

Hi,

Using latest Responsive-osCommerce-master "Edge". Downloaded addon Theme Switcher 1.5.4 and

unzipped it.  Instead of laying down on top of Responsive-osCommerce-master directory, the files use a

top level of "osCommerce 2.3.x".  Is this still the right theme switcher addon version?  The only 

directions I've been able to find https://www.webhostinghub.com/help/learn/oscommerce/look-style/theme-switcher

which suggests there are only three files, yet the zip file contains:

Quote

 

./Read Me
./Read Me/gpl.txt
./Read Me/cc.txt
./Read Me/User's Manual.pdf
./Read Me/read_me.txt
./Extras
./Extras/jquery-ui-1.10.4.redmond.zip
./Extras/Users Manual original
./Extras/Users Manual original/User's Manual.odt
./catalog
./catalog/includes
./catalog/includes/modules
./catalog/includes/modules/header_tags
./catalog/includes/modules/header_tags/ht_theme_switcher.php
./catalog/includes/template_top.php
./catalog/includes/languages
./catalog/includes/languages/english
./catalog/includes/languages/english/modules
./catalog/includes/languages/english/modules/header_tags
./catalog/includes/languages/english/modules/header_tags/ht_theme_switcher.php


 

None of the readme files contain any useful info, the User's Manual is from 2014.  I'm totally

lost as to what to do.  Does "Edge" even use the theme-switcher?

TIA,

-Kevin
 

 

 

Share this post


Link to post
Share on other sites

Valqui, 

I'm not sure you read my message in its entirety.  That is the version I downloaded. 

I guess I just don't understand how to install it.  Which files go where?  Do they all

get put in the Edge directory, or only three of them? 

Share this post


Link to post
Share on other sites

@Twocanes

That article was published in 2013. The add-on was last updated this year (2018). Ignore the old article.

There are two sets of code in this add-on: one that would work with Edge (in the Bootstrap folder), and one for the 'standard' version of osC (in the osCommerce 2.3.x folder). Be sure to use the code in the Bootstrap folder. There is a PDF users manual in there, last updated in 2018.

It sounds like you do not have the latest version. Follow the link Valquiria posted above.

HTH

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

Well, I was able to read the correct instructions as pointed out by Artcolnc.  However after

unsuccessfully looking for stylesheet.css and then thru the bootstrap.min.css in my preferred

theme directory, I am unable to find a way to change the background color of the INFORMATION

panel at the bottom of the page.  Is there a current document for Edge that explains how to create

and/or modify a theme?

Share this post


Link to post
Share on other sites

@Twocanes

1) In Edge, there is a file in the /catalog directory called user.css. This is where you are supposed to put any personal CSS changes. This is the last CSS file called, so any changes put here will override any previous CSS declarations. Do NOT edit any of the other CSS files throughout the store.

2) The installation should create a /catalog/ext/bootstrap sub-directory, and install all of the included themes in here. There should be 15 of them. Do you see these? You don't need to actually *edit* any of these (although I guess you could, if you wanted to). These are the pre-defined themes you can select from.

Did you follow the installation instruction completely? Did you install the Theme Switcher header tag, as per the instructions?

Now, perhaps the Theme Switcher doesn't change the specific areas you want changed. Or, you don't like any of the included themes. If this is the case, you're going to have to determine what CSS class you want changed (I use the Inspect Element feature in my browser), and make these changes by hand in your user.css file.

Or .... you might be able to copy (and re-name) one of the existing themes, and edit your newly named copy.

HTH

M


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

The Theme Switcher is working just fine, thanks for the help.  I tried to modify a certain theme's

.css file with no success.  I'll try the Inspect Element feature, I've never used that before.  Editing

the theme's .css files is like looking for a needle in a haystack.

Share this post


Link to post
Share on other sites

Hmm.  I made a couple of changes to user.css for a  theme that I copied and renamed "orangecat". 

However, it does not seem to want to override the theme's bootstrap.min.css file.  Here are the

additions to the user.css file.

Quote

.footer {
    background: #000000;
}
.footer h2 {
    color: #f06a2a; 
}

I re-saved the theme and reloaded the page, but no joy.

Share this post


Link to post
Share on other sites

@Twocanes

Just for the shits-and-giggles of it, try adding this to the end of your user.css
 

body {
  background-color: black;
}

(you can change it to red, or blue, or ...) and see what happens.

Oh, and be sure to clear out the browser cache ... <Ctrl-F5>

M


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@Twocanes

The instructions said to make an edit to /catalog/includes/template_top.php. Can you confirm that the line that calls user.css comes *after* this edit?

M


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

Yes.  Yes I can.  BTW, I note that if I change custom.css which is the line before user.css,

the colors change with a page reload.  I changed it back cuz it says not to do that. :laugh:

<?php if ( !defined ( MODULE_HEADER_TAGS_THEME_SWITCHER_STATUS ) ||
MODULE_HEADER_TAGS_THEME_SWITCHER_STATUS != 'True' ); { ?>
<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<?php } ?>

<!-- font awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<link href="custom.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">

Actually, I just noticed that while the .footer background does not change, the color change I made to .footer h2  is working:

.footer {
    background: #000000;
}
.footer h2 {
    color: #f06a2a; 
}

 

Share this post


Link to post
Share on other sites

@Twocanes

Well, that's *some* progress :unsure:

I see that I used background-color, and you used background. Inspecting the resulting code, it actually is background. So, let's try one more thing ...

body {
  background: black;
}

What do we have to loose :wacko:

M


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

If I uncheck the appropriate .footer css statement in the inspect element, the changes to user.css work;

the color  for .footer h2 works either way. All of the following code in user.css works if the Inspect

Element .footer css statement is unchecked.

footer {
    background: #000000;
}

---OR---

footer {
    background: #000000;
}
.footer h2 {
    color: #f06a2a;
}
body {
  background-color: black;
}
----OR----

body {
  background: black;
}

 

Share this post


Link to post
Share on other sites

@Twocanes

In Inspect Elements, it *should* say from which CSS file the working definition comes. Not that I'm suggesting that you change *that* file ...

I really don't know everything about CSS. I end up doing a *lot* of trial-and-error to get what I want to show on my site. In my experience, sometimes changing the lowest CSS definition doesn't work. I end up having to do something like

body > something in between > .footer > <something else> {

You just have to find what combinations over-rides the dominate definition.

Good luck!

M

 


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

I just found the problem.  I've always said that most Unix/Linux problems are due to 1 or 2 characters at most.

Note the lack of a period in the first footer definition.  I added that one character and it works like a charm now.

Thanks for your help.  To be frank, I only stuck it out with oscommerce because of the replies from

the oscommerce community.  I gave up on 3 other ecommerce sites because there was no docs and

little to no help available.

Share this post


Link to post
Share on other sites

@Twocanes

So, you *should* be able to switch themes, and still override any/all theme with your own code in user.css, right?

M


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

A few things:

  1. Always add your changes to user.css. The intent is that you leave provided CSS files alone so they can be replaced (or modified) in updates without your losing any changes or interfering with the update.
  2. Be careful of CSS selectors... different things (tag name, class name, ID name, etc.) have different priorities, and can override each other in unexpected ways.
  3. Be careful of consolidated CSS attributes, such as background vs. background-color. Sometimes they can do unexpected things by overriding settings with defaults.
  4. Always refresh your browser (usually F5 or Ctrl+F5) after making a change, or clear the browser cache. The intent is that you force a fresh copy of a file (e.g., user.css) to be loaded, and not accidentally use an older, cached version.

Share this post


Link to post
Share on other sites

After some try and error, I found a bug in this add-on.

Here is the my website source code after install this add-on

 

<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- font awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<link href="custom.css" rel="stylesheet">
<link href="user.css" rel="stylesheet"> <!--[if lt IE 9]>
   <script src="ext/js/html5shiv.js"></script>
   <script src="ext/js/respond.min.js"></script>
   <script src="ext/js/excanvas.min.js"></script>
<![endif]-->
 
<script src="ext/jquery/jquery-3.1.1.min.js"></script>

<link href="ext/bootstrap/amelia/bootstrap.min.css" rel="stylesheet">

 

The user.css is override by the <theme>.css.  But this is not what we want. We want user.css can override all other css files.

Therefore, I change template_top.php to:

 

<?php if ( !defined ( MODULE_HEADER_TAGS_THEME_SWITCHER_STATUS ) ||
MODULE_HEADER_TAGS_THEME_SWITCHER_STATUS != 'True' ); { ?>
<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<?php } ?>

<!-- font awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<link href="custom.css" rel="stylesheet">


<!--[if lt IE 9]>
   <script src="ext/js/html5shiv.js"></script>
   <script src="ext/js/respond.min.js"></script>
   <script src="ext/js/excanvas.min.js"></script>
<![endif]-->
 
<script src="ext/jquery/jquery-3.1.1.min.js"></script>

<?php echo $oscTemplate->getBlocks('header_tags'); ?>

<link href="user.css" rel="stylesheet">

 

Now, the sequence is : custom.css --> <theme>.css --> user.css

 

Share this post


Link to post
Share on other sites

×