Formatting question: changing fonts and page margins

[♥peterpil19]

Hi,

 

A few couple hopefully simple formatting related questions:

 

1. Any easy way to change the default fonts? I want the defaunt fonts to be "work sans". Changing font-families in user.css or the bootstrap css files doesn't seem to have any effect.

 

2. Additionally, I have my store configured to container-fluid.  Is there a simple way to remove the spacing which appears on right and left of screen so that e.g. I can have an image running from one end of the screen to the other in the same way the nav bar does not have any left/right margins?

 

Thanks,

Peter

[MrPhil]

What osC version are you running? The use of 'user.css' is fairly recent.

 

As far as changing the default fonts goes, use a browser debugger (such as Firebug on Firefox) to determine what selector is being used to set the current font family. Then you can use that selector in user.css to set an overriding font selection. If right now you're just setting a font for "body", for example, it's probably being overridden by a more specific selector (such as a class) somewhere in the CSS. Don't change the system (or bootstrap) CSS files -- do it in user.css.

[♥peterpil19]

Hi,

 

Thanks,

 

I've got 2.3.4 responsive edge installed.

I've made many many changes already to user.css and have gotten the hang of it.

 

HOWEVER,  I am struggling to make any global changes to styles. I found this to be the most difficult of any other tasks is setting up my website. Even making changes to the actual layouts has been easier.

 

An example of this. The default is that the page heading of each page uses h1 heading with a page-heading class' as follows:

<div class="page-header">
  <h1><?php echo HEADING_TITLE; ?></h1>
</div>

I don't like the default garish Oscommerce page-headings. Aside from changing the font, letter spacing, I also want to change the font-size. I don't want to open up each document and change h1 to be h2 which is messy and sounds like what I will end up doing if I can't figure out the right way to do it.  I would assume that you could change h1 to be a h2 size globally. e.g, in user.css:

.h1 {


font-size: 50%;

}

However, creating a h1 in user.css does not seem to work. I can't seem to override  h1/h2/h3 and any default class for some reason even when flagging it as !important in user.css. Happy to be shown that this is not the case as it will save me considerable time.

 

So, I try and at least modify the classes (when they are used).

 

Refer below where I have flagged everything as !important and changed font-size to 50%.

In the case below, although margins and letter-spacings work,  the font-size, font-weight and font-family have no effect on page-headings.

This makes no sense to me. 

.page-header {

    text-transform: uppercase!important;
    letter-spacing: 0.2em !important;
    font-family: "Work Sans","HelveticaNeue","Helvetica Neue",sans-serif !important;
    line-height: 1.2 !important;
    margin: 17.5px 0 17.5px !important;
    font-weight: 400 !important;
    font-size: 50% !important;
  }

If anyone has any feedback on how they would make singular changes to a particular element globally (without going to e.g. theme roller and having to redefine the entire theme), it would be helpful for my understanding.

 

Answering what I have done incorrectly in the above example would satisfy my immense curiosity on why it does not work, and perhaps establish why I have not been able to make global changes.

 

For feedback, from the point of view of a non-programmer, I've found this version of osCommerce far more difficult to make stylesheet changes than the 2.2. version I used over 10 years ago where it was laid out all in one document. Thank God for the many quality add ons and generous time people give on this forum, otherwise I would have been completely stuck!

 

Peter

[Dan Cole]

@@peterpil19  Peter are you trying to style .h1 instead of h1? Try...

 

h1 {
     font-size: 50%;
}

 

Dan

[MrPhil]

.h1 would be the selector for a class named "h1"! As in, <tagname class="h1">. You want to specify a selector for a tag or element <h1>, which would just be h1. It sounds like you need to take some free basic online courses on how to use CSS, such as W3Schools.

[♥peterpil19]

@@Dan Cole

@@MrPhil

 

Thanks gents,

 

That is embarrassing re the h1, that now works... :blush:

 

I've been spending lots of time on the w3schools website and managed to quite a bit of more advanced stuff for a non-progammer with my formatting in updating my website with latest version of osCommerce-  you can have a look at www.ancientcointraders.com - but I just can't believe I somehow missed something this fundamental...

 

What about the page-header - any reason why from what you see above, why what I have entered into user.css doesn't work for font-size?

 

Peter

[Dan Cole]

@@peterpil19 The h1 definition is probably over riding it...you should use the firefox or chrome inspector options to see what css rules are in play.  One of those tools will become your best css friend. 

 

Dan

[♥peterpil19]

Thanks Dan, appreciate the tip :)

 

Peter