Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add classes to all the widgets and labels #107

Closed
ghost opened this issue Aug 30, 2021 · 4 comments
Closed

How to add classes to all the widgets and labels #107

ghost opened this issue Aug 30, 2021 · 4 comments

Comments

@ghost
Copy link

ghost commented Aug 30, 2021

Hi,

I have implemented dark mode on my site so for that, I need to add classes as such on every form field and label.
dark:text-gray-100 dark:bh-gray-700

How can I achieve this?

@amitjindal
Copy link

@abhijeet-cn See this comment on how I did this. I am hoping this gets merged into the project and helps everyone.

#90 (comment)

@ghost
Copy link
Author

ghost commented Sep 3, 2021

Thanks @amitjindal it's really a much-needed feature.

@blasferna
Copy link
Contributor

blasferna commented Sep 3, 2021

@abhijeet-cn based on what i have seen you can add classes to widgets globally using CRISPY_CLASS_CONVERTERS in your settings.py. I don't know if it is supported by all widgets.

CRISPY_CLASS_CONVERTERS = {
    'textinput': 'dark:text-gray-100 dark:bh-gray-700'
}

A way to modify label classes is using FormHelper like this:

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Field

class BookForm(forms.ModelForm):
    class Meta:
        model = Book
        fields = '__all__'

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        # applying custom label class
        self.helper.label_class = "dark:text-gray-100 dark:bh-gray-700"
        self.layout = Layout(
            'name',
            'author',
            'publisher',
        )

Other way to use custom style is using CSSContainer, see #61

@GitRon
Copy link
Contributor

GitRon commented Feb 8, 2024

Since the user creating this issues has been deleted, I'll close this ticket.

@GitRon GitRon closed this as completed Feb 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants