♥peterpil19 Posted March 3, 2017 Share Posted March 3, 2017 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 More sharing options...
burt Posted March 3, 2017 Share Posted March 3, 2017 <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 More sharing options...
♥raiwa Posted March 3, 2017 Share Posted March 3, 2017 @@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"> About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
oscMarket Posted March 3, 2017 Share Posted March 3, 2017 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 More sharing options...
oscMarket Posted March 3, 2017 Share Posted March 3, 2017 @@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 More sharing options...
♥peterpil19 Posted March 4, 2017 Author Share Posted March 4, 2017 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.