CODEWITHSUNDEEP
pythonflask
noel
noel

Reputation: 452

flask project- css not pulling in colors

I'm new to web development in python. I'm working on converting a project from php over to flask. I followed the instructions in this post (Application not picking up .css file (flask/python)), and now my text is centered, so I know that I'm linked to my stylesheet. But I'm not getting any colors on my pages. Not sure what I did wrong. Here is my css file:

body {
    background-color: #003300;
    text-align: center;
}
.greenones{
    color: #003300;
    text-align: center;
}
.redones{
    color: #dd164e;
    text-align: center;
}
.yellowones{
    color: #CA9800;
    text-align: center;
}
.orangeones{
    color: #ff6600;
    text-align: center;
}
.centerMe{
    text-align: center;
}
.dropdown-toggle{
    color: #CA9800;
}
.yellowleft{
    color: #CA9800;
    text-align: left;
}
.leagueguide{
    color: #CA9800;
    text-align: left;
    list-style-type: upper-roman;
}
.leagueguide-indent{
    color: #CA9800;
    text-align: left;
    list-style-type: upper-alpha;
}
.leagueguide-decimal{
    color: #CA9800;
    text-align: left;
    list-style-type: decimal;
}
div.well {
    font-weight: bold;
}
a {
    font-weight: bold;
}
img.align-left {
    float: left;
    margin-right: 10 px;
    text-align: left;
}
label.yellow, div.yellow{
    color: #CA9800;
}
label.logs{
    color: #CA9800;
    text-align: right;
    padding: 10px 10px 10px 10px;
}
table.statsTable{
    text-align: center;
    color: #003300;
    padding: 3px;
}
td.cen {
    text-align: center;
}

#login-dp{
    min-width: 250px;
    padding: 14px 14px 0;
    overflow:hidden;
    background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
    font-size:12px
}
#login-dp .bottom{
    background-color:rgba(255,255,255,.8);
    border-top:1px solid #ddd;
    clear:both;
    padding:14px;
}
#login-dp .social-buttons{
    margin:12px 0
}
#login-dp .social-buttons a{
    width: 49%;
}
#login-dp .form-group {
    margin-bottom: 10px;
}
.btn-fb{
    color: #fff;
    background-color:#3b5998;
}
.btn-fb:hover{
    color: #fff;
    background-color:#496ebc
}
.btn-tw{
    color: #fff;
    background-color:#55acee;
}
.btn-tw:hover{
    color: #fff;
    background-color:#59b5fa;
}
@media(max-width:768px){
    #login-dp{
        background-color: inherit;
        color: #fff;
    }
    #login-dp .bottom{
        background-color: inherit;
        border-top:0 none;
    }
}

editing my question: my css file is not being found. I'm getting this error:

"GET /static/ibc.css HTTP/1.1" 304 -

In my layout.html file, I have this line:

<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='ibc.css') }}">

I created a static folder underneath the app folder (where app.py lives), and placed the .css file in there. This obviously is not the correct location...

Upvotes: 0

Views: 1733

Answers (1)

noel
noel

Reputation: 452

I can answer my own question. I needed to include the link to the stylesheet in each .html file, not just the layout.html. Once I did that, the css started working.

Upvotes: 2

Related Questions