Home > Software design >  How do I change the text color of a default UserCreationForm in Django?
How do I change the text color of a default UserCreationForm in Django?

Time:05-01

I'm working on a simple website using django and bootstrap. I've used the UserCreationForm class to make a standards registration page. But I'd like to make the texts a little darker so it's more legible and has a good contrast from the background image and mask. What'd be the best solution?

enter image description here

View module

def register(request):
    #if the request method is a  'get'
    #Yes initial data
    if request.method != 'POST':
        form = UserCreationForm()
    #no initial data
    #f the request method is a 'post'
    else:
        form = UserCreationForm(data=request.POST)
        if form.is_valid():
            new_user=form.save()
            authenticated_user = authenticate(username=new_user.username,
                                          password=request.POST['password1'])
            login(request, aunthenticated_user)
            return HttpResponseRedirect(reverse('my_websites:home'))
    context = {'form': form}
    return render(request, 'users/register.html', context)
                                          

bootstrap

{% extends "pages/base.html" %}
{% load bootstrap5 %}

{% block header %}
<div="container my-5">
  <div  style="background:url('https://wallpaperaccess.com/full/1708426.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  height: 100vh;">
    <div  style="background-color: rgba(251, 251, 251, 0.8);">
      <h2 > Register </h2>
      <form method="post" action="{% url 'users:register' %}"  style="max-width: 400px; margin:0 auto;">
        {% csrf_token %}
        {% bootstrap_form form %}
        {% buttons %}
           <button name="submit" >Register 
</button>
        {% endbuttons %}
        <input type="hidden" name="next" value="{% url 'my_websites:home' %}" />
      </form>
    </div>
  </div>
</div>

thank you for your time.

CodePudding user response:

It looks like you're using Bootstrap, which pre-defined a set of CSS classes you can use for colors.

Try changing your <h2 > Register </h2> tag to <h2 > Register </h2> - it will likely turn red.

The bootstrap_form tag allows you to pass parameters to control the CSS class attributes applied.

For example, try:

{% bootstrap_form form field_ %}

For available parameters you can pass, see the documentation: https://django-bootstrap-v5.readthedocs.io/en/latest/templatetags.html#bootstrap-field

For more information on how to use colors with Bootstrap, including defining your own color theme to use, see here: https://getbootstrap.com/docs/5.0/utilities/colors/ Good luck!

  • Related