Jump to content

Recommended Posts

Sorry for the long post but no matter what changes I make to the user.css file on my latest version of Phoenix nothing changes. I have refreshed the cache on my hosting account by clicking the button in cpanel. I have refreshed the cache on my browser by using Ctrl +f5  and a few other suggested ways.

I wanted to change the h1 tag which is the main page headers on nearly every page in the site from what it is in bootstrap to something different. so entered into the stylesheet. I also what to change the size and colour of other h tags but again nothing changes.

.h1 h1 {
  font-size: 30px;
  color: #0099ff;
}

Nothing changed.

I have also tried important to it and nothing changed.

I have checked that in the hooks-shop-sitewide-styleSheets file and its in there in the right order assuming that the one listed last is selected last.

Using the inspect element feature in Firefox the user css code is crossed out which means that something later than the user.css is being used and that is the _typescss is currently controlling the font size and the colour change is not listed anywhere.

I have tried removing the user.css file and creating  anew one on my hosting account and that does not work either.

Am I doing something wrong?


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
Posted (edited)
h1 {
  font-size: 30px;
  color: #0099ff;
}

And ctrl+shift+r to force refresh your browser cache.

Using .h1 h1 { would not match anything, unless it was something like this;

<div class="h1">
  <h1>test</h1>
</div>

 

Edited by burt

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
1 hour ago, 14steve14 said:

I also what to change the size 

Try :

.display-4{font-size:200%!important}

:heart: osCommerce

I am using osCommerce CE Phoenix.

Get the latest Responsive osCommerce CE (community edition) here

 

Share this post


Link to post
Share on other sites
19 minutes ago, Rwe said:

Try :


.display-4{font-size:200%!important}

What does that do to any of the h tags that I want to change.


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
6 minutes ago, 14steve14 said:

h tags that I want to change.

It will make them smaller, i thought you wanted that. 


:heart: osCommerce

I am using osCommerce CE Phoenix.

Get the latest Responsive osCommerce CE (community edition) here

 

Share this post


Link to post
Share on other sites
1 minute ago, Rwe said:

It will make them smaller, i thought you wanted that. 

Sorry for sounding so thick, but will that change a standard < h6>  tag in the product description to something smaller, or make all the h tags smaller. If so how does one change the colours. Changing in the user css file changes nothing.


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
2 hours ago, burt said:

h1 {
  font-size: 30px;
  color: #0099ff;
}

And ctrl+shift+r to force refresh your browser cache.

Using .h1 h1 { would not match anything, unless it was something like this;


<div class="h1">
  <h1>test</h1>
</div>

 

Gary nothing changes still. When I inspect the element in either firefox or Chrome browsers and manually change any of the settings the styles change, but not when changing the user.css file. I have tried clearing browsers and even tried on a different computer.

Strange on this is.

 


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
28 minutes ago, 14steve14 said:

will that change a standard < h6>  tag

No only for the main h1 tags, sorry i thought you where looking for this.


:heart: osCommerce

I am using osCommerce CE Phoenix.

Get the latest Responsive osCommerce CE (community edition) here

 

Share this post


Link to post
Share on other sites

You could try this:

Quote

.h1, h1 {
    font-size: 4.5rem !important;
}

Note the !important and change 4.5rem to your needs

 

Share this post


Link to post
Share on other sites

At risk of teaching you to suck eggs...ensure that you are uploading changed user.css to correct location, and that you haven't protected user.css by changing chmod.  I did that once and wondered for an hour why things were not changing...

All else fails, throw me your URL so I can take a look...


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

May be worth doing a search on your user.css as you may have h1 defined in other places, easy to miss if the user.css is long. it will cascade to the last settings for h1


 

Share this post


Link to post
Share on other sites
1 hour ago, JcMagpie said:

May be worth doing a search on your user.css as you may have h1 defined in other places, easy to miss if the user.css is long. it will cascade to the last settings for h1

@JcMagpie Thanks. I have tried with a blank user.css with only a h1 css on it and still nothing changed.

1 hour ago, burt said:

At risk of teaching you to suck eggs...

@burt Tried that. Even tried removing everything and just adding a simple bit direct on the server. Dont worry about teaching me to suck eggs.

1 hour ago, azpro said:

You could try this:

Note the !important and change 4.5rem to your needs

@azpro for some reason you are the star. That worked and adding something similar for the other h tags also works. It did look like I may have missed out a comma, but I did try using just H6 with and without a . before it and still nothing changed.

Saying that it may have also been the help request I sent to my hosts as I believe that their cache clearing was not working as sometimes even just changing text didn't show.

Hopefully the next change will not take me all day between getting work done to change. Thanks for everyone's help.


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

I has been pointed out that the user.css file is called before the bootstrap files, rather than after. Viewing the source of the page I see

<!-- stylesheets hooked -->
<style>* {min-height: 0.01px;}.form-control-feedback { position: absolute; width: auto; top: 7px; right: 45px; margin-top: 0; }@media (max-width: 575.98px) {.display-1 {font-size: 3rem;font-weight: 300;line-height: 1.0;}.display-2 {font-size: 2.75rem;font-weight: 300;line-height: 1.0;}.display-3 {font-size: 2.25rem;font-weight: 300;line-height: 1.0;}.display-4 {font-size: 1.75rem;font-weight: 300;line-height: 1.0;}h4 {font-size: 1rem;}}</style>
<link href="user.css" rel="stylesheet">
<style>@media (min-width: 576px) {.card-group > .card.is-product {max-width: 50%;}.card-deck > .card.is-product {max-width: calc(50% - 30px);}.card-columns {column-count: 2;}} @media (min-width: 768px) {.card-group > .card.is-product {max-width: 33.333333333333%;}.card-deck > .card.is-product {max-width: calc(33.333333333333% - 30px);}.card-columns {column-count: 3;}} @media (min-width: 992px) {.card-group > .card.is-product {max-width: 25%;}.card-deck > .card.is-product {max-width: calc(25% - 30px);}.card-columns {column-count: 4;}} @media (min-width: 1200px) {.card-group > .card.is-product {max-width: 25%;}.card-deck > .card.is-product {max-width: calc(25% - 30px);}.card-columns {column-count: 4;}}</style>
<!-- fa hooked -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" crossorigin="anonymous">
<!-- bs hooked -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Shouldnt the user.css stuff be after all the other bits. If so how do we change the sort order of the hooks?


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

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

@burt It was John that contacted me for more details. Thought a post here may generate a bit more help or at the very least a few ideas.


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

user.css should be loaded after the bootstrap css

to achieve what you asked in the first post is a simple matter of putting <h1 class="h6">Heading Here</h1>

 

Share this post


Link to post
Share on other sites
59 minutes ago, 14steve14 said:

@burt It was John that contacted me for more details. Thought a post here may generate a bit more help or at the very least a few ideas.

I think John has come up with the solution.  Could you liaise with him and test it on your live site, thank you.


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

@BrockleyJohn What ever you did has sorted it.

@burt thanks for releasing the fix so quick. CSS changes now work.


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

Big up to @BrockleyJohn who did all the investigating and all the fixing.  TY John.


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

Where is John's solution to the user.css problem, I am anxiously awaiting that solution! I've been messing with this for 3 days....

Share this post


Link to post
Share on other sites

@nsf43

Can you do a View Source for your site? Look to see if your user.css file is called before or after the other stylesheet calls.

<!-- stylesheets hooked -->
<style>* {min-height: 0.01px;}.form-control-feedback { position: absolute; width: auto; top: 7px; right: 45px; margin-top: 0; }@media (max-width: 575.98px) {.display-1 {font-size: 3rem;font-weight: 300;line-height: 1.0;}.display-2 {font-size: 2.75rem;font-weight: 300;line-height: 1.0;}.display-3 {font-size: 2.25rem;font-weight: 300;line-height: 1.0;}.display-4 {font-size: 1.75rem;font-weight: 300;line-height: 1.0;}h4 {font-size: 1rem;}}</style>
<link href="user.css" rel="stylesheet">
<style>@media (min-width: 576px) {.card-group > .card.is-product {max-width: 50%;}.card-deck > .card.is-product {max-width: calc(50% - 30px);}.card-columns {column-count: 2;}} @media (min-width: 768px) {.card-group > .card.is-product {max-width: 33.333333333333%;}.card-deck > .card.is-product {max-width: calc(33.333333333333% - 30px);}.card-columns {column-count: 3;}} @media (min-width: 992px) {.card-group > .card.is-product {max-width: 25%;}.card-deck > .card.is-product {max-width: calc(25% - 30px);}.card-columns {column-count: 4;}} @media (min-width: 1200px) {.card-group > .card.is-product {max-width: 25%;}.card-deck > .card.is-product {max-width: calc(25% - 30px);}.card-columns {column-count: 4;}}</style>
<!-- fa hooked -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" crossorigin="anonymous">
<!-- bs hooked -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

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

Share this post


Link to post
Share on other sites

Yes. And style sheets are first.  But there are several places in the code where "Stylesheets" come first. I'm trying to fix them one at a time, but I don't get a warm fuzzy with my code changes.

Share this post


Link to post
Share on other sites

sorry - I left "user" out of  my reply.

The first usage is now OK, but the page is a mess. So maybe the others do matter? Or maybe I changed so much trying to get ANYTHING to work, that I need to go back to square one and redo.  Is your site working properly now?

Share this post


Link to post
Share on other sites

So, I backed out all my changes. Viewed the source and user.css is still last!!  But, my user.css changes don't work.  I think I should call it a day!

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

×