Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Python Flask Basics Character Builder Flash Messages

My flash message is not center and white text like Kenneth's.

My title text comes out as left and grey. Is this a default setting or did Kenneth code in the style somewhere else?

3 Answers

It works!! Thank you! I knew I was missing something!

Yes! Programming is the most rewarding-bitter-sweet-torturous task on this planet!

Ryan Groom
Ryan Groom
18,609 Points

Kortney Field Make sure the DIV under the body has the class "messages" included. If you reference his main.css file, you can see where these styles are coming from.

.messages li {
    color: #fff;
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 0.025em;
    text-align: center;
}

Let me know if you have anymore questions.

I checked and it shows what you stated. I am still having the same issue. Could you look at my code and see if I am missing something?

layout.html

<!DOCTYPE html>
<html>
    <head>
        <title>Character Generator</title>
        <link rel="stylesheet" href="/static/css/normalize.min.css">
        <link rel="stylesheet" href="/static/css/main.css">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
      <div class="wrap no-bottom messges bg-{{ saves.get('colors', 'yellow') }}">
        {% with messages = get_flashed_messages() %}
        {% if messages %}
        <ul class='flashes'>
          {% for message in messages %}
          <li>{{ message }}</li>
          {% endfor %}
        </ul>
        {% endif %} 
        {% endwith %}
      </div>
        {% block content %}{% endblock %}
    </body>
</html>

main.css file for .messages

.messages li {
    color: #fff;
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 0.025em;
    text-align: center;
}

my app.py file

import json
from flask import (Flask, render_template, 
                   redirect, url_for, request, 
                   make_response, flash)


from options import DEFAULTS

app = Flask(__name__)
app.secret_key = 'jflksdjfljiefnsnvlkrhtlsbjkvlkfjg'

def get_saved_data():
  try:
    data = json.loads(request.cookies.get('character'))
  except TypeError:
    data = {} 
  return data


@app.route('/')
def index(): 
  return render_template('index.html', saves=get_saved_data())


@app.route('/builder')
def builder(): 
  return render_template(
    'builder.html', 
    saves=get_saved_data(),
    options=DEFAULTS
  )

@app.route('/save',methods=['POST'])
def save(): 
  flash("Looks good! Saved changes")
  response = make_response(redirect(url_for('builder')))
  data = get_saved_data()
  data.update(dict(request.form.items()))
  response.set_cookie('character', json.dumps(data))                       
  return response



app.run(debug=True, host='0.0.0.0', port=8000)
Ryan Groom
Ryan Groom
18,609 Points

Kortney Field you spelled "messages" when adding it to the DIVs list of classes. You wrote "messges". Programming can be a pain right?