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 Build a Social Network with Flask Broadcasting Post Model

No css files in the workspaces?

There are no css file in the workspace for this project?

14 Answers

Jason Ziegler
seal-mask
.a{fill-rule:evenodd;}techdegree
Jason Ziegler
Full Stack JavaScript Techdegree Student 36,647 Points

I had this problem.

Here is how I solved it.

When I clicked "Launch Workspace",

A "Launch Workspace" popup appeared asking me if I wanted to use "Build a Social Network with Flask - Add Some Layout Started from Flask Social S3V1"

Click "Launch Different Workspace" in the bottom right of the popup.

From the next popup, Click "Create New Workspace"

On the next popup:

Give your workspace a name

From the first dropdown, select "Python"

From the second dropdown, select "Broadcasting - Post Model"

Click "Launch it!"

Hope this helps you!

nakalkucing
nakalkucing
12,964 Points

Thanks Jason Ziegler! Your method worked for me. :)

I'm surprised they haven't fixed this yet. Thank you, Jason Ziegler

Andreas,

Quote:

...but no image files though bummer !!.

Do not despair!

There are actually only 3 svg type graphics in the img folder for the workspace (per this screenshot):

alt text

The files are:

1.) icon-logo.svg

2.) icon-power.svg

3.) icon-profile.svg


Do you know that if you paste raw svg code in a codepen.io page it will display an image?

I did not --until I read this forum post:

https://teamtreehouse.com/forum/svg-image-displays-as-code-not-as-image

I know James Barnett wouldn't mind if you temporarily "borrowed" his codepen to get the images. :wink:


Here's what you can do to get the images:

1.) Step one go to the jamesbarnett's codepen:

http://codepen.io/jamesbarnett/pen/sCHor

You should see "html" , "css" and "js" panels

with the graphics for "easy Mail" displayed in the panel underneath.

2.) Click on the html panel and delete all the html code (Control-A works to do this on my windows-based machine).

No need to do anything with the css or js panels, just leave them alone

unless you want to use the css code to resize the graphics..

3.) Paste in these 3 sets of svg codes (one at a time,

clearing out the html code panel between each pastings):

Just take a screenshot if you need to save the pictures in jpg or png format.


icon-logo.svg graphics code:

    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<g>
    <path fill="#FFB871" d="M27.1,23.9c1.8-2.5,2.9-5.5,2.9-8.9c0-8.3-6.7-15-15-15S0,6.7,0,15c0,8.3,6.7,15,15,15
        c2.6,0,5.1-0.7,7.2-1.9c2.1,1.2,4.3,1.9,6.6,1.9L27.1,23.9z"/>
    <path fill="#FFFFFF" d="M4,15c0-1.5,1.2-2.7,2.7-2.7s2.7,1.2,2.7,2.7s-1.2,1.1-2.7,1.1S4,16.5,4,15z"/>
    <path fill="#FFFFFF" d="M20.5,15c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7s-1.2,1.1-2.7,1.1C21.7,16.1,20.5,16.5,20.5,15z"/>
    <path opacity="0.7" fill="#FFFFFF" d="M19.1,18c0,3-1.8,4.1-4.1,4.1S10.9,21,10.9,18H19.1z"/>
</g>
</svg>

icon-power.svg graphics code:

    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<g>
    <path fill="#B2BAC2" d="M15,30c-0.1,0-0.2,0-0.3,0c-3.8,0-7.4-1.8-10.1-4.6s-4.1-6.5-4-10.4c0.1-3.2,1.1-6.3,3.1-8.8
        c1.1-1.4,3.1-1.6,4.4-0.5c1.4,1.1,1.6,3.1,0.5,4.4c-1.1,1.4-1.7,3.1-1.8,4.9c0,2.2,0.8,4.1,2.3,5.6c1.5,1.6,3.5,2.3,5.7,2.3
        c0.1,0,0.1,0,0.2,0c4.4,0,8-3.4,8.1-7.8c0-2-0.6-3.8-1.9-5.3c-1.1-1.3-1-3.3,0.4-4.4c1.3-1.1,3.3-1,4.4,0.4
        c2.3,2.7,3.5,6.3,3.4,9.8C29.2,23.5,22.8,30,15,30z"/>
    <g>
        <g>
            <path fill="#B2BAC2" d="M15,0L15,0c1.7,0,3.2,1.4,3.2,3.2v12.2c0,1.7-1.4,3.2-3.2,3.2l0,0c-1.7,0-3.2-1.4-3.2-3.2V3.1
                C11.8,1.4,13.3,0,15,0z"/>
        </g>
    </g>
</g>
</svg>

icon-power.svg graphics code:

    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="#B2BAC2" d="M8.9,7.4c0-3.4,1-7.5,6.1-7.5c5.4,0,6.1,4,6.1,7.4L20.9,11c0,3.4-3.6,5.3-5.9,5.3c-2,0-5.9-1.9-5.9-5.3
    L8.9,7.4z"/>
<path fill="#B2BAC2" d="M16.4,18.9h-2.7C6.1,18.9,0,22.5,0,30l0,0h30l0,0C30,22.5,23.9,18.9,16.4,18.9z"/>
</svg>

Hopefully you get these 3 screens:

alt text

alt text

alt text

Imgur links:

http://i.imgur.com/UbigD6w.png

http://i.imgur.com/qs583qK.png

http://i.imgur.com/qYZCgYY.png

Enjoy! :smiley:

Hi Andreas,

If you are talking about the workspace on this page:

https://teamtreehouse.com/library/build-a-social-network-with-flask/broadcasting/post-model

The workspace button directs to:

https://teamtreehouse.com/workspaces/4165352

Like Kevin, I also see there are two files under the static folder

(after click on the twisty triangle to the far left (beyond the little folder icon) of 'static',

main.css and normalize.min.css

I'll try to upload a screenshot to imgur:

alt text

Here is the main.css:

/*General*/
body, input, button, textarea {
  font-family: 'Varela Round', Helvetica Neue, Helvetica, Arial, serif;
}
body {
  font-size: 1em;
  color: #777B7E;
  font-weight: 400;
  background: #D3D8DC;
  position: relative;
}
a {
  text-decoration: none;
  color: #2C3238;
}
a:hover {
  color: #000;
}

/*Typography*/
h1, h2, h3, h4 {
  font-size: 1.15em;
  font-weight: normal;
  margin: 0;
  line-height: 1em;
}
h1 {
  text-align: center;
  line-height: 30px;
}
h2 {
  margin: 0 0 10px;
}
h3 {
  text-align: center;
  padding: 40px 0 0 40px;
  font-size: 1em;
}
h4 {
  margin: 10px 0 0;
  opacity: .7;
  font-size: 2em;
}
h5 {
    margin: 0;
}
p {
  margin: 0;
  line-height: 1.5em;
}

/*Header*/
header {
  width: 100%;
  background: #fff;
  padding: 10px 0;
}
.icon-logo {
  width: 30px;
  height: 30px;
  background: url('../img/icon-logo.svg') center no-repeat;
  background-size: 22px 22px;
  display: block;
  float: left;
}
.icon-profile {
  width: 30px;
  height: 30px;
  background: url('../img/icon-profile.svg') center no-repeat;
  background-size: 20px 20px;
  display: block;
  float: right;
  margin-right: 10px;
}
.icon-power {
  width: 30px;
  height: 30px;
  background: url('../img/icon-power.svg') center no-repeat;
  background-size: 20px 20px;
  display: block;
  float: right;
}

/*Main*/
.main {
  max-width: 800px;
  margin: 40px auto 0;
  background: #fff;
  border-radius: 4px;
  transition: .35s linear;
  padding-bottom: 20px;
}
.skinny {
  max-width: 320px;
  padding: 40px;
}
nav{
  padding: 0 0 0 20px;
  position: relative;
  line-height: 60px;
  font-size: .875em;
}
nav a {
  padding: 0 20px 10px;
}
nav a.new {
  float: right;
  text-transform: uppercase;
  color: #FFB770;
}
nav a.current {
  color: #FFB770;
  border-bottom: 2px solid #FFB770;
}
article {
  border-bottom: 2px solid #ECEEEF;
  margin: 0;
  padding: 40px;
}
article:last-child {
  border-bottom: 0;
}
article p {
  margin: 20px 0 0;
}
time {
  font-size: .875em;
  opacity: .8;
}

/*Form Elements*/
form {
    margin: 0;
    padding: 40px;
}
input {
  width: 100%;
  border: 0;
  border-bottom: 2px solid #D3D8DC;
  outline: 0;
  background: #fff;
  padding: 20px 0 4px;
  margin: 0 0 20px;
  color: #777B7E;
}
input:focus {
  border-color: #6ECDF7;
  color: #2C3238;
}
textarea {
  width: 100%;
  border: 0;
  border-bottom: 2px solid #D3D8DC;
  outline: 0;
  background: #fff;
  padding: 20px 0 4px;
  margin: 0 0 20px;
  color: #777B7E;
}
textarea:focus {
  border-color: #6ECDF7;
  color: #2C3238;
}
button {
  width: 100%;
  padding: 20px 0;
  text-align: center;
  background: #6ECDF7;
  color: #fff;
  border: 0;
  border-radius: 4px;
  opacity: .8;
  transition: .35s linear;
}
button:hover {
  opacity: 1;
}
button.small {
    padding: 1em 0.5em;
    margin: 0 auto;
    text-align: center;
}

/*Profile*/
.stats {
  width: 100%;
  display: table;
  text-align: center;
}
.status {
  border: 4px solid #D5DDE4;
  border-radius: 4px;
  width: 80%;
  margin: 10px 10%;
  display: block;
  padding: 10px 0;
  color: #D5DDE4;
  opacity: .8;
  transtion: .35s linear;
}
.status:hover {
  opacity: 1;
  color: inherit;
}
.follow {
  border-color: #6ECDF7;
  color: #6ECDF7;
}
.follow::before {
  content: '+ '
}
.unfollow {
  border-color: #6ECDF7;
  color: #6ECDF7;
}
.unfollow::before {
  content: '- '
}
.disabled {
  border-color: #D5DDE4;
  color: #D5DDE4;
}
.view {
    font-size: 0.8em;
    text-transform: upper;
}

/*Notifications*/
.notification {
  text-align: center;
  padding: 10px 20px;
  border-radius: 4px;
  color: #fff;
}
.success {
  background: #70DA8B;
  color: #4DA463;
}
.error {
  background: #FFE6B2;
  color: #C5A14E;
  margin-bottom: 20px;
}

/*Footer*/
footer{
  color: #777B7E;
  text-align: center;
  font-size: .875em;
  margin: 40px 0;
}

footer p {
  opacity: .7;
}

/*Grid*/
.row {
  max-width: 800px;
  padding: 0 40px;
  margin: 0 auto;
  transition: .35s linear;
}
.row:before, .row:after {
  content: '';
  display: table;
}
.row:after {
  clear: both;
}
.grid-100{
    display: inline-block;
  float: left;
  width: 100%;
}
.grid-50{
    display: inline-block;
  float: left;
  width: 49%;
}
.grid-33{
    display: inline-block;
  float: left;
  width: 33%;
}
.grid-25{
    display: inline-block;
  float: left;
  width: 20%;
  margin: 0 2.25%;
}

/*Media Queries*/
@media (max-width: 728px) {
  .main {
    margin: 10px auto;
  }
  .grid-25 {
    width: 46%;
    margin: 20px 2%;
  }
  .grid-50 {
    width: 100%;
  }
  .row {
    padding: 0 10px;
}

.post {
    white-space: pre;
}
Kenneth Love
STAFF
Kenneth Love
Treehouse Guest Teacher

Hmm, when I click the "Launch Workspace" button next to the video, I get one with CSS files in it.

Erik Malmberg
Erik Malmberg
1,465 Points

Any solution to this? Doesn't seem to work today.

Thanks in advance

Kenneth Love
Kenneth Love
Treehouse Guest Teacher

I just launched it and the folder was there. Not sure that anything has been changed in the last day (I know I haven't changed anything). Try it again?

Jamison yeah I am aware python is a back end language but its like saying I will build a house with no paint on my walls lol. Kenneth on that section even on your first video you don't seem to have a static folder but you do on other videos. I tried it again defo no static folder comes up. Great course though!!.

Kenneth Love
Kenneth Love
Treehouse Guest Teacher

What if you close the workspace you have open and click the button next to this video? Make sure to give it a new name. Does that one have the template, CSS, and JavaScript files in it?

Hi Kenneth

I got it to work this time i added like a V2 at the end of the title and now the static folder loads.

thanks for your help.

Thanks James for taking the time to post all the css and stuff. Something very strange going on with my workspaces I don't have a folder called static leave alone the css files. I will manually fix the css now that you have given me the code but no image files though bummer !!.

Thanks alot anyway.

james

Thanks alot but i actually got workspaces to work in the end. Kenneth asked me to try to change the name of the workspace so i put like a V2 on the title and long be hold it worked. I think when i launched workspaces initially it probably didn't overwrite the old files with the new ones. All sorted now thanks everyone.

Y B
Y B
14,136 Points

How can you change the name of the title of the workspaces? I can see the name "Started from Flask Social S3V1" when I click on launch workspaces but I can't change it.

I can't see the static files either. It would be good to see these so I can get a more complete picture of how the front end and back end fit together.

The direct link to the workspace posted above by james white doesn't work either.
Any ideas how I can see the correct workspaces with the static files?

Y B
Y B
14,136 Points

Also does anyone have the js file(s)?

Y B
Y B
14,136 Points

Also does anyone have the js file(s)?

Y B
Y B
14,136 Points

I managed to relaunch and get the static files - no idea how to get the images though.

I seem to get lots of asset errors though and the project site is unusable, which makes it difficult to learn from. At the index page or default page I just get the "All" in orange that Kenneth had in his video when I click on it - nothing happens.

http://imgur.com/yW0VIEp See here http://imgur.com/2fSntpK

Does anybody have any idea what I'm doing wrong?

Thanks

Y B
Y B
14,136 Points

I founds the error, which was preventing the site from working. I had extend rather than extends in the template. I use pycharm generally but it there a way to check Jinja 2 templates for these keywords?

Erik Malmberg
Erik Malmberg
1,465 Points

I don't get any "static" folder when I try to open "Launch Workspace"

Steve Smith
Steve Smith
9,621 Points

This appears to still be broken. When I launched the workspace several times, I still see no CSS files for the portion of the social network build that is trying to show the new_post screen.

I'm getting the following errors:

10.120.36.5 - - [13/Mar/2017 16:32:16] "GET /static/css/normalize.min.css HTTP/1.1" 404 -
10.120.36.5 - - [13/Mar/2017 16:32:16] "GET /static/css/main.css HTTP/1.1" 404 -
10.120.36.5 - - [13/Mar/2017 16:32:16] "GET /static/js/vendor/disTime.min.js HTTP/1.1" 404 -
10.120.36.5 - - [13/Mar/2017 16:32:16] "GET /static/js/main.js HTTP/1.1" 404 -

I'm using chrome and Windows 10. How can I easily get these files so that I can continue on with the lesson?

This is definitely still a problem. When I launched the new workspace for this video I got the updates to layout.html, but the static/ folder was missing entirely. Manually trying to recreate all of the content in that folder sure is a pain.

Would it not be easier to set up the inital workspace for this course with all of the content in static/ already present so people don't wind up down this quagmire?

I guess if the course is focused mainly on back-end development, then CSS files aren't really a priority (python is back-end and CSS is considered front-end typically). Then again, maybe you found a mistake on Treehouse's end!