No css files in the workspaces?

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!

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):

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.

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:

Imgur links:

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

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

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

Enjoy!

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:

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;
}

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

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!!.

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.

Also does anyone have the js file(s)?

Also does anyone have the js file(s)?

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?

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

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!