Jump to content

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

 


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

Share this post


Link to post
Share on other sites
Posted (edited)

*** 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.

Edited by ArtcoInc
more info

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

Share this post


Link to post
Share on other sites

@ArtcoInc The text for the nav bar modules is hidden in Frozen in small view due to span class=hidden-sm. This isn't included in Phoenix and when I include it, it doesn't work - any ideas?

Share this post


Link to post
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>

 

Share this post


Link to post
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).

Share this post


Link to post
Share on other sites

@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


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

Share this post


Link to post
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

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
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.

 


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

Share this post


Link to post
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!

Share this post


Link to post
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

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
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.

Share this post


Link to post
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

Get the latest Responsive osCommerce CE (community edition) here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
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.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×