Multiple Classes

User 2806889 Photo


Registered User
64 posts

I'm having trouble understanding how to work with an object having 2 classes. For instance, in the Tea template, the text link has 2 classes assigned for the link on the current page (nav-link and current). If I make a change on the text link, how can I choose which class is being changed? Also, how do I add a new class to an object that already has one class assigned to it? Thank you for your time.
User 232214 Photo


COO
827 posts

If an element with multiple classes is selected, and the 'Apply to' drop down is on 'class', the styles will be applied to the class combination. If you only want it applied to a single class, select the element that is using only that class. The style will update for the element that has that class name as one of the classes as well, unless that specific style was applied to the class combination.

It is explained here in a bit more detail as well: http://www.coffeecup.com/help/articles/ … le-classes

Hope that makes it clear. If not, we have to do a better job in explaining it :P
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 379556 Photo


Registered User
1,583 posts

I've not yet experimented with multiple classes in RSD, but am coming to think the following -

1. Giving an element a single class name will probably save to that class in main.css all the RSD settings of that element at the time.
2. If one tried to set another class within RSD there could easily be confusion about priorities.
3. That I would therefore wish to restrict my use of multiple classes to classes set in my own custom.css file or the like.
4. If, for example, I had multiple paragraphs over various pages using a variety of fonts, indents, border styles etc., I guess it could be useful to set up in the custom.css file:
a. separate classes for each font used;
b. separate classes for each indent amount used;
c. separate classes for each border style used.
4. My supposition is that I could then, for each paragraph, choose a selection of the above classes (i.e. use multiple classes) to match what was wanted, and so save setting up numerous single classes, each class having a particular combination of the styles mentioned.

Is the above on the right track, or is there a much better way of using multiple classes please?

Frank
User 271657 Photo


Ambassador
3,816 posts

Frank, try to think "big picture" first, before getting too specific with your classes.

For example, if your <p>s are usually left-aligned, but you might need some to be right-aligned – maybe some photos or <h> tags might need to be right-aligned as well? Create a .right class to use on any element.

For fonts, set an overall <p> style (helvetica, black, 1.2em....), then if certain paragraphs need a different look, create that class, something like p.promotion (georgia, red, 3em, italic...)

So if you had a special offer that stays to the right of the page you would have p class="promotion right">.
With the above example, if you knew all your promo items would be on the right of the main text, you could create a .sidebar class to handle the position (img & text), font, borders, etc., so – one class could cover all aspects.

If you plan your design in advance, make note of what you need so you don't end up with a lot of nit-picky classes/IDs.
For example; an <h3> that appears as black text on white. What if the footer is black? And I want it smaller than the main body h3? Also, I want just the <h3> to be centered. I could do something like: h3 class="white smaller centered">, but I could just a create a single footer h3 class that would be more efficient. If I wanted to do the same for footer paragraphs, I could use that for both: footer h3, footer p {...} (making the font size smaller by percentage so it would work for both elements without having to add yet another class).

If you're starting with a template in RSD, or even from scratch, you could use the placeholder text & images to give you an idea of what you'll need 'class-wise'. You shouldn't need to add a lot of multiple classes to get your basic design in place.
Then you can add only what you really need, and keep it easier to manage. :D

I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 379556 Photo


Registered User
1,583 posts

Thanks for that, Paintbrush.

I gather therefore that
a. the use of multiple classes is indeed for classes set in one's own custom.css etc. files;
b. that items 4 and 5 in my previous post (whoops - I had wrongly typed 4 instead of 5 in that post) would work, but would often create unnecessary complexity: one class covering multiple styling matters will often be more efficient.
c. careful planning should help in making choices regarding these issues.

I intend to experiment accordingly.

Thanks again.

Frank
User 271657 Photo


Ambassador
3,816 posts

Experimenting is good, and RSD makes it easy.
CSS is fun once you get the hang of it :D
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2806889 Photo


Registered User
64 posts

Thank you very much for that info. Much appreciated.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.