Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Recommended Posts

Is there an easy way to adjust the colors, etc of the NavBar using CSS? Unless I'm doing something wrong (very possible!), I have to adjust each and every element (Account, Brand, Currencies, Hamburger Button, Languages, Shopping Cart, etc) in the NavBar separately ...

background color, text color, icon color, hover/rollover color (for both the text and the icon)

Any general definitions I create are overridden by finer pre-defined cascading rules. It's taking hours to search for each detail of each element.

TIA

Malcolm

 

Link to comment
Share on other sites

*** Update ***

Ok, as I found yesterday, in Admin->Modules->Content->Navigation Bar, you can select from several pre-set color combinations. However, if you want to use a different color combination, add this to your user.css file:

.cm-navbar {
   background-color: blue !important;
}

.nav-link,
.navbar-brand ,
#navDropdownAccount,
#navDropdownCurrencies,
#navDropdownCart,
#navDropdownLanguages {
  color: red !important;
}

.nav-link:hover,
.navbar-brand:hover,
#navDropdownAccount:hover,
#navDropdownCurrencies:hover,
#navDropdownCart:hover,
#navDropdownLanguages:hover {
  color: white !important;
}

This covers all of the stock NavBar modules included with Phoenix. Obviously, you can (should!) change the colors to your liking.

I hope this helps anyone setting up Phoenix, and want to color things up a bit 😀

Malcolm

 

** update to the update **

This covers all of the stock NavBar modules EXCEPT for the 'hamburger' button. For that, see my post below.

Link to comment
Share on other sites

Boostrap 4 does not have class=hidden

so old BS3 class class="hidden-xs"  is now in BS4  class="d-none d-sm-block"

used like

<div class="d-none d-sm-block"> hidden-xs           
  <div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
    <div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
      <div class="d-none d-xl-block"> visible-xl </div>

 

Link to comment
Share on other sites

So, after some testing, to display nav bar modules in Phoenix, so they display the same as they did in Frozen i.e. show icon and text in hamburger list, show only icon on small screen, show icon and text in larger views

find the language file for the nav bar module in admin-define languages e.g. modules/navbar_modules/nb_special_offers.php

add the span class to the following line so it looks like this

define('MODULE_NAVBAR_SPECIAL_OFFERS_PUBLIC_TEXT', '<a class="nav-link" href="' . tep_href_link('specials.php') . '"><i class="fas fa-fire"></i><span class="d-inline d-sm-none d-md-inline"> Bargains</span></a>');

We have a number of nav bar modules in our shop, too much text caused display issues on ipad views so we changed <span class="d-inline d-sm-none d-md-inline"> to <span class="d-inline d-sm-none d-lg-inline"> so the text only shows on the hamburger list and on large and extra large views (desktop monitors).

Link to comment
Share on other sites

10 hours ago, ArtcoInc said:

@Heatherbell Very nice and useful! 👍

It should be pointed out that, while the current school of thought is to avoid 'core file' changes, both Language and Template files are NOT considered 'core files', and as such, we can modify these all we want.

M

What should really be done is to create a new module with a different name and upload it. Then remove the current module and replace with the new one. That way keeps core code files safe for when updating the site with a full file upload overwrite.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

@burt Your thoughts?

8 hours ago, 14steve14 said:

What should really be done is to create a new module with a different name and upload it. Then remove the current module and replace with the new one. That way keeps core code files safe for when updating the site with a full file upload overwrite.

 

Link to comment
Share on other sites

8 hours ago, 14steve14 said:

What should really be done is to create a new module with a different name and upload it. Then remove the current module and replace with the new one. That way keeps core code files safe for when updating the site with a full file upload overwrite.

What?? Am I misunderstanding or can't we even change language files - that's crazy talk!

Link to comment
Share on other sites

As long as you know what you have changed it's fine. I thought the idea was that updating the software is a case of replacing the core files. If you alter core files you will have to alter them again when updating. I keep a record of the changes I make to the language files so they can easily be changed again after an upgrade. At the end of the day it's up to you what you do and how you do it. 

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

10 hours ago, Heatherbell said:

What?? Am I misunderstanding or can't we even change language files - that's crazy talk!

It's your project, you can change whatever file you like, no one should be advocating any different.

7 hours ago, 14steve14 said:

I thought the idea was that updating the software is a case of replacing the core files.

That might be a vision, but the CE is far from that stage ,and i doubt it ever will be. Last time i checked there was code being added to the template files even.

Link to comment
Share on other sites

4 hours ago, Hotclutch said:

That might be a vision, but the CE is far from that stage ,and i doubt it ever will be. Last time i checked there was code being added to the template files even.

So my point remains in that to update to a newer version of the files you just over write the core files that you have with the latest version ones. It does not matter if the core files are being changed or added to as thats what updating will do.

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

The tpl and lng files are there to be micro-managed by the shopowner if they need to change something small, typical examples;

  • a language change "welcome on..." to "welcome to..."
  • adding in extra .css to a modules output
  • swapping around components (eg putting a buy button in a module)

Of course, anyone more "technical" can also write up a new module.

There's not a one size fits all...all I said all along;  if you change any files to better suit your needs, write down what you did so that you can easily remember in 2 years time etc.  You could also set chmod on a changed file to 400 (as is done with configure.php) to stop yourself overwriting your customised changes.

Put simply, your shop...your rules.

Link to comment
Share on other sites

  • 1 month later...

Archived

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

×
×
  • Create New...