Cosmetic changes to Phoenix Home Page

[nsf43]

I am just starting out with Phoenix.  I want to make some changes, but do not find anything in custom.css that deals with the Navbar. Can someone please point me to the proper place?

Thanks in advance!!

Nancy

[♥JcMagpie]

Make any chnages required using css in user.css  or install add-on and make changes in admin.

https://apps.oscommerce.com/buzoF&jcm-color-tweak-v1-1&p=2

 

[Heatherbell]

@nsf43
Simply add to user.css e.g. to change colour
.cm-navbar { background: #red !important; } 

[nsf43]

Thanks to both. Shall get to work!  I was looking for a "css" navbar reference, but did not see it.

[Heatherbell]

@nsf43
Open the user.css NOT custom.css - don't change anything there.
Your user.css will be an empty file when you start.
You add to the user.css to make all the cosmetic changes you want on your site.

[nsf43]

Additionally, I see, to the right, in admin "install modules (x)". Is it advisible to do all the installs?

[Heatherbell]

@nsf43
There are many optional modules you will see in different categories when you click the Modules menu e'g' Content, Nav Bar Modules etc.
Install modules as you require them. First things first.

Have you secured your shop and admin?

Have you 'loaded' your shop with categories and products (in Catalog menu)?

Have you configured your shop for your country language and currency?

Have you installed and configured shipping module?

Have you installed and configured payment module?

Ask for help if you need it! 

 

[ArtcoInc]

@nsf43

M

[nsf43]

Heatherbell - yes, I have done all those things (I believe correctly - but time will tell!) And yes, I understand about custom.css vs. user.css.

I know that once I feel I am making progress, I will be comfortable.  At the moment, however, "flounder" seems to be the operative word! There is sooo much to take in.

I am a good css person, but when I added your color (colour) addition to user.css, nothing changed. And I did upload user.css.

There are other issues such as: modules that I request to be on the "right" do not display. "Left and Home" work just fine.

[Heatherbell]

Beware of browser 'cached' pages.
You will sometimes need to force a page refresh for the changes to show on your browser.

[nsf43]

Wow, that has gotten me before!  I put cache code in whenever I am messing with "css". Can't believe I didn't think of it here. Clearly time for a break!

[nsf43]

There are other issues such as: modules that I request to be on the "right" do not display. "Left and Home" work just fine.

[Heatherbell]

Sorry I can't say why they are not  - they are working for me.
A nice cup of tea is called for! 

[Heatherbell]

I have found with some things that 'removing' and installing again helps - don't know if it will in this case but worth a try!

[nsf43]

Well, I think I have lost my mind.  I have put in cache code. I have put some outrageous things in user.css. I even copied all of Malcolm's code into the css.  NOTHING changes.  

.navbar,
.navbar-brand,
.cm-navbar

{ 
   font-family:"Courier New", Courier, monospace;
    background-color:#FF0000;
}

This is one of the things I tried.

I am using Phoenix.  Also, I am using the navbar "brand" just showing my site name for now.  Any of that make a difference?

[ArtcoInc]

@nsf43

Can you make CSS changes to anything else in your shop? Is the problem ONLY with the NavBar?

There has been reports of issues with the user.css file loading out of sequence ...

They seem to have come up with a solution, but they haven't said what it is ...

M

[Heatherbell]

So, first you have not put in !important as I showed in my example - it is important!

Second there is known problem in some servers as mentioned above and fixed in this update 1.0.2.5

 

[♥peterpil19]

Hi Nancy,

Some great advice above.

I understood that custom.css was deprecated in a recent version of Phoenix so I do not think you have the latest version installed.

Also, make sure to become very familiar with Bootstrap 4's  'shorthand' utilities: https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp

More generally, understanding Bootstrap 4 components and utilities will allow you to make lots of changes with ease.

Peter

 

[♥14steve14]

Make sure that your user.css file is the last one listed in your view source. Mine was first in the list not last, and there has now been a fix for this so look in the phoenix announcements thread if you are using Phoenix..

Also use the developer tools available with most browsers, I know chrome and firefox have them, to inspect an element to see what is controlling the area or item you want to change.