ArtcoInc Posted July 27, 2019 Share Posted July 27, 2019 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 More sharing options...
ArtcoInc Posted July 27, 2019 Author Share Posted July 27, 2019 Nevermind ... I found it ... 🙄 Link to comment Share on other sites More sharing options...
ArtcoInc Posted July 28, 2019 Author Share Posted July 28, 2019 *** 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 More sharing options...
Heatherbell Posted July 28, 2019 Share Posted July 28, 2019 @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? Link to comment Share on other sites More sharing options...
ArtcoInc Posted July 28, 2019 Author Share Posted July 28, 2019 @Heatherbell I haven't gotten there yet 🤓 Link to comment Share on other sites More sharing options...
♥JcMagpie Posted July 28, 2019 Share Posted July 28, 2019 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 More sharing options...
ArtcoInc Posted July 28, 2019 Author Share Posted July 28, 2019 @Heatherbell https://getbootstrap.com/docs/4.0/utilities/display/ Malcolm Link to comment Share on other sites More sharing options...
ArtcoInc Posted July 28, 2019 Author Share Posted July 28, 2019 Oh, and if anyone wants to change the color of the 'hamburger' button ... https://stackoverflow.com/questions/24080462/how-to-change-bootstrap-toggle-navigation-color HTH M Link to comment Share on other sites More sharing options...
Heatherbell Posted July 29, 2019 Share Posted July 29, 2019 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 More sharing options...
ArtcoInc Posted July 29, 2019 Author Share Posted July 29, 2019 @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 Link to comment Share on other sites More sharing options...
♥14steve14 Posted July 30, 2019 Share Posted July 30, 2019 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 More sharing options...
ArtcoInc Posted July 30, 2019 Author Share Posted July 30, 2019 @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 More sharing options...
Heatherbell Posted July 30, 2019 Share Posted July 30, 2019 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 More sharing options...
♥14steve14 Posted July 30, 2019 Share Posted July 30, 2019 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 More sharing options...
Hotclutch Posted July 31, 2019 Share Posted July 31, 2019 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 More sharing options...
♥14steve14 Posted July 31, 2019 Share Posted July 31, 2019 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 More sharing options...
burt Posted July 31, 2019 Share Posted July 31, 2019 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 More sharing options...
nsf43 Posted September 19, 2019 Share Posted September 19, 2019 I found someone else having the issues as I with user.css. However, my screen suddenly refreshed and I lost the thread. Can someone get me back there, please? I think the author was Steve - something? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.