Syntax Error on Line 1

HautBranding · May 30, 2020

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

paul2009 · May 30, 2020

The brackets should be curly braces like this:

{} not ()

HautBranding · May 31, 2020

Thanks Paul,

It's working now!

Cyperpunk-girl-333 · April 28, 2021

<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta charset="utf-8">
       <title>Model Viewer</title>

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

</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

creedon · April 28, 2021

@christina_marie_333

The code you have there wouldn't be valid entered anywhere in SS.

Please explain what you are trying to accomplish and we may be able to guide you.

Cyperpunk-girl-333 · April 28, 2021

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,

creedon · April 28, 2021

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

Cyperpunk-girl-333 · April 28, 2021

Yes this is the code I was trying to use, however I'm also no expert. would be happy to pay you to help me via paypal?

I added my glb file but could't work out how to implement it into the html? would you know how to un mangle it? I could email you the file? Any help would be amazing. Just give me a rough quote. 🙂

Cyperpunk-girl-333 · April 29, 2021

<!DOCTYPE html>
	<html lang="en">
	<head>
	<title><model-viewer> Interactive Example</title>
	<meta charset="utf-8">
	<meta name="description" content="<model-viewer> 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"><model-viewer></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>

angelorman · February 20, 2023

Syntax Error on line 1

<a target="_top" style="
background-color: transparent;
border: 2px solid #e7d1b5;
color: #e7d1b5;
height: 40px;
text-transform: uppercase;
font-family: 'Square Market', sans-serif;
letter-spacing: 1px;
line-height: 38px;
padding: 0 28px;
border-radius: 8px;
font-weight: 500;
font-size: 14px;
cursor: pointer;
display: inline-block;
" href="https://squareup.com/appointments/book/y3zoxs7mwpetmr/LRHJY8WVT5BEB/start" rel="nofollow">Book Now</a>

this is the code trying to add a button that takes visitors to a booking calendar keep getting the same error not sure how to handle this. please if anyone can help

creedon · February 20, 2023

35 minutes ago, angelorman said:

this is the code trying to

The code you show is HTML. I suspect you've tried to add it to Design > Custom CSS. Custom CSS is for CSS code, HTML can not go in there.

You probably want to add the code Either the site-wide HEADER for FOOTER code injection.

It's hard to know for sure how to advise you. It helps if we have a site URL and a description of the effect you want.

I suggest you start a new thread with what you want to accomplish, supply some details, and then perhaps we can help. This thread has several different issues being discussed and it's easier on everyone if we can keep threads down to one set of issues.

Impact23 · August 7, 2023

How am I getting a Syntax error on line 1 ?

Edited August 7, 2023 by Impact23

creedon · August 7, 2023

7 minutes ago, Impact23 said:

How am I getting a Syntax error on line 1 ?

You are getting an error because the code you show is not CSS. Only CSS can go in Custom CSS.

The shown code looks like either JSON or a JavaScript fragment.

Without knowing what you are trying to do it will be hard to help.

Impact23 · August 7, 2023

im trying to attach a CRM to my website, by using a json file

creedon · August 7, 2023

Can you give us more context? Were there some instructions that came along with where you got this JSON?

Impact23 · August 7, 2023

Yes - I believe I should be using a code block. Sending instructions now

Impact23 · August 7, 2023

https://github.com/bullhorn/career-portal/wiki/Downloading-and-Configuring

Impact23 · August 7, 2023

I am trying to integrate my Bullhorn CRM with Squarespace

Impact23 · August 7, 2023

@creedon can you assist

creedon · August 7, 2023

Quote

can you assist

As far as I can tell there is more than just a JSON file that needs to be uploaded somewhere.

This is an application with bunch of files that constitutes the app. The app needs to be uploaded to a traditional website hosting service that accepts outside software being uploaded to it.

SS is not a traditional old style web hosting service. SS is designed to isolate the user from all that old school stuff.

lilbaldin0 · May 16

I paid for a custom font from Creative Market that is meant to be used on web pages and I'm getting the syntax error on line 1 message - I believe it's because it's HTML, is there a way to translate to CSS?

https://static1.squarespace.com/static/66461e16a19a421a2cbb8139/t/664627d6a69d517393ec0426/1715873750498/milkandclay-bold-webfont.woff2

tuanphan · May 18

On 5/16/2024 at 11:07 PM, lilbaldin0 said:

I paid for a custom font from Creative Market that is meant to be used on web pages and I'm getting the syntax error on line 1 message - I believe it's because it's HTML, is there a way to translate to CSS?

https://static1.squarespace.com/static/66461e16a19a421a2cbb8139/t/664627d6a69d517393ec0426/1715873750498/milkandclay-bold-webfont.woff2

Can you take a screenshot of code?

kiannabanana · September 19

I'm trying to change the logo on specific pages and am getting a syntax error on line 1 with this CSS:

<style>
 header#header img {
    content: url(https://static1.squarespace.com/static/610bb16aa104af335d7c00d9/t/6268eb9a56ae8b2e235a7443/1651043227054/Hexaplanter-BlackLogo-Correct.png);
}
</style>

tuanphan · September 20

34 minutes ago, kiannabanana said:
I'm trying to change the logo on specific pages and am getting a syntax error on line 1 with this CSS:
<style>
 header#header img {
    content: url(https://static1.squarespace.com/static/610bb16aa104af335d7c00d9/t/6268eb9a56ae8b2e235a7443/1651043227054/Hexaplanter-BlackLogo-Correct.png);
}
</style>

This code, you need to add it to Individual Page Header Injection

kiannabanana · September 23

Thank you!!

Syntax Error on Line 1

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources