Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Quick question - bootstrap wells - multiple classes?


peterpil19

Recommended Posts

Hi,

 

I know this is a CSS question but I figured it is a slow week in the support forum and this is a really quick question.

 

I want to have different bootstrap well styles on my site. I can modify the bootstrap well class in user.css so its contents are italicised as follows:

.well {
  font-style: italic;
}

Doing this however modifies the well permanently wherever it appears.

What if I want to use multiple well classes. For example I might want one whose text is italicised as above, and another which has different background colour.

 

Can you actually create multiple well classes in user.css? If so, how?

Or is it better to simply define the changes in the .php files not user.css with e.g. 

<div class="well" style = "font-style: italic;">

Thanks

 

Peter

 
 

CE PHOENIX SUPPORTER

Support the Project, go PRO and get access to certified add ons

Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design.

Download the latest version of CE Phoenix from gitHub here

Link to comment
Share on other sites

<div class="well">Well #1</div>

  <div class="well well-custom">Well #2</div>
  
  <div class="well-custom">Well #3</div>
  
  <style>    
    .well-custom {padding: 20px; background: yellow;}
    .well.well-custom {background: salmon;}
  </style>
In the above;

 

Well #1 is the standard bootstrap well.

Well #2 is a well with a fetching pink background

Well #3 is a div that is not a well, yet looks like a well...with a yellow background.

 

Notice that both #2 and #3 use .well-custom yet the .css tells it to do different things...1 is pink, the other yellow.

 

You can chain css like so:

 

.well - target all divs with class well

.well.well-custom - target all divs with BOTH class well AND class well-custom

.well-custom - target all divs with class well-custom

 

Note further that css cascades, so it is possible that you target (say) well-custom and this also affects well well-custom

 

It gets complicated quickly.

Link to comment
Share on other sites

@@peterpil19,

 

add and define a second dependant class called for example "italic" to all well elements you wish to apply it:

.well .italic{
  font-style: italic;
}
<div class="well italic">
Link to comment
Share on other sites

you can create as many in as many variations you want :

<div class="well italic fontfam-arial etc">

.well.italic{
    font-style: italic;
}
.well.fontfam-arial{
    font-family: 'Arial';
}
well.etc{
    etc: etcetc;
}

Link to comment
Share on other sites

@@peterpil19,

 

add and define a second dependant class called for example "italic" to all well elements you wish to apply it:

.well .italic{
  font-style: italic;
}
<div class="well italic">

 

Will not work like that unless you put the class in a child of well.

<div class="well">...........
    <div class="italic">........
    
    </div>
</div>

@@peterpil19

@@raiwa

 

check sample: http://jsfiddle.net/mjdbbpr7/

Link to comment
Share on other sites

Perfect,

 

Thanks everyone!

 

I've been doing things the hard way not realising you can create different variations of a class in this way!

 

Peter

CE PHOENIX SUPPORTER

Support the Project, go PRO and get access to certified add ons

Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design.

Download the latest version of CE Phoenix from gitHub here

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...