Search the Community
Showing results for tags 'html'.
Found 104 results
-
Found this line using Google Inspect <a class="sqs-lightbox-meta-trigger">•</a> As this isn't CSS, how do I change it? I'm aware of code injection, and how to change this into what I'm after, but I don't know how to put this into the code injection in a way that it's read correctly. The code I wish to change it to: <a class="sqs-lightbox-meta-trigger">ⓘ</a> (I'm just changing the symbol that activates the meta pop up shown on the lightbox over gallery images)
-
Hey fellow users, I am new to squarespace and i am trying to add code blocks for my site, the code i want to add is icons to represent some of the benfits my site has. I have copied and pasted the code but the code is now visually showing on my website, previously it was and now it is not i was wondering if anyone can help me out with this as i am trying to have my site up by the end of the week
-
Hi, So I have my nav bar centered, but I want a button on top of my nav bar that says contents and when clicked the nav bar becomes visible right below it. Code wise I was thinking the functionality be someone like this demo except it will display horizontal not vertical. I understand the code and everything I am little confused on how to exactly make it work with squarespace's built in nav bar already. Anyone have any idea how to maybe go about this? I included an image to help show how I kind of want it to look after one clicks conte button.Thank you!
-
HELP - I want to launch but content keeps disappearing
Marisasim posted a question in Coding and Customization
Hello, I have added in code from Calendly & Jotform onto a page on my website using a code content block. It works and i can view in google chrome and my phone but then after 30 mins or so, the built in form and calendar disappear. www.audityourlife.com.au/booknow Any suggestions? This is the Calendly code: <!-- Calendly inline widget begin --> <div class="calendly-inline-widget" data-url="https://calendly.com/audityourlife/15min?primary_color=d8a192" style="min-width:320px;height:630px;"></div> <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script> <!-- Calendly inline widget end --> Jotform code: <script type="text/javascript" src="https://form.jotform.com/jsform/193523431377863"></script> -
HTML/CSS Modal Popups no longer working after launch
SADA posted a question in Coding and Customization
Hi there, I've just switched templates on my website and now my code blocks won't run properly. The browser link is correct but it's like it won't load. If I mark and enter manually the popups works like it always did. I've already switched off Ajax Loading so instead of not just working it won't throw you back to a preview site for whatever reason =/ Anyone got any tips? I've tried altering my code but it's not permanent solves that are useful.. I know Squarespace is the culprit but what am I doing wrong after I activated this new template? -
Embedding a timeline into a website on the 'Personal' plan
JamesG posted a question in Coding and Customization
Hi all. I'm building a website for a non-profit club and in that website, I would like to add a timeline of their history. I have managed to generate a lovely, interactive timeline for them through TimelineJS using Javascript. Obviously in the trial version of the website, I am able to test it out, embedding it with an <iframe></iframe> tag. However, for a couple of reasons, the Personal plan is the only one they are going to be able to use, which means although I can add custom code, including HTML and CSS, I am unable to add the TimelineJS timeline to the site, which is a shame. I believe I could create a timeline manually in HTML and CSS alone. It wouldn't be as interactive though, since instead of pop-ups and clickable features, it would basically just be an image that is too large for the screen horizontally, that you have to scroll through. My question is, is this the best way to add a 'sort-of' timeline feature to a Personal website? I obviously don't want to damage the site in any way/cause any issues by adding too much custom code. Can anyone suggest a better way of adding some sort of a timeline to a Personal website? I am very much open to suggestions. Thanks! -
I entered a code block into my site to add a hover effect to my clickable images. Everything is working amazing on a desktop and laptop, but when using my mobile site the code blocks disappear when I press the back button. Is there a way to fix this issue? is It something with my code? ee4c6c83d91043e3b54e8dc380207ec6.mov -
Creating Multiple Version of a Site (for different locations)
JTX posted a question in Coding and Customization
Hi I have a tour operator site with activities in mutliple, quite different, locations. When people log into the site I would like them to be able to choose which location they are interested, similar to how one might choose a language. A few more details: Ideally I would use as little coding as possible Some of the pages (eg. about, contact) will be the same regardless of the location you choose, but once you choose the location the top menu bar should display the different pages eg. Home, Events, Activities, About ... The customer should be able to switch between sites easily through a dropdown on the menubar I have had a look and found this: https://support.squarespace.com/hc/en-us/articles/205809778-Creating-a-multilingual-site-in-Squarespace (example multilingual site here: https://bedford-multilingual.squarespace.com/) The problem with this is that the menu bar will only ever display the names of the different locations, so it will be clumbersome to navigate. Another suggestion is to create multiple sites and have a cover page linking to both, which seems overkill as I would need to pay twice for a simple website. It would also be clumbersome as I think the user would need to go all the way back to home to switch to the other site. I can't think of an example for other tour operators, but the same principle work on the Intuit site (https://www.intuit.com/): you can select an Indian, American, or Canadian version of the site, which are all similar but tailored to different locations. If you want to change at any point there is country dropdown in the top right hand corner. Would love to know if such a thing is possible. Ideally without html but am open to suggestions. This is something I see a lot with online stores and is going to be really important to a lot of people managing international websites. Perhaps there is a plugin that would help? Though I have been unable to find one. Cheers -
Hey guys I am new to html customization but I followed some seemingly easy instructions on how to add a colored background to my text blocks by creating a code block . Here's the code I used: <div class="grey"> <h2>1. Inquiry </h2> <p>text text text </p> </div> <style> .grey { background: #ffe6ee; padding: 25px; text-align: left; } </style> I repeated this three more times and all of them show except the first block. Any ideas? I suspect it may have to do with the underline design code I added in as well: <html> <head> <style> h1 { text-decoration: underline wavy; } Any suggestions or insight would be great!
-
Hello, so I need to add custom html code as purchase buttons on the site, Does anyone know of a way to change position of the button? I want to make three buttons side by side horizontally but to my knowledge you can only add html code as a block so if I made three buttons, they'd have to all be vertical, which is not ideal. Thanks for your time. I attached what I want it to look like, ideally I could just replace those buttons with code exactly where they are.
-
I'm trying to create a 'download your free copy...' form for a PDF, with a 'Download' button that both stores the data in a Google spreadsheet (done) and downloads the document. I can add a simple download link in the post-submit HTML, but this is an extra click for the user and potentially confusing after they've already clicked 'Download'. So, I'd like the PDF to be automatically downloaded when the form is submitted. I've tried adding some Javascript, e.g. as per this thread, but nothing has worked. Is there some way to achieve this? Thanks!
-
Hello! I'm currently having a bit of an issue trying to tidy up an embedded code form for my client. I copy and pasted the code for a donation form, and what I'm trying to do is have it appear as a clickable button that opens a lightbox form, instead of having a massively long form that goes far past where I want it to. Here is the link to view the issue in it's entirety, since a screenshot of the full-length is impossible. Essentially I'd like to take that long form to the right of the image, and below the paragraph, and turn that into a "Donate" button, where the client clicks and then that large form pops out into a lightbox. Is this possible, or am I way out of my depths here? Thanks in advance!
-
Customizing Different Colors On The Collage Block
edustin1978 posted a question in Coding and Customization
I'm using the collage block throughout my portfolio site and I'd like it to appear in different colors on different pages. For example, if you visit: https://www.johnpattersonportfolio.com/#/zulily/, you'll see purple - which works with the presentation. However, if you go to https://www.johnpattersonportfolio.com/#/wizardsofthecoast1/, you'll see the purple again. I would like it to be a light blue instead. I want to customize the color of the collage for every one of the 11 pages I have. Please help! Thanks! Dustin -
Can't add a color and a link to words in markdown block?
karti posted a question in Coding and Customization
I am trying to add a color AND a link to several words on my website using the markdown block. For some reason, when I add a color and try to add a link to the same words, The color gets turned off. For example, I added the twitter link and the pink color is gone. Is there a way to fix this? Is there a bit of code I am missing? -
Hi, I am currently incorporating a background video through iframe by pulling the video through URL. I want to just display background video with an mp4 fie that is on the site already rather than grab it as a url. I am not sure how to add this mp4 file on squarespace and call it through. I want to try to just use the mp4 through video tag.
-
Hello, I am trying to wrap an html table in a border-image. I have the code working how I want it on jsfiddle (link on my page) but it is not working on Squarespace. Maybe some conflicting css? Maybe a picture size issue? I have tried 2000 px wide down to 400 px wide. I have tried classes, ids, border-image-source, border-image-slice, etc. Please help. Go to https://wldktz.com/table-designs The screenshot is from Squarespace gray border. The tiger skin border is from the jsfiddle. Thank you!
-
I would love assistance on what should be the simplest thing ever, but as my new trial and experience with SS is proving, SS has gone out of its way to make this difficult and inaccessible. For the template I selected, I would be very happy it keeping it as my landing page, however the only problem is that as a gallery, it wants to connect directly to the sub-breadcrumbed albums (or only) blank page therein. Is there a way to just change the URL link for that ONE link so it instead routes to a page on my main navigation? I spent a while with the live chat and they said it was not a possibility. Like I said, I am new to SS, but this is such an asininely easy thing to just toggle on/off WYSIWYG for that individual page. Am I missing it? Would really not have to start from scratch and find a new site hoster, Alex
-
Does anyone know how and where to embed an HTML code for website? Thank you ! Angie
-
Hi, I am writing JavaScript code in the footer and was trying to change css opacity as you scroll down with the onscroll function. I wanted to know how I could access the CSS from there.
-
Hi! I'm trying to create a family tree that users can interact with (for ex. a user clicks on a certain image and a drop down of information appears). Anyone have any templates or ideas for inspiration of how I can build this? HTML is fine! Alternatively, I could use another program (like LucidChart) and embed it onto a page...? Thanks so much!
-
How do I replace my site logo with straight HTML/CSS
Ryan_N posted a question in Coding and Customization
Hey! I'm using the Jasper template and would like to replace my site logo with pure HTML/CSS. I'm a designer and don't really code but I was able to figure enough out to convert my logo into a vector format and animate the HTML using CSS. If possible I'd only like the CSS animation to render on the home page and use the static final state on all other pages.Any help would be appreciated. -
I've im using code that is not functioning on mobile. It's ":hover", to cause an image become grey when selected/moused over. #block-267487b5b8d7cb36a00d:hover { filter: grayscale(50%); } It works great on desktop, but I'm wondering how can it be adjusted for mobile?
-
Mobile button/block needs multiple "clicks" to open
aaronrios posted a question in Coding and Customization
I am using code that is not at all on mobile devices - i understand from reading other posts that ":hover" doesnt function on mobile. Im looking for an alternative for two sets of code that I have applied to the same image - hoping it will work on both mobile and desktop. On mobile, the images are requiering multiple clicks This first one inverts the image (This one is targeted to a specific block🙂 #block-yui_3_17_2_1_1576941445838_49178:hover { filter: invert(100%); } This second one causes the image to increase in size (this one is NOT targeted to a specific block): a img.thumb-image { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } a img.thumb-image:hover, a img.thumb-image:active { -webkit-transform: scale(1.1); transform: scale(1.1); } It works great on desktop, but I'm wondering how can it be adjusted for mobile? -
How to use code block to insert a floating image
MaggieG posted a question in Coding and Customization
Hello! I am wondering how I can insert a small floating image, like the circle quote shown in the screen shot below? I would love to use this on sites in the future and would love to learn how to achieve it! Thank you in advance for any help! -
I need to know how to remove all of this negative space around this map. Can anyone show me? All that gray on the bottom - i want to remove and extend this map height and width.
