Help with css opening in sublime

Question

Hi Folks, I went a little ahead of myself and thought I would dive right in and see if could hack a sites html/css. I was able to get a site that I liked up in workspaces I even was able to change some photos and put in a logo and stuff. I have recently purchased sublime and thought I would take the project off workspaces and try it out in sublime. Sadly when I opened it in Sublime its like only the html opens. I'm not sure why its opening in wrkspaces perfectly but doesn't open the same when I use Sublime. its like all the CSS has been stripped. Can anyone take a look and see what I am missing?

https://www.dropbox.com/s/b8nkkl7iex70dn4/project.zip?dl=0

Thanks

Answer 1 · 2016-02-21T22:17:28Z

February 21, 2016 10:17pm

Hey man, it looks like your paths to stuff are off in the header in your HTML

Make sure all your src="" tags are directing to the proper images, and make sure your CSS pages are properly linked

Answer 2 · 2016-02-20T15:14:28Z

February 20, 2016 3:14pm

Hi Sean,

I'm not sure of your question, but on the bottom right of Sublime Text you can see that there's a little box that indicates what Code the IDE thinks you are editing. If you go ahead and left-click it, you can change what language it's to read and it will highlight the syntax based on that code.

Hope this helps!

Answer 3 · 2016-02-21T04:37:00Z

February 21, 2016 4:37am

hi Matthew thansk for the response my problem is my code opensin workspaces fine just not in sublime. What am supposed to have the language set to?

heres the code if that makes things easier

<!DOCTYPE html>    <html lang="en">  <head>

<title>The Lost Sock Coin Laundry</title>

//]]> </script>

//]]> </script> <script id="__st"> //<![CDATA[ var __st={"a":1195052,"offset":-28800,"reqid":"74a463eb-9a72-4e78-a86b-3a9b20f1ac7a","pageurl":"www.naturallogskateboards.com\/","u":"540ccefe3bd0","p":"home"}; //]]> </script> <script> //<![CDATA[ (function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//cdn.shopify.com/s/javascripts/shopify_stats.js?v=6'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })();

//]]> </script> <script type="text/javascript">var _gaq = _gaq || [];_gaq.push(["_setAccount","UA-33543384-1"]);_gaq.push(["_addDevId","o5cUG"]);_gaq.push(["_setAllowLinker",true]);_gaq.push(["_setDomainName","none"]);_gaq.push(["_setCustomVar"]);_gaq.push(["_trackPageview"]); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = '//stats.g.doubleclick.net/dc.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script><script type="text/javascript" src="//cdn.shopify.com/s/assets/themes_support/ga_urchin_forms-55b516f473f9dafdb0b55d79fe068141659c44c0e8007ba2072aa3bcba6f0f92.js"></script>

<script type="text/javascript"> window.$zopim||(function(d,s){var z=$zopim=function(c){z..push(c)},$=z.s= d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set. _.push(o)};z.=[];z.set._=[];$.async=!0;$.setAttribute('charset','utf-8'); $.src='//v2.zopim.com/?1vzwlQ0aFUcBPcazW6nW3Tk3yxqxVOQr';z.t=+new Date;$. type='text/javascript';e.parentNode.insertBefore($,e)})(document,'script'); </script>

</script> </head>

<header class="large">    

  <nav id="nav" role="navigation">      
    <div class="row"> 

      <div id="searchbox" class="desktop-3 mobile-3">

        <form action="/search" method="get">
          <input type="text" name="q" id="q" placeholder="search..." />
        </form>            
      </div>



      <div id="logo" class="desktop-3 mobile-3">       

        <a href="/"><img src="/lost sock logo.png" alt="The Lost SoCK " style="border: 0;"/></a>

      </div>         
      <div id="nav-wrap">          
        <ul id="nav" class="desktop-9 mobile-3">

          <li >
            <a href="/collections/new-collection-1" title="">Location</a>


          </li>

          <li >
            <a href="/pages/handcrafted-bamboo-cruiser-skateboard" title="">Drop Off Service</a>


          </li>

          <li >
            <a href="/pages/about-natural-log-skateboard" title="">Commercial Laundry Service</a>



        </ul>
      </div>
    </div>
  </nav>

  <script>
$(function(){
  $('ul#nav').slicknav();
});

</script> <ul id="mobile-cart">

        <li>

          <a href="/account/login"><i class="icon-user"></i></a>

        </li>

        <li>
          <a href="/cart"><i class="icon-shopping-cart"></i></a>
        </li>
      </ul>      
</header>

<div class="clear"></div>





<div class="flexslider">
  <ul class="slides">
    <li>
      <a href="http://www.naturallogskateboards.com/collections/new-collection-1">
        <img src="lost sock washers.jpg" alt="The lost Sock " />

      </a>         

      <div class="flex-caption">
        <p class="title">Say Hello to</p>
        <p class="caption">Double, Triple And Maxi Loads</p>


      </div>

    </li>









  </ul>
</div>

<article> <div class="row bgcover pt"> <h2 class="home desktop-12">It has to be HERE!</h2> <div id="homepage-content-1" class="desktop-12 tablet-6 mobile-3">
<div class="fluidbox" style="text-align: center;"><span style="color: #666666;">We are the best in the world omg we rock. Cleanest shit ever fuck yeah.</span></div> <div class="fluidbox" style="text-align: center;"><br /><span style="color: #666666;">7 washers 3 of them are $5 2 are $7 and the last 2 are $9 and its like the best in the fucking west.</span></div> <br /> <div id="quality-icon" style="text-align: center; width: 70%; margin-left: auto; margin-right: auto;"><img alt="" src="//cdn.shopify.com/s/files/1/0119/5052/files/NL-Icons-02-01_01_ca71644d-30a4-4a09-9784-9571a69f7c7d.jpg?234492277156271291" style="float: none;" /> <img alt="" src="//cdn.shopify.com/s/files/1/0119/5052/files/NL-Icons-02-01_02_cecca65b-d40d-4612-b382-6cd1694927c3.png?14815969250787259029" style="float: none;" /> <img alt="" src="//cdn.shopify.com/s/files/1/0119/5052/files/NL-Icons-02-01_03_9ab8b6ca-8fa4-40b7-87d0-4f54c7005dbe.jpg?9474718987634599408" /></div> </div> </div> </article> </section>

<div id="bigimage" class="desktop-6 mobile-3">
  <img id="img_01" src="free wifi.jpg" data-zoom-image="//cdn.shopify.com/s/files/1/0119/5052/products/untitled-0538_2048x2048.jpg?v=1443857064" alt='Roots 29" Team Version, Complete' title="Free Wifi" Team Version, Complete"/>
</div>












  <div id="single-product-details" class="desktop-6 mobile-3">
    <div id="product-description" style="border: 0">
      <h3 data-alpha="Open Every Day"19900">Open Every Day</h3>
        <h4 data-alpha="home desktop-12">6am -11pm last wash 10:30pm</h4>

</div> </div> </div>

  <ul class="desktop-3 mobile-3">
    <h4>CUSTOMER SERVICE</h4>

    <li><a href="/pages/faq" title="">FAQ</a></li>

    <li><a href="/pages/customer-service" title="">Service Terms</a></li>

  </ul>
  <ul class="desktop-3 mobile-3">
    <h4>WHOLESALE</h4>

    <li><a href="/pages/wholesale" title="">Dealer Application</a></li>

  </ul>
  <ul class="desktop-3 mobile-3">
    <h4>CONTACT US</h4>

    <li><a href="/pages/contact" title="">Contact</a></li>

  </ul>
  <ul id="footer-right" class="desktop-3 mobile-3">
    <h4>FOLLOW US</h4>
    <li><a id="inline" href="#subscribe_popup" class="open_popup"><i class="icon-envelope"></i></a></li>
    <li><a href="https://www.facebook.com/naturallogskateboards" target="_blank"><i class="icon-facebook"></i></a></li>
    <li><a href="http://www.twitter.com/Twitter Name" target="_blank"><i class="icon-twitter"></i></a></li>
    <li><a href="http://www.pinterest.com/naturallogskate/" target="_blank"><i class="icon-pinterest"></i></a></li>
    <li><a href="http://www.tumblr.com/blog/naturallogskate" target="_blank"><i class="icon-tumblr"></i></a></li>
    <li><a href="http://www.youtube.com/channel/UCsnEBD-dvhvtiVI5VGapqdA" target="_blank"><i class="icon-youtube"></i></a></li>

    <li><a href="http://instagram.com/naturallogskateboards" target="_blank"><i class="icon-instagram"></i></a></li>

  </ul> 
</div>

</div>

<div style='display:none'> <div id='subscribe_popup' style='padding:30px;'> <p class="box-title">Join our Mailing List for Exclusive Offers!<p>  <div id="subs-container" class="clearfix"> <div id="mc_embed_signup"> <form action="//natutallogskate.us6.list-manage.com/subscribe/post?u=dbaa42d22775d088993a57cf6&id=52b7763a7e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"><input value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Join our mailing list" required="" type="email"><input value="JOIN" name="subscribe" id="mc-embedded-subscribe" class="button" type="submit"></form> </div>
</div> </div> </div>

{{#each items}} <div id="cart-item"> <div class="quick-cart-image"> <a href="{{ this.url }}" title="{{ this.title }}"> <img src="{{ this.image }}" alt="{{ this.title }}" /> </a> </div> <div class="quick-cart-details"> <p> <a href="{{ this.url }}">{{ this.title }}</a> </p> <p>{{ this.price }}</p>
<p> <a class="remove_item" href="#" data-id="{{ this.id }}">Remove</a> </p> </div> </div> {{/each}}
<a class="checkout-link" href="/cart">checkout</a>

</script>

<script type="text/javascript" charset="utf-8"> //<![CDATA[

// Including jQuery conditionnally.
if (typeof jQuery === 'undefined') {
  document.write("\u003cscript src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1\/jquery.min.js\" type=\"text\/javascript\"\u003e\u003c\/script\u003e");
  document.write('<script type="text/javascript">jQuery.noConflict();<\/script>');
}

// Including api.jquery.js conditionnally.
if (typeof Shopify.resizeImage === 'undefined') {
  document.write("\u003cscript src=\"\/\/cdn.shopify.com\/s\/assets\/themes_support\/api.jquery-3fdf7f8ecde4022383bde5e52e9d15002ce0866a679c7fa8a02be79b7a21c3ec.js\" type=\"text\/javascript\"\u003e\u003c\/script\u003e");
}

//]]>

</script>

// Find all YouTube videos var $allVideos = $("iframe[src^='http://www.youtube.com']"),

// The element that is fluid width
$fluidEl = $("body");

// Figure out and save aspect ratio for each video $allVideos.each(function() {

$(this) .data('aspectRatio', this.height / this.width)

// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');

});

// When the window is resized $(window).resize(function() {

var newWidth = $fluidEl.width();

// Resize all videos according to their own aspect ratio $allVideos.each(function() {

var $el = $(this);
$el
  .width(newWidth)
  .height(newWidth * $el.data('aspectRatio'));

});

// Kick off one resize to fix all videos on page load }).resize(); </script>

</body> </html>

Answer 4 · 2016-02-21T20:41:59Z

February 21, 2016 8:41pm

here is a screen shot when I open the .html file from sublime https://www.dropbox.com/s/t7aqnomghx7tcp7/Screen%20Shot%202016-02-22%20at%207.36.07%20am.png?dl=0

and heres what it looks like when I hit the preview in workspaces https://www.dropbox.com/s/uvjl8bhsjienvnc/Screen%20Shot%202016-02-22%20at%207.37.22%20am.png?dl=0

How can I get my sublime file to look like workspaces? its using the same code

Answer 5 · 2016-02-22T02:53:35Z

February 22, 2016 2:53am

Thanks Matthew is workspaces more lenient with mistakes then? seems strange that it works with workspaces but not something else

Answer 6 · 2016-02-23T09:00:57Z

February 23, 2016 9:00am

I'm also still having an issue with why the formatting is different. Fair enough some pics might need to be relinked but the pics that are wroking arent the right size or in the right place. is there a reason why its different in workspaces?

Answer 7 · 2016-02-23T17:23:24Z

February 23, 2016 5:23pm

Hey Sean,

Workspaces is kinda more lenient in a way because it's IDE is set up for users in a way that some of the backend stuff that you would have to manually do is already done for you.

Check your css and your links and make sure whatever ID/Class you've given your images is directly being accessed in your CSS.

Welcome to the Treehouse Community

Looking to learn something new?

Sean Clayton

Sean Clayton

Help with css opening in sublime

7 Answers

Matthew Mariner

Matthew Mariner

Matthew Mariner

Matthew Mariner

Sean Clayton

Sean Clayton

Sean Clayton

Sean Clayton

Sean Clayton

Sean Clayton

Sean Clayton

Sean Clayton

Matthew Mariner

Matthew Mariner