Nginx Question posted in
The official documentation can be found here.

Django some css not working in production – Nginx

I have a django app. In production I ran collectstatic and all good except a small piece of css. This css thing is a question mark which on hover shows some tips about the app feature.
This also could be a nginx configuration issue maybe. But again, just this piece of css does not work properly.

html

<div class="help-tip">
 <p> 
    some text
 </p>
</div>

css

/*-------------------------
    Inline help tip
--------------------------*/
.help-tip-wrapper{
  padding-top: 15px;
  padding-left: 5px;
}

.help-tip{
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{
    display:block;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{
    display: none;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    border-radius: 3px;
    right: -4px;
    color: #FFF;
  font-weight: normal;
    font-size: 10px;
  z-index: 100;
    line-height: 1.4;
  position: relative;
}

.help-tip p:before{
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{
    width:100%;
    height:40px;
    content:'';
    top:-40px;
    left:0;
}

settings.py

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

All css working fine except this one.

Tags:

2

Answers


  1. 0

    Your settings.py file is wrong.

    It should look like this

    STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
STATIC_DIRS = [
     os.path.join(BASE_DIR, 'static')
]

    Also you have to now update your nginx or apach2 server with above change 'staticfiles'

    When you run collectstatic command, it will now save your bundle in staticfiles dir and it will be served when your DEBUG=False . If your debug=True, then it will server from static folder

    Login or Signup to reply.
  2. 0

    You have not used the url mapping for "collectstatic". So in you settings, use this kind of mapping. (can edit as you wish,except the keyword(varaible name))

    STATIC_URL = '/static/'
STATICFILES_DIRS=[BASE_DIR / 'static']
STATIC_ROOT= BASE_DIR / 'staticfiles'

    After this, run the ‘collectstatic’. You will get all the css, in this in production, in this specific url mapped file .

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search