Anyone know of a guide with the code to change box colors in Bootstrap Oscommerce?

[♥JcMagpie]

This question about changing elements gets asked a lot on this forum.
The problem is that the normal tools in chrome and firefox do not easily
provide all the css needed.

To make things simpler you should install this extension to your chrome
browser.

CSS Used

https://chrome.google.com/webstore/detail/css-used/cdopjfddjlonogibjahpnmjpoangjfff

This makes getting the required css much easer.

So lets say you want to find the css relating to the top nave bar?

We simply go to developer tools in chrome and pick the navbar by using the select element tool on the right hand side of the lower panel.

Then select CSS Used from the left side

Then as soon as you pick a element shown in the code (see below) all the css elements relating to that element are shown in the left had side window.

You simply copy these to your user.css and make any changes you need. Only copy the parts you need to change. It’s as simple as that.

Now there will be times when you change one thing and it changes another! This is because the share the same element. The only way around this is to go to the element you need to change and give is another ID.

For example

<button type="button" class="btn btn-primary">Primary</button>

This is used in many places so if you change it all will change.

So if you need to change just one say the login button

find its code
includes/languages/english/modules/content/index/cm_i_customer_greeting.php

The code your interested in is in red

const MODULE_CONTENT_CUSTOMER_GREETING_GUEST = 'Welcome <strong>Guest!</strong> Would you like to <a role="button" class="btn btn-info btn-xs" href="%s">log yourself in</a> or would you prefer to <a role="button" class="btn btn-info btn-xs" href="%s">create an account</a>';

All we do is give this button a unique id,---- id=”log2”

<a role="button" class="btn btn-info btn-xs" id=”log2” href="%s">log yourself in</a>

Save that change and then add the colour required to your user.css like this,

#log2 {
color: #fff;
background-color: #FF0000;
border-color: #46b8da;

and you will have,

It’s the same for any change you need to make.

 

 

 

[burt]

1 hour ago, JcMagpie said:

So if you need to change just one say the login button

const MODULE_CONTENT_CUSTOMER_GREETING_GUEST = 'Welcome <strong>Guest!</strong> Would you like to <a role="button" class="btn btn-info btn-xs" href="%s">log yourself in</a> or would you prefer to <a role="button" class="btn btn-info btn-xs" href="%s">create an account</a>';

All we do is give this button a unique id,---- id=”log2”

...

It’s the same for any change you need to make.

Or (note: untested), don't do any of that and instead ...  know that .css is targetable;

div.cm-i-customer-greeting .btn:first-of-type {
  color: #fff;
  background-color: #FF0000;
  border-color: #46b8da;
}

Or, for changing the colour of a button (use bootstrap, piece changed is in red);

const MODULE_CONTENT_CUSTOMER_GREETING_GUEST = 'Welcome <strong>Guest!</strong> Would you like to <a role="button" class="btn btn-danger btn-xs" href="%s">log yourself in</a> or would you prefer to <a role="button" class="btn btn-info btn-xs" href="%s">create an account</a>';

 

[♥JcMagpie]

8 minutes ago, burt said:

div.cm-i-customer-greeting btn:first-of-type { color: #fff; background-color: #FF0000; border-color: #46b8da; }

Not working! but would be good if it did.

Danger is also good solution but only if you whant to use the theme colors.

My point was not how you change but how you go abouut finding what to change.

[burt]

6 minutes ago, JcMagpie said:

Not working! but would be good if it did.

Danger is also good solution but only if you whant to use the theme colors.

My point was not how you change but how you go abouut finding what to change.

Your point would be valid, except that you have a large hole in your knowledge (targetable css).

As for "not working!" - I put "untested" for a reason.  Play with it.

The idea of .css that works for one thing but not another is a fundamental weapon in a webmasters armoury.  I've covered this in the past on a tutorial type post, see if you can find it...it might be hard to do so as it was a while back.  But in general;

<p>abc 123</p>
<div class="whatever">
  <p> def 456</p>
  <p> ghi 789</p>
</div>
<p>jkl 999</p>

with this .css

div.whatever p { background: red; }

would affect two of the 4 paragraphs, the two in the whatever div.

Apply same concept all over shop-side osCommerce as most (all?) containers have a class that can be used for targetting.

[♥JcMagpie]

This works

div.cm-i-customer-greeting a.btn:nth-of-type(even) {
  color: #fff;
  background-color: #FF0000;
  border-color: #46b8da;
}

And yet again we go off at a tanget! My post is not about how to make the change its about finding what you need to change. As that was the question asked.

[burt]

4 minutes ago, JcMagpie said:

This works

div.cm-i-customer-greeting a.btn:nth-of-type(even) {
  color: #fff;
  background-color: #FF0000;
  border-color: #46b8da;
}

And yet again we go off at a tanget! My post is not about how to make the change its about finding what you need to change. As that was the question asked.

No tangent.  Simply giving you extra knowledge so that you don't continue to give advice that is not correct.

[♥JcMagpie]

16 minutes ago, burt said:

Simply giving you extra knowledge so that you don't continue to give advice that is not correct.

Nothing wrong in what I stated, look at any html guide and it will instruct you to simply apply a unique id to an element you want to effect.
Again all the other could be wrong and you right!

Anyway enjoy the rest of you weekend.😊

[burt]

You can do it any way you like, go right ahead.  Go ahead & change core code with all these IDs and Class's....

• And then when you or the person you are giving advice to needs to update and has all these micro changes...they will find it difficult.
  Unless have remembered these micro-changes from months/years ago!  Unlikely...

Or...

• Do it the easy way, that's built in, that Raiwa and I came up with, that requires just a little more understanding of .css
  And have no problems when updating in the future.

I know it is very hard to step outside of ones comfort zone, it's something I struggle with when learning new stuff as well.

[♥JcMagpie]

16 minutes ago, burt said:

Go ahead & change core code with all these IDs and Class's....

Like you never make core changes! 😂 So why not help the person asking the question and post your method? one that actualy works. I'm sure he will prefer to use the right method.  Then he will not have to use my poor alternative 🤣 Me I'll live with the monster I have made of my sites.

 

[burt]

Of course core changes need to happen sometimes.  It's unavoidable, we have code that's almost 20 years old...
There's no way around that old code sometimes.  Everyone knows that. 

Sometimes things are changed for the better (did that just today in fact, but that's something not yet in the public eye).

But where core code doesn't have to be changed - why change it ??  That simply doesn't make any sense...  That's all.  

As for giving direct answers, all the info is in this thread. 
All the Poster needs to do is read and apply, learn from mistakes and trial & error.

Give a man a fish...and all that.

 

[♥JcMagpie]

😊 Ok you win let the fishing commence, I hope the all have rods or nets.😁

[♥JcMagpie]

So just to avoid any confusion, on the greeting example to change just first button use

div.cm-i-customer-greeting a.btn:nth-of-type(1) {
  color: #fff;
  background-color: #FF0000;
  border-color: #46b8da;
}

 

To change just the second button use

div.cm-i-customer-greeting a.btn:nth-of-type(2) {
  color: #fff;
  background-color: #FF0000;
  border-color: #46b8da;
}

 

This way you will not need to add an id to the code. 😊