Jump to content

Syntax Error on Line 1

Go to solution Solved by paul2009,

Recommended Posts

I've been watching a couple Squarespace videos on how to do small customizations on my website via the Custom CSS section and I type in the code exactly and it constantly gives me the Syntax Error on Line 1.

Not sure what I'm doing wrong?

Here's the code I was trying out.

.sqs-block-button-element--medium(background-color:#f69477)

Thanks

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

The brackets should be curly braces like this:

{} not ()

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 10 months later...

<!DOCTYPE html> 
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="utf-8">
        <title>Model Viewer</title>
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<style> 
Model viewer {
Width:400px;
Height:600px;
  Margin: 0 auto; }

</style>
    </head>
    <body> <model-viewer> scr="https://products.aspose.app/3d/assets/js/aspose.3d-2.0.js" camera-controls auto-rotate</model>
</body>
</html>

I keep getting syntax error one line? what does this mean

Link to comment

Hi Creedon thank you so much for your reply I'm trying to add a 3D model  image to my sqaure space website that visitors can grab / rotate and view all angles I have the same image file saved as OBJ FBX PLY STL 

I'd like the web user to be able to hover mouse over image and drag and pull move and interact with the 3D model file I have of a laser scan of a pipe. 

To show website visitors the defects in the image. I have uploaded a still Jpeg of the 3D model file. I've tired using paid third party programs like Vectary but I can't seem to get those embeded codes to work on Sqaurespace either. 

 

Really stuck because entire site is build on sqaurespace for a rov engineering company,

Samaple Model.png

Link to comment

@christina_marie_333

I'm starting to understand. I think this is the technology you are trying to use.

<model-viewer>

Looking at the Quick Start on the above page your code has some of the elements. But it appears to have been munged. I don't see a glb file. I've spent all of about two minutes so I'm no expert.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
<!DOCTYPE html>
  <html lang="en">
  <head>
  <title>&lt;model-viewer&gt; Interactive Example</title>
  <meta charset="utf-8">
  <meta name="description" content="&lt;model-viewer&gt; interactive example">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link type="text/css" href="../styles/examples.css" rel="stylesheet" />
  <link rel="shortcut icon" type="image/png" href="../shared-assets/models/favicon.png"/>
   
  <!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
  <script src="../node_modules/focus-visible/dist/focus-visible.js" defer></script>
  <style>
  body, html {
  height: 100%;
  font-size: 10pt;
  }
   
  label {
  display: inline-block;
  width: 120px;
  height: 24px;
  }
   
  input {
  vertical-align: middle;
  }
   
  input.number {
  border: 0;
  background: transparent;
  font-size: 16px;
  width: 32px;
  outline: none;
  }
   
  select {
  font-size: 14px;
  }
   
  #container {
  display: flex;
  height: 100%;
  }
   
  model-viewer {
  flex-grow: 1;
  height: 100%;
  }
   
  #instructions {
  width: 320px;
  margin-top: 10px;
  margin-left: 30px;
  margin-bottom: 20px;
  }
   
  .hotspot{
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: none;
  background-color: blue;
  }
   
  .annotation{
  background-color: #888888;
  position: absolute;
  transform: translate(10px, 10px);
  border-radius: 10px;
  padding: 10px;
  text-align: left;
  }
   
  .hotspot.selected{
  background-color: red;
  }
   
  .hotspot:not(.selected) > .annotation{
  display: none;
  }
   
  @media screen and (max-width: 320px) {
  #instructions {
  display: none;
  }
  }
  </style>
  </head>
  <body>
   
  <div id="container">
  <div id="instructions">
  <h1>
  <a href="https://github.com/google/model-viewer" target="_blank" rel="noopener">&lt;model-viewer&gt;</a>
  </h1>
  Drop a <a href="https://github.com/KhronosGroup/glTF" target="_blank" rel="noopener">glTF or GLB</a> for the model =><br/>
  Drop an <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDR or JPG</a> for the skybox =><br/>
  <input type="file" id="input" multiple><br/><br/>
   
  <label for="src">src:</label>
  <select id="src">
  <option value="../shared-assets/models/Astronaut.glb">Astronaut</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/BoomBox/glTF-Binary/BoomBox.glb">Boom Box</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/BrainStem/glTF-Binary/BrainStem.glb">Brain Stem</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/Corset/glTF-Binary/Corset.glb">Corset</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/DamagedHelmet/glTF-Binary/DamagedHelmet.glb" selected>Damaged Helmet</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/FlightHelmet/glTF/FlightHelmet.gltf">Flight Helmet</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/Lantern/glTF-Binary/Lantern.glb">Lantern</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/Suzanne/glTF/Suzanne.gltf">Monkey</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/SpecGlossVsMetalRough/glTF-Binary/SpecGlossVsMetalRough.glb">Water Bottles</option>
  <option value="../shared-assets/models/RobotExpressive.glb">Robot Expressive</option>
  <option value="../shared-assets/models/alpha-blend-litmus.glb">Transparency Test</option>
  <option value="../shared-assets/models/glTF-Sample-Models/2.0/MetalRoughSpheres/glTF/MetalRoughSpheres.gltf">Metal Rough Spheres</option>
  </select><br/>
   
  <label for="environmentImage">environment-image:</label>
  <select id="environmentImage">
  <option value="" selected>default</option>
  <option value="../shared-assets/environments/spruit_sunrise_1k_HDR.hdr">spruit sunrise HDR</option>
  <option value="../shared-assets/environments/spruit_sunrise_1k_LDR.jpg">spruit sunrise JPG</option>
  <option value="../assets/music_hall_01_1k.hdr">music hall</option>
  <option value="../assets/whipple_creek_regional_park_04_1k.hdr">whipple creek</option>
  <option value="../shared-assets/environments/aircraft_workshop_01_1k.hdr">aircraft workshop</option>
  <option value="../assets/pillars_1k.hdr">pillars</option>
  </select><br/>
   
  <label for="useSkybox">use as skybox:</label>
  <input id="useSkybox" type="checkbox" disabled="true"><br/>
   
  <label for="exposure">exposure:</label>
  <input id="exposure" type="range" step="0.01" min="0" max="2" value="1">
  <input id="exposureValue" value="1" class="number"><br/>
   
  <label for="shadowIntensity">shadow-intensity:</label>
  <input id="shadowIntensity" type="range" step="0.01" min="0" max="1" value="0">
  <input id="shadowIntensityValue" value="0" class="number"><br/>
   
  <label for="shadowSoftness">shadow-softness:</label>
  <input id="shadowSoftness" type="range" step="0.01" min="0" max="1" value="1">
  <input id="shadowSoftnessValue" value="1" class="number"><br/>
   
  <label for="autoRotate">auto-rotate:</label>
  <input id="autoRotate" type="checkbox"><br/><br/>
   
  To create a seamless poster:<br/>
  Orient model and resize window to desired size (small is recommended), then click:<br/>
  <button onclick="createPoster()">Create Poster</button><br/>
  Then resize window to any aspect ratio and click:<br/>
  <button id="display" onclick="reloadScene()">Display Poster</button><br/>
  Click the model to dismiss the poster and interact. To save your poster, click:<br/>
  <button id="download" onclick="downloadPoster()">Download Poster</button><br/>
  camera-orbit:
  <div id="cameraOrbit"></div><br/><br/>
   
  To calculate hotspot locations, click:<br/>
  <button onclick="addHotspot()">Add Hotspot</button><br/>
  Then click on the model.<br/>
  To remove a hotspot, select it, then click:<br/>
  <button onclick="removeHotspot()">Remove Hotspot</button><br/>
   
  </div>
  <model-viewer id="loading-demo" autoplay camera-controls interaction-prompt="none"
  src="../shared-assets/models/glTF-Sample-Models/2.0/DamagedHelmet/glTF-Binary/DamagedHelmet.glb" alt="A 3D model">
  </model-viewer>
  </div>
   
  <div class="footer">
  <ul>
  <li class="attribution">
  <a href="https://poly.google.com/view/dLHpzNdygsg">Astronaut</a> by <a href="https://poly.google.com/user/4aEd8rQgKu2">Poly</a>,
  licensed under <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY</a>.
  </li>
   
  <li class="attribution">
  <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/DamagedHelmet">Damaged Helmet</a> by <a href="https://sketchfab.com/theblueturtle_">theblueturtle_</a>,
  licensed under <a href="https://creativecommons.org/licenses/by-nc/3.0/us/">Creative Commons Attribution-NonCommercial</a>.
  </li>
   
  <li class="attribution">
  <a href="https://github.com/mrdoob/three.js/tree/dev/examples/models/gltf/RobotExpressive">RobotExpressive</a> by <a href="https://www.patreon.com/quaternius">Tomás Laulhé</a>,
  licensed under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>.
  </li>
   
  <li class="attribution">
  <a href="https://hdrihaven.com/hdri/?h=small_hangar_01">small_hangar_01_1k.jpg</a> by <a href="https://hdrihaven.com">HDRI Haven</a>,
  licensed under <a href="https://hdrihaven.com/p/license.php">CC0</a>.
  </li>
   
  <li class="attribution">
  <a href="https://hdrihaven.com/hdri/?h=whipple_creek_regional_park_04">whipple_creek_regional_park_04_1k.hdr</a> by <a href="https://hdrihaven.com">HDRI Haven</a>,
  licensed under <a href="https://hdrihaven.com/p/license.php">CC0</a>.
  </li>
  </ul>
  <div style="margin-top:24px;" class="copyright">©Copyright 2018-2020 Google Inc. Licensed under the Apache License 2.0.</div>
  <div><a href="https://github.com/google/model-viewer">Github</a><a href="https://model-viewer.glitch.me/">Glitch</a><a href="https://github.com/google/model-viewer/issues">Bug report</a></div>
  </div>
   
  <script type="module" src="./built/tester.js"></script>
   
  <!-- Documentation-specific dependencies: -->
  <script type="module"
  src="./built/dependencies.js">
  </script>
  </body>
  </html>
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.