How to use the different stylesheets in the bootstrap version

[micdee]

After I posted it in another thread I was advised to start my own thread. So here it is:

 

Let  me start with I am a noob and no-no in scripting, programming etc. With the "old" oscommerce website I learned how to use the stylesheet to alter my website.

Now I needed to change the website and thought I better use the bootstrap version; easier to alter according many..

I guess it is the complete lack of knowledge about the bootstrap philosophy, because I have a hard time to find the files I need to use to copy the specific style I want to  change. I read about the tip to use the developer tool in firefox. 

This made it already a lot easier, but now I have a challenge (not a problem) which I was not able to overcome:

 

I know I have to make my personal adjustments in the user.css file.. But ofcourse you need to know what to use, so I use the developer tools in firefox to see what I need to copy to the user.css file...

 

I changed the panel header and font colors in the user.css and this works, but it does not work for the panel titles that are a link e.g:  REVIEWS or SHOPPING CART.

 

According to the developer tool the color of the link text (<a ref=...>) is done by the scaffolding.less file on line 58, but I have not yet found the scaffolding.less file ( the link which is shown is /catalog/ext/bootstrap/css/less/scaffolding.less .. well there is no map LESS in the CSS map.. and even copy/ paste the style element to the user.css file does not work in my case at least.

 

First of all I hope I posted this in the correct thread, second I hope someone can help me with this and point me in the right direction.

 

 

Below I copied the result of the developer tool when use 'inspect element' the panel title REVIEW

Between the brackets is the link which is shown on the right hand side in the developer tool

 

element {                                                      (inline ) --> meaning this defined on the page itself, but there is nothing.
}

a:focus {                                                        (bootstrap.css:1101) --> this is defined on line 1101 in bootstrap.css
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
a:focus, a:hover {                                          (scaffolding.less:58)  --> this is the colour which is used on the website
                  
    color: #23527c;                                                                    
    text-decoration: underline;
}
a {
    color: #337ab7;
    text-decoration: none;
}
a {
    background-color: transparent;
}
 

 

[micdee]

A reply by @ArtcoInc :

 

@micdee

 

A fundamental principle of CSS is that you can define something, than override it later, than override it again even later.

 

Bootstrap has it's own 'default' CSS files. The bootstrap version of osC has it's own CSS files (some of which overrides the default bootstrap CSS). Lastly, there is a User.css file in the /catalog directory of your bootstrap osC installation. This is the last CSS file osC calls, so anything you put in here will override ALL of the other CSS statements. *This* is where you put all of *your* CSS info. You do *not* want to change any of the other CSS files.

 

AFAIK, there is no Scaffolding.less file in the bootstrap osC installation.

 

Malcolm

[micdee]

@@micdee

 

A fundamental principle of CSS is that you can define something, than override it later, than override it again even later.

 

Bootstrap has it's own 'default' CSS files. The bootstrap version of osC has it's own CSS files (some of which overrides the default bootstrap CSS). Lastly, there is a User.css file in the /catalog directory of your bootstrap osC installation. This is the last CSS file osC calls, so anything you put in here will override ALL of the other CSS statements. *This* is where you put all of *your* CSS info. You do *not* want to change any of the other CSS files.

 

AFAIK, there is no Scaffolding.less file in the bootstrap osC installation.

 

Malcolm

 

@ArtcoInc,

Dear Malcolm,

 

Thank you for your reply. By starting to read about bootstrap and the use of css I also had the same idea as you had..

that the user.css file would be the prevailing stylesheet file, but AFAIK this is only the case when the user.css is refered to as last stylesheet file in a php page. But in this case the firefox developer tool mentions a scaffolding.css in a map which I can not find and that file is leading in the colour definition... Even though I have the same function copied and pasted in the user.css file and changed it.

 

Mic.

[ArtcoInc]

http://getbootstrap.com/css/#less

 

Bootstrap was compiled using less, but you do not need it to use bootstrap with osC. Any CSS definition in the compiled bootstrap CSS can be overwritten in the user.css file.

 

Malcolm

[♥kymation]

You may need to be more specific. For example, any color change to the "a" element would affect all links on your site. Proably not what you want. Try adding the enclosing element (found by looking at the HTML part of the Firebug window). For example, if you have

<div class="foo">
  <a href="//www.example.com">Example</a>
</div>

Then try targeting the link like this:

.foo a {
  color: red;
}

Regards

Jim

[♥14steve14]

I believe that in your post you wantted to change the colours of the columb box headers and the text. You changed the header colour but not the text. On my site I added into the user.css file

 

.panel-heading a {
  color: #ffffff;
}

.panel-heading a hover {
  color: #029cfe;
}

 

This changed just the a element in the header panels and left all other a elements as they were.

[♥John W]

Bootstrap does have customizer that you can experiment with for Bootstrap 3, but this is gone on BS 4.  You can find it at this link and I used it to change quite a bit and it's fairly easy to use as long as you know what hexidecimal colors to use.  Some aspects are a little more difficult.  It will build custom css files with all your changes in all the right places.  It's kind of like the jquery ui themeroller customizer.

http://getbootstrap.com/customize/
 

[micdee]

@@14steve14   &  @@kymation

 

Thanks for your suggestions. The specifying of the a for the panel-heading worked and I with this I could also solve another dilemma; 

the visibility of the breadcrumb by creating a -->  .breadcrumb a{ color:   }  )

But still what I do not really understand.. I had the (general) a element altered in my user.css file. Like Kymation and also Artcolnc stated I thought it would alter the colour of ALL of my URL links on the website..

But that also did not happen.. So I still do not exactly understand what the problem was, but it seems to be oke now..

 

@@John W I will check it out. Thanks

[♥bruyndoncx]

@@14steve14   &  @@kymation

 

Thanks for your suggestions. The specifying of the a for the panel-heading worked and I with this I could also solve another dilemma; 

the visibility of the breadcrumb by creating a -->  .breadcrumb a{ color:   }  )

But still what I do not really understand.. I had the (general) a element altered in my user.css file. Like Kymation and also Artcolnc stated I thought it would alter the colour of ALL of my URL links on the website..

But that also did not happen.. So I still do not exactly understand what the problem was, but it seems to be oke now..

 

@@John W I will check it out. Thanks

Isn't it about css specificity ? see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

[♥14steve14]

@@14steve14   &  @@kymation

 

Thanks for your suggestions. The specifying of the a for the panel-heading worked and I with this I could also solve another dilemma; 

the visibility of the breadcrumb by creating a -->  .breadcrumb a{ color:   }  )

But still what I do not really understand.. I had the (general) a element altered in my user.css file. Like Kymation and also Artcolnc stated I thought it would alter the colour of ALL of my URL links on the website..

But that also did not happen.. So I still do not exactly understand what the problem was, but it seems to be oke now..

 

@@John W I will check it out. Thanks

 

 

The trouble being is that there are many areas in the bootstrap version that may have their own css styles. It can be a pain at times, but using something like firebug with firefox will help immensely.

[micdee]

@@bruyndoncx. Thank you for the link.. I just read it very quickly and that what I got from it at this moment is the hightest detailed style element will be used.

and !important is also a way of giving priority to a style element in a certain stylesheet..

In that retrospect, I ran into a new challange .. changing the background colour of the footer....

This is set originally in the custom.css file. So I copied and paste it to my user.css file, altered the background color and the border color...

Uploaded the new user.css to the server and... yes.. no result... according to the developer tool and firebug.. the style is still inherited from the custom.css file.

 

In my coming spare time I will try to read more about bootstrap, css files etc. to become more familiar with the way it works and also how it is used in the oscommerce website.

 

@@14steve14

 

Thanks again for the advise. I just installed it and will see how it will help me.

[♥John W]

If your css files are being cached you will have to refresh your browswer after you upload.   While it's a little bit of a pain you can insure changes by adding numbers for ever change you  make like user2.css but you have to change any references also.  There were some things like panels that I changed in my user.css and if you like I'll post it for you to get ideas.

 

Bootsrap has a lot of capabilites and with a little work you can really adapt how you want your site to display.  Like showing less text if on a phone vs desktop and much more.

[micdee]

Now even when I add the !important text to it in the user.css file,

so it looks like this:

.footer {
  background: #f9f9ff !important;
  border-top: 2px solid #00000c0 !important;
}

still it is not used for styling the element... This way it makes it very hard to understand.

[♥John W]

can I see your site?

[micdee]

If your css files are being cached you will have to refresh your browswer after you upload.   While it's a little bit of a pain you can insure changes by adding numbers for ever change you  make like user2.css but you have to change any references also.  There were some things like panels that I changed in my user.css and if you like I'll post it for you to get ideas.

 

Bootsrap has a lot of capabilites and with a little work you can really adapt how you want your site to display.  Like showing less text if on a phone vs desktop and much more.

 

Although I thought of that aswell (caching) but in that case I would not have seen the other changes I made in the meanwhile either. Those changes I did see, so I think it would be strange that just this one alteration is not effective immediately.

I do not turn down any suggestion on how to change the website to my liking.. 

 

I already got my logo in the header and not underneath it. Now busy changing the colorscheme.

After that I need to get an (working) order editor installed which can also is capable of a VAT entry...

I need to get my tariff code part back in the product file.

[♥John W]

Okay, I see your problem, I think.  You have too many characters in your color.  I put it into Netbeans and it flagged it right away.  Upone removing one it works.  Try that.

[micdee]

@@John W, 

 

As far as I've seen you mean the color coding for the border was not correct, but does this influence the whole element?

I know the background colour is correct since I have altered the custom.css just to see if it would work and in that case the background colour was changed.

 

Website is visible yes.. if you mean if you can see it:

 

lc4pc.eu/webshop

[♥John W]

If you have a mistake before or after it may skip that element.  did you try correctling the following?

border-top: 2px solid #00000c0 !important;

[micdee]

Yes I did. I get somehow the idea that the user.css does not effect the footer at all.. but I when I opened the footer.php I did not find any reference to any stylesheet and I am not so familiar with bootstrap yet that I know where to look elsewhere, which files are looked at in the footer.php...

 

I also tried to change the footer-extra element via user.css and that element is also not effected by this change... I still see the style elements used from the custom.css  in firebug.

[♥John W]

User.css affects everything and that's how cascading style sheets work, but I found another error in your user.css that's causing problems and it's before your footer element.  Find this in your user.css and you willl notice it's missing the closing bracket.  Try closing that.  That's why I asked if I could see your site so I could look for the cause of the problem. 

.btn-info {
    color: #fff;
    background-color: #dfe0ff;

[micdee]

:- ......

Thank you very much John... :thumbsup: :thumbsup:

 

Next time I will go through the css file more thoroughly..

 

I understand the problem: because of that missing bracket everything after it is not readable for webpages..

[♥John W]

We all have our learning moments.  If you use the built in built in web developer tool in FF there is a console that will show you errors it finds and you can use that to look for issues.  It will be a little different than other browsers on some but you might find it useful.

 

I actually copied your user.css and put it in a css file in Netbeans, which flagged an error at end of file.  I just backed up to see where it was.  Netbeans is a free IDE platform but it has a learning curve of its own.

[Sam-AUST]

Sorry to jump in, but is there a way to change the color of the header in the bootstrap version? As in, the full area above the breadcrumb, including the area the logo appears?

[♥John W]

In your user.css you can add or change how it displays.  This is how I did it, so you can try this and then play wiht colors.

.navbar-inverse {
    background-color: #314b0e;
    border-color: #152006;
}

[Sam-AUST]

@@John W - I just tried it, it didn't change a thing at all on my site. I even tried your exact colors and nothing changed.