Hello! This is a follow-up to this article.
In the previous post, we covered how to create a modal window with AJAX using Django and jQueryUI. While the functionality was complete, the design was left untouched.
Therefore, in this article, I've created some CSS to make the modal's design resemble the design of this blog. Customizing jQueryUI's CSS can be a bit tricky due to its specific selector syntax. The CSS provided below can also serve as a reference for how to target jQueryUI elements.
Before changing css:
After changing css:
*{
padding:0;
margin:0;
box-sizing:border-box;
}
body{
background-color: #262626;
width: auto;
height: 100vh;
}
.button{
width: 100vw;
height: auto;
display: flex;
flex-direction: column;
}
.button__title{
width: auto;
margin: 2rem;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.button__area{
width: auto;
margin: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
.button__click{
width: 4rem;
height: 2rem;
}
/***************************
Modal design CSS from here
****************************/
body .ui-widget.ui-widget-content{
border: 5px solid #025B18;
}
body .ui-widget-content{
border: 1px solid #025B18;
background-color: #262626;
}
body .ui-widget-header{
border: 2px solid #025B18;
background-color: #262626;
}
.ui-dialog-title{
color:#1FC742;
}
/***************************
Button at the bottom of the modal
****************************/
.ui-dialog-buttonset button,
.ui-dialog-buttonset button:focus {
color:#1FC742;
background-color: #262626;
border: 2px solid #025B18;
}
.ui-dialog-buttonset button:hover{
color: #262626;
background-color: #1FC742;
border: 2px solid #025B18;
}
/***************************
Close button in the upper right corner of the modal
****************************/
button .ui-dialog-titlebar-close{
background-color: #262626;
border: 2px solid #025B18;
}
.ui-button-icon.ui-icon.ui-icon-closethick {
background-color: #262626;
}
.ui-dialog .ui-dialog-titlebar-close,
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus {
border: 2px solid #025B18;
}
.ui-icon {
background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_025B18_256x240.png) !important;
}
/********************
field of form, not the default component of jqueryUI.
*********************/
.click__confirm{
display:grid;
grid-template-columns:1fr;
grid-template-rows:auto;
grid-gap:0.5rem;
}
.form_field{
background: #262626;
color:#1FC742;
height:2rem;
border: 1px solid #025B18;
border-radius: 4px;
}
.form_field:focus{
color:#1FC742;
height:2rem;
border: 2px solid #1FC742;
border-radius: 4px;
outline: none
}
.click__label{
color:#1FC742;
}
.success_message{
color:#1FC742;
}
/********************
Remove arrows from input fields of the type where numbers are entered
*********************/
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
Reflections after completing these CSS modifications:
- I had difficulty replacing the "x" icon with a new color in the upper right corner of the modal window. However, I discovered that jQueryUI provides a function to change the color and size of icons. Please see this Stack Overflow page.
- While not directly related to jQuery UI, the browser's default number input fields display increment/decrement arrows. I find these arrows visually cluttered, so I removed them using the following code:
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
The jQueryUI documentation provides guidance on changing CSS. To understand which classes are available in jQueryUI, it's helpful to look at this page first.
I have placed this repository in this branch of the same repository as the previous article. For your reference, happy coding!