Looking for ways to incorporate both external and internal styling using jQuery and CSS in my template?

I've been working on a django project for a while now, and I'm facing some challenges with getting external and internal CSS to work. Only inline CSS seems to be functioning properly. I have two questions:

  1. How can I get external or internal CSS and jQuery to work? I tried running the collectstatic command, added STATIC_URL, STATIC_DIR, etc., and included the CSS and jQuery file paths in my HTML.

  2. How can I enhance the appearance of my registration/login forms? I attempted to use django_crispy_forms but did not achieve the desired outcome.

Thank you in advance for your assistance.

settings.py
    import os

# Build paths within the project using: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATE_DIR = os.path.join(BASE_DIR, "templates")
STATIC_DIR = os.path.join(BASE_DIR, "static")
MEDIA_DIR =  os.path.join(BASE_DIR, "media")

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

AUTH_USER_MODEL = "website.User"

...

main html file
...

my registration page html
...

View my login page design here

Desired visual result - aiming for the login page and registration to resemble this

jqueryhtmlcssdjangodjango-crispy-forms

Answer №1

To organize your CSS files, create a css folder within your static directory. Next, link it in your base.html file by adding the following code inside the head tag (assuming your CSS file is named custom.css)

<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}"/>

Ensure that the necessary settings are configured in your settings file as shown below:

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static")

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media")

CRISPY_TEMPLATE_PACK = 'bootstrap4'

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Javascript and Node.js to send a JSON request

While browsing through this particular question, I came across a method in node.js to distinguish between html requests and json requests: app.get('/route', function (req, res) { if (req.is('json')) res.json(data); else if (req ...

javascriptjqueryjsonnode.js

Getting JSON data from an API using $.ajax

Currently, I am working on creating a random quote machine. To start off, I wrote the following HTML code to outline the necessary elements: <div id="quoteDisplay"> <h1 id="quote">Quote</h1> <h2 id="author">- Author</h2> ...

javascriptjqueryjsonajaxapi

Having trouble getting the vertical menu animation to work with jQuery

Essentially, I am facing an issue with a <nav> element that is supposed to expand from left to right upon mouseover. However, sometimes when quickly moving the cursor over and then out of the element, it expands without animation, which should not be ...

jqueryhtmlcsstwitter-bootstrapjquery-animate

Navigate through JSON data to uncover the tree structure path

In my project, I am working on creating a treeview user interface using the JSON provided below. I have included properties such as node-id and parentId to keep track of the current expanded structure. Next, I am considering adding a breadcrumb UI compone ...

javascriptjqueryangularjs

A guide on aligning a CSS item perfectly in the center using absolute positioning

I have been searching for a solution to my problem, but all I found were answers that addressed similar issues in a slightly different way. My challenge involves placing multiple smaller images on top of a larger background image. To achieve this, I utili ...

htmlcsscss-position

The Bootstrap 3 Navbar displays a #EEEEEE color when a link is hovered over

I have not specified a hover color in the stylesheet for links to be #EEEEEE. I want the navbar hover effect to blend in with the navbar background, creating a seamless transition when hovered over. For reference, here is my current stylesheet code: Paste ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Using JQuery to register click events for elements that have been dynamically added to the

Within a div bearing the class c, I'm updating its content dynamically using Ajax. The end result is something like this: <div class="c"> <div class="del" id="1"></div> <div class="del" id="2"></div> <div class= ...

jqueryajax

What is the method for adjusting the subheader color on a Material UI card component?

How can I change the subheader text color to white in a Material UI Card with a dark background? Here is my code: const useStyles = makeStyles(theme => ({ menuColor: { backgroundColor: theme.palette.primary.main, color: '#ffffff', ...

cssreactjsmaterial-ui

Numerous covert fields within HTML

I am currently working on a popup dialog box where I need to include a set of values in hidden format. However, when I retrieve the value through AJAX post, only the last value is returned. In my PHP code snippet: $plan_ids=array(); foreach($test_plan as ...

phphtmlajax

What is the best way to ensure that the columns are the same height, regardless of the varying content they contain

Visit my CodePen For this particular layout, I need to use only CSS. The columns are structured like so: <div class="col-md-12 no-border no-padding"> <h2 class="heading upper align-center">Headline</h2> <p class="subheading lower ...

htmlcss

Having Trouble with $.ajax Function in my Program

After spending three days experimenting with various methods, I'm still unable to successfully use the Javascript ajax command to send form values to a php script. Despite no errors being displayed and the scripts running smoothly, nothing is getting ...

javascriptphpjqueryhtmlajax

Using JQUERY to create a dropdown menu that dynamically changes based on the date field

I am currently working on a JQUERY project and facing a challenging situation. I usually know how to create dropdown menus that depend on one another, but this time I need a dropdown menu that displays age ranges based on the date entered in the birth-date ...

javascriptjqueryajax

Adjust the height of the div container and implement a vertical scroll feature on the fixed element

I created a fiddle and was hoping to enable scrolling, but I have been unable to find a solution. http://jsfiddle.net/sq181h3h/3/ I tried both of these options, but nothing seems to be working: #league_chat { overflow-y:scroll; } #league_chat { ...

css

The height and alignment of the <a> tag and <p> element vary within a flex container

Currently, I am in the process of constructing a bottom navigation bar for a blog page. This navigation bar will allow users to easily navigate between the last blog entry, the main blog home/index, and the upcoming post. However, when the user reaches the ...

htmlcssreactjs

What could be causing PDB to show the message "*** Blank or comment" when attempting to create a breakpoint?

As I work on my Django app, I encountered an issue where an element in a list is being assigned incorrectly. To debug this problem, I decided to insert a break at what I believe is the source of the error (line 20). In order to do this, I included the fo ...

pythondjangopdb

Tips for obtaining the dynamically loaded HTML content of a webpage

I am currently attempting to extract content from a website. Despite successfully obtaining the HTML of the main page using nodejs, I have encountered a challenge due to dynamic generation of the page. It seems that resources are being requested from exter ...

javascripthtmlnode.jsphantomjs

The WebApi endpoint is not being accessed when deployed on the IIS server, even though it functions properly on the local host

Issue with Web API Endpoint not being triggered after deploying solution to IIS server Working endpoint : https://localhost:44335/Api/Course/GetStudents Endpoint not functioning correctly: Ajax Code function GetStudents(IsEdit) { $.ajax({ ...

jqueryajax.net-coreasp.net-core-webapi

Trigger Vue method when the size of a div element changes

Is there a way to trigger a method every time the dimensions (width or height) of a div element change? <template> <div> </div> </template> <script> export default { methods: { updateSize() { // ...

javascripthtmlvue.jsvue-component

What is the best way to align icons in the center alongside text or paragraphs using react?

I'm struggling with centering my icons like <GrTools size="30px"/> next to my text. It's causing some alignment issues with my styled components. Here is my JavaScript: <div id='paragraph' className="container"> ...

htmlreactjscenterreact-icons

Adjust the border color of a TextField in react/material ui based on whether props are required

If a value is required, the TextField border color will be red. Once a value is entered, the red border will disappear. Check out the images by clicking on the links below: Entered Value Without Value with Required field ...

cssreactjsmaterial-ui