Search the Community
Showing results for tags 'html'.
Found 214 results
-
Page width issue when adding widget code to website
lucky14 posted a question in Coding and Customization
Site URL: https://fetch-club-bedford.squarespace.com/ Hi All, Wondering if anyone can solve an issue I am having on the below website, when I add a scrolling widget from reviewsonmywebsite.com, on smaller screens it adds a sideways scrolling bar to the bottom of the website. I have tried adding a width/max width into the code but with no joy? Any help would be greatly appreciated! C. https://fetch-club-bedford.squarespace.com/ Password: fetch14 Widget Code: <div data-token="12xtOT8YJ6bmJYxW5Tiy2QfxLMSQo5MemeJxyKXj9BJhR5LbXS" class="romw-reviews"></div><script src="https://reviewsonmywebsite.com/js/embedLoader.js?id=16985fd9e429040ba7c6" type="text/javascript"></script> -
Site URL: https://www.enchantedsexandlove.com Hi! I am having a hard time adding a convertkit form to my site. When I try to add the html to a code block, it says "script disabled" and then the form shows up at the bottom of the site (not where I inserted the block) and obstructed by a picture. I took the code out to avoid confusing any potential visitors, but would appreciate any thoughts or advice on this topic! Thank you!
-
Custom HTML to center-justify post submit message?
dobbiedada posted a question in Coding and Customization
Site URL: http://www.timthorn.com Hi, I'm a newb here so apologies if this is a dumb question. I did search and could not find a similar question answered. After a user has signed up on my email list I display a post-submit message, but the text is left justified and I would like it to be center-justified. I couldn't see how to do this via the regular squarespace interface, and squarespace support have confirmed that I would need to use custom HTML per https://support.squarespace.com/hc/en-us/articles/205813888-Advanced-Form-Block-options#toc-add-post-submit-html However, I know almost nothing about HTML. Could some kind sage person show me an example of how I would do this? -
Hello! (First Time Here) I'm running into issues with a javascript not loading in a code block for a video player I am trying to implement. The scripts work and load on a local implementation and on a non-squarespace hosted implementation. Here is the code in question: <meta charset="UTF-8"> <html> <head> <script src="https://www.mysite.xyz/vendome/js/jquery-3.1.0.min.js"></script> <script src="https://www.mysite.xyz/vendome/js/jquery.cookie.js"></script> <script src="https://www.mysite.xyz/vendome/webrtc.js"></script> </head> <body> <div class="div-section"> <table> <tr> <td><input type="hidden" id="sdpURL" size="50" value=""/></td></tr> <tr> <td><input type="hidden" id="applicationName" size="25" value=""/></td></tr> <tr> <td><input type="hidden" id="streamName" size="25" value=""/></td></tr> <tr> </table> </div> <div class="div-section"> <video id="remoteVideo" autoplay playsinline controls muted style="width:1000px;"></video> </div> <td><input type="button" id="buttonGo" onclick="start()" value="" /></td> <input type="button" id="buttonCheckStream" onclick="getAvailableStreams()" value="Get Available Streams" /> <script type="text/javascript"> pageReady(); </script> <div> <span id="sdpDataTag"></span> </div> </body> </html> jquery.cookie.js will not load causing the next scripts to not function. When you load the page we get "Uncaught TypeError: $.cookie is not a function". I'm fairly certain that the jquery scripts aren't loading twice and over writing eachother like other posts have suggested. I've tried renaming the the cookie.js as well but no luck. Could this have something to do with AJAX? Is there anything we could do to force the scripts to load? Any advice is appreciated! (Excuse the bad HTML, I'm from a python background.) EDIT: The template is AJAX compatible and the option is enabled.
-
PDF file attached to customer notification email (html)
MATTER posted a question in Coding and Customization
Site URL: https://goldfish-koi-xjg4.squarespace.com/ Hi there! I need to attach 2 PDF files (terms + cancellation policy) to these customer notification emails: 1. order confirmation 2. order shipment confirmation I would like the customer to receive these pdf as part of the email, so they can just click on PDF sign and open it or save on their computer. Thanks! -
Site URL: http://www.skin-matter.com Hi @tuanphan I need to do some changes in my shopping cart overview. Picture is here attached. Basically, I would lie kto: - Hide during the checkout the additional info about the price (100ml / 100g) - product price should be a little bolder and bigger - product description should be a little smaller Thanks!
-
Embedded 'Constant Contact' Signup Not Displaying
shanalogic23 posted a question in Coding and Customization
I am having trouble getting my embedded constant contact form to display on a squarespace page. The page is: http://www.acafe.com/newsletter The code I have placed in using the code block is <!-- Begin Constant Contact Inline Form Code --> <div class="ctct-inline-form" data-form-id="6526d89e-0bcc-4a9e-94ce-200b84011472"></div> <!-- End Constant Contact Inline Form Code --> I have placed this code into the footer code injection area located at: settings > advanced > code injection > footer <!-- Begin Constant Contact Inline Form Code --> <div class="ctct-inline-form" data-form-id="6526d89e-0bcc-4a9e-94ce-200b84011472"></div> <!-- End Constant Contact Inline Form Code --> But it won't display. Maybe I'm missing some part of the code or am putting the footer code in the wrong spot. Or is it because I don't have access to a code injection unless I upgrade? Anyone got a tip or a workaround? -
Site URL: https://goldfish-koi-xjg4.squarespace.com/config/pages Hi @tuanphan I want to change the style & design of the waiting list email - block in black color. Update font, color and button style (font, color). also I want to add the price of the product. Right now it is showing the price per 100ml (which I legally have to show) since it is entered in the additional field by product description. Can you help please?
-
Site URL: http://lightnerlawfirm.com I am trying to add a button so customers can use the option of Law pay on my site. It says they can provide me with a HTML snippet if I cannot create image hyper links. Is this what I need? Attached is the icon i would like to use for the button to take them to law pays page.
-
Has anyone figured out a way to edit the text on the Donation payment page? I'd like to use this function to accept client deposits, but don't want to have a disclaimer on there about the wording saying "donation" when they are in fact submitting a "deposit" for a project. Not sure if there's a way to access the back end to change HTML or if there's an override I can use via Code Injection under Advanced Settings. Thanks in advance! Note: My site is on a Basic Commerce plan, if that makes a difference.
-
Site URL: http://www.batsevamakes.com How does one make buttons be side by side in Mobile view? I want them to be inline with each other so that they can act as "previous project" and "next project" buttons.
-
Site URL: https://www.gearboxrentals.com Im having trouble differentiating my call-to-action button on my site navigation bar. I need my "rent" button to be completely different maybe even have a border and be on the right side of the page. What css do I need to add to make this happen? My template is Horizon and my rent page is an index page. Template: Horizon Webste URL: www.gearboxrentals.com
-
Site URL: https://dtcforce.com/integrations Hi guys I would like to add a search box on a page(www.dtcforce.com/integrations) where visitors can search for different images, which are located in a code block. -
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!
- 4 replies
-
- 1
-
-
- html
- customized
- (and 1 more)
-
Site URL: https://www.core4.com.au/home-1 Hi there, Squarespace 7.1 user. I am trying to make my code block with the 3 results column view for desktop but they are stacking on top of one another. Does anyone know why my code keeps stacking rather than sitting next to each other? Also why the icons arent appearing. Screenshots attached and code below. HTML <div class="content-103"> <div class="container"> <div class="row"> <h2 class="sercies-title">Our Awesome Services</h2> <div class="col-md-4 col-sm-4"> <div class="service-post"> <div class="service-content"> <div class="service-icon"> <i class="fa fa-share-alt"></i> </div> <!-- service-icon --> <h3 class="service-title">Advertising</h3> <p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p> </div> <!-- service-content --> <div class="service-hover"></div> </div> </div> <div class="col-md-4 col-sm-4"> <div class="service-post"> <div class="service-content"> <div class="service-icon"> <i class="fa fa-pencil"></i> </div> <!-- .s-icon --> <h3 class="service-title">Branding Design</h3> <p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p> </div> <!-- service-content --> <div class="service-hover"></div> </div> </div> <div class="col-md-4 col-sm-4"> <div class="service-post"> <div class="service-content"> <div class="service-icon"> <i class="fa fa-lightbulb-o"></i> </div> <!-- .s-icon --> <h3 class="service-title">Creative Marketing</h3> <p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p> </div> <!-- service-content --> <div class="service-hover"></div> </div> </div> </div> </div> </div> CSS .content-103{ background: #f3f3f3; padding-bottom:50px; } .content-103 .sercies-title{ text-align:center; padding: 50px 0; } .service-post { background: #fff; padding: 30px; text-align: center; cursor: pointer; position: relative; z-index: 12; margin-bottom: 30px; -moz-box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08); -webkit-box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08); } .content-103 .service-content { position: relative; z-index: 13; } .content-103 .service-icon { margin: 10px 0 20px 0; width: 50px; height: 50px; border-radius: 25px; text-align: center; border: 2px solid #eb7a5c; margin-left: auto; margin-right: auto; line-height: 50px; -moz-transition: color, 250ms; -o-transition: color, 250ms; -webkit-transition: color, 250ms; transition: color, 250ms; } .content-103 .service-post:hover .service-icon { border-color: #fff; } .content-103 .service-icon i { font-size: 18px; color: #eb7a5c; } .content-103 .service-post:hover .service-icon i { color: #fff; } .content-103 .service-title { font-size: 16px; font-weight: normal; margin-bottom: 15px; -moz-transition: color, 250ms; -o-transition: color, 250ms; -webkit-transition: color, 250ms; transition: color, 250ms; } .content-103 .service-post:hover .service-title { color: #fff; } .content-103 .service-description { -moz-transition: color, 250ms; -o-transition: color, 250ms; -webkit-transition: color, 250ms; transition: color, 250ms; } .content-103 .service-post:hover .service-description { color: #fff; } .content-103 .service-hover { position: absolute; top: 0; left: 0; z-index: 11; width: 100%; height: 0px; background: #eb7a5c; -moz-transition: width, 250ms; -o-transition: width, 250ms; -webkit-transition: width, 250ms; transition: width, 250ms; } /*hover-background-color effect*/ .content-103 .service-post:hover .service-hover { height: 100%; } Thank you
-
Is it possible to let customers make an account on your website that has their own profile user page where they can add things like a profile picture, bio and pictures to a portfolio? Is this something that can be done with coding or do I need a completely different website provider? Any help would be greatly appreciated, thanks!
-
Injected Code Affecting All Pages Instead of Just One
MarkFreeman posted a question in Coding and Customization
Site URL: https://nymn.org Hello, I'm using some custom HTML to create a fixed floating button on my website's homepage that visitors can click to join our mailing list. The code is injected into the Homepage HTML, with the goal being for the button to only appear on the Homepage. However, the button is persistent across the entire site, which we do not want. On the Squarespace backend, the button acts as expected, appearing on the Homepage but disappearing on all other pages. However, when the webpage is opened up seperately, the button is visible on all pages. I've posted the HTML as well as the CSS we are using down below. Any help is appreciated, thank you! -
Site URL: https://www.pawparazzipetphoto.com I'm embedding my Tave contact form using it's "iFrame" HTML code and pasting it into the Code Block on my website - The contact form shows up on my end after pasting it, but NOT on the Live site, it's only showing a portion of the text. This is only since I switched to a different template....help much appreciated, I know nothing about html and coding. I've attached images of what my code looks like from Tave, what the contact form looks like while editing my site, and then what I see when I'm viewing it live.
-
Site URL: https://smilodon-tulip-mbea.squarespace.com/synopsis-1 Hi, I have background image I would like to run through the footer, however the footer appears as an opaque color. How can I make the footer transparent. I tried inserting this code into the pages advanced settings, but no cannoli. <head footer#footer { display: none; } } </head> And also the header toggles between opaque and transparent, I would like to make it exclusively transparent. Any and all replies much appreciated. thx
-
Site URL: https://www.joeblackham.com/new-page Hey all - sorry for another question but I've used the following in a code box and it is functioning - only problem is it is off-centre (this is a screenshot from my iMac and it a lot worse on laptop) and causing my Navigation pane to shrink! Images are attached - thanks for your help! <div id="generic_price_table"> <section> <div class="container"> <div class="row"> <div class="col-md-12"> <!--PRICE HEADING START--> <div class="price-heading clearfix"> </div> <!--//PRICE HEADING END--> </div> </div> </div> <div class="container"> <!--BLOCK ROW START--> <div class="row"> <div class="col-md-4"> <!--PRICE CONTENT START--> <div class="generic_content clearfix"> <!--HEAD PRICE DETAIL START--> <div class="generic_head_price clearfix"> <!--HEAD CONTENT START--> <div class="generic_head_content clearfix"> <!--HEAD START--> <div class="head_bg"></div> <div class="head"> <span>build</span> </div> <!--//HEAD END--> </div> <!--//HEAD CONTENT END--> <!--PRICE START--> <div class="generic_price_tag clearfix"> <span class="price"> <span class="sign">£</span> <span class="currency">69</span> <span class="cent">.99</span> <span class="month">/MON</span> </span> </div> <!--//PRICE END--> </div> <!--//HEAD PRICE DETAIL END--> <!--FEATURE LIST START--> <div class="generic_feature_list"> <ul> <li><span>1</span> social network</li> <li><span>1</span> post per week</li> <li><span>1</span> campaign per month</li> <li><span></span> Creation/Optimization</li> <li><span></span> Social Analytics</li> <li><span></span>Build Strategy</li> </ul> </div> <!--//FEATURE LIST END--> <!--BUTTON START--> <div class="generic_price_btn clearfix"> <a class="" href="">buy now</a> </div> <!--//BUTTON END--> </div> <!--//PRICE CONTENT END--> </div> <div class="col-md-4"> <!--PRICE CONTENT START--> <div class="generic_content active clearfix"> <!--HEAD PRICE DETAIL START--> <div class="generic_head_price clearfix"> <!--HEAD CONTENT START--> <div class="generic_head_content clearfix"> <!--HEAD START--> <div class="head_bg"></div> <div class="head"> <span>growth</span> </div> <!--//HEAD END--> </div> <!--//HEAD CONTENT END--> <!--PRICE START--> <div class="generic_price_tag clearfix"> <span class="price"> <span class="sign">£</span> <span class="currency">99</span> <span class="cent">.99</span> <span class="month">/MON</span> </span> </div> <!--//PRICE END--> </div> <!--//HEAD PRICE DETAIL END--> <!--FEATURE LIST START--> <div class="generic_feature_list"> <ul> <li><span>Up to 2</span> social networks</li> <li><span>2</span> posts per week</li> <li><span>2</span> campaigns per month</li> <li><span></span> Creation/Optimization</li> <li><span></span> Social Analytics</li> <li><span></span>Growth Strategy</li> <li><span></span> Account Monitoring</li> </ul> </div> <!--//FEATURE LIST END--> <!--BUTTON START--> <div class="generic_price_btn clearfix"> <a class="" href="">Buy now</a> </div> <!--//BUTTON END--> </div> <!--//PRICE CONTENT END--> </div> <div class="col-md-4"> <!--PRICE CONTENT START--> <div class="generic_content clearfix"> <!--HEAD PRICE DETAIL START--> <div class="generic_head_price clearfix"> <!--HEAD CONTENT START--> <div class="generic_head_content clearfix"> <!--HEAD START--> <div class="head_bg"></div> <div class="head"> <span>Acceleration</span> </div> <!--//HEAD END--> </div> <!--//HEAD CONTENT END--> <!--PRICE START--> <div class="generic_price_tag clearfix"> <span class="price"> <span class="sign">£</span> <span class="currency">149</span> <span class="cent">.99</span> <span class="month">/MON</span> </span> </div> <!--//PRICE END--> </div> <!--//HEAD PRICE DETAIL END--> <!--FEATURE LIST START--> <div class="generic_feature_list"> <ul> <li><span>Up to 3</span> social networks</li> <li><span>4</span> posts per week</li> <li><span>3</span> campaigns per month</li> <li><span></span> Creation/Optimization</li> <li><span></span> Social Analytics</li> <li><span></span>Acceleration Strategy</li> <li><span></span> Account Monitoring</li> <li><span></span>Customer Relation Strategy</li> </ul> </div> <!--//FEATURE LIST END--> <!--BUTTON START--> <div class="generic_price_btn clearfix"> <a class="" href="">buy now</a> </div> <!--//BUTTON END--> </div> <!--//PRICE CONTENT END--> </div> </div> <!--//BLOCK ROW END--> </div> <style> @import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700italic,700,900italic,900); @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); body{background-color:#eee;} #generic_price_table{ background-color: #fff; } /*PRICE COLOR CODE START*/ #generic_price_table .generic_content{ background-color: #f0f0f0; } #generic_price_table .generic_content .generic_head_price{ background-color: #f6f6f6; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{ border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head span{ color: #525252; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .month{ color: #414141; } #generic_price_table .generic_content .generic_feature_list ul li{ color: #414141; } #generic_price_table .generic_content .generic_feature_list ul li span{ color: #4aa771; font-weight: bold; } #generic_price_table .generic_content .generic_feature_list ul li:hover{ background-color: #E4E4E4; border-left: 5px solid #2ECC71; } #generic_price_table .generic_content .generic_price_btn a{ border: 1px solid #2ECC71; color: #2ECC71; } #generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg{ border-color: #2ECC71 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #2ECC71; color: #fff; } #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head span, #generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span{ color: #fff; } #generic_price_table .generic_content:hover .generic_price_btn a, #generic_price_table .generic_content.active .generic_price_btn a{ background-color: #2ECC71; color: #fff; } #generic_price_table{ margin: 50px 0 50px 0; font-family: 'Raleway', sans-serif; } .row .table{ padding: 28px 0; } /*PRICE BODY CODE START*/ #generic_price_table .generic_content{ overflow: hidden; position: relative; text-align: center; } #generic_price_table .generic_content .generic_head_price { margin: 0 0 20px 0; } #generic_price_table .generic_content .generic_head_price .generic_head_content{ margin: 0 0 50px 0; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{ border-style: solid; border-width: 90px 1411px 23px 399px; position: absolute; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head{ padding-top: 40px; position: relative; z-index: 1; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head span{ font-family: "Raleway",sans-serif; font-size: 28px; font-weight: 400; letter-spacing: 2px; margin: 0; padding: 0; text-transform: uppercase; } #generic_price_table .generic_content .generic_head_price .generic_price_tag{ padding: 0 0 20px; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price{ display: block; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{ display: inline-block; font-family: "Lato",sans-serif; font-size: 28px; font-weight: 400; vertical-align: middle; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{ font-family: "Lato",sans-serif; font-size: 60px; font-weight: 300; letter-spacing: -2px; line-height: 60px; padding: 0; vertical-align: middle; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{ display: inline-block; font-family: "Lato",sans-serif; font-size: 24px; font-weight: 400; vertical-align: bottom; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .month{ font-family: "Lato",sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 3px; vertical-align: bottom; } #generic_price_table .generic_content .generic_feature_list ul{ list-style: none; padding: 0; margin: 0; } #generic_price_table .generic_content .generic_feature_list ul li{ font-family: "Lato",sans-serif; font-size: 18px; padding: 15px 0; transition: all 0.3s ease-in-out 0s; } #generic_price_table .generic_content .generic_feature_list ul li:hover{ transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } #generic_price_table .generic_content .generic_feature_list ul li .fa{ padding: 0 10px; } #generic_price_table .generic_content .generic_price_btn{ margin: 20px 0 32px; } #generic_price_table .generic_content .generic_price_btn a{ border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; -webkit-border-radius: 50px; display: inline-block; font-family: "Lato",sans-serif; font-size: 18px; outline: medium none; padding: 12px 30px; text-decoration: none; text-transform: uppercase; } #generic_price_table .generic_content, #generic_price_table .generic_content:hover, #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content .generic_head_price .generic_head_content .head h2, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head h2, #generic_price_table .generic_content .price, #generic_price_table .generic_content:hover .price, #generic_price_table .generic_content .generic_price_btn a, #generic_price_table .generic_content:hover .generic_price_btn a{ transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } @media (max-width: 320px) { } @media (max-width: 767px) { #generic_price_table .generic_content{ margin-bottom:75px; } } @media (min-width: 768px) and (max-width: 991px) { #generic_price_table .col-md-3{ float:left; width:50%; } #generic_price_table .col-md-4{ float:left; width:50%; } #generic_price_table .generic_content{ margin-bottom:75px; } } @media (min-width: 992px) and (max-width: 1199px) { } @media (min-width: 1200px) { } #generic_price_table_home{ font-family: 'Raleway', sans-serif; } .text-center h1, .text-center h1 a{ color: #7885CB; font-size: 30px; font-weight: 300; text-decoration: none; } .demo-pic{ margin: 0 auto; } .demo-pic:hover{ opacity: 0.7; } #generic_price_table_home ul{ margin: 0 auto; padding: 0; list-style: none; display: table; } #generic_price_table_home li{ float: left; } #generic_price_table_home li + li{ margin-left: 10px; padding-bottom: 10px; } #generic_price_table_home li a{ display: block; width: 50px; height: 50px; font-size: 0px; } #generic_price_table_home .blue{ background: #3498DB; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .emerald{ background: #2ECC71; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .grey{ background: #7F8C8D; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .midnight{ background: #34495E; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .orange{ background: #E67E22; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .purple{ background: #9B59B6; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .red{ background: #E74C3C; transition:all 0.3s ease-in-out 0s; } #generic_price_table_home .turquoise{ background: #1ABC9C; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .blue:hover, #generic_price_table_home .emerald:hover, #generic_price_table_home .grey:hover, #generic_price_table_home .midnight:hover, #generic_price_table_home .orange:hover, #generic_price_table_home .purple:hover, #generic_price_table_home .red:hover, #generic_price_table_home .turquoise:hover{ border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .divider{ border-bottom: 1px solid #ddd; margin-bottom: 20px; padding: 20px; } #generic_price_table_home .divider span{ width: 100%; display: table; height: 2px; background: #ddd; margin: 50px auto; line-height: 2px; } #generic_price_table_home .itemname{ text-align: center; font-size: 50px ; padding: 50px 0 20px ; border-bottom: 1px solid #ddd; margin-bottom: 40px; text-decoration: none; font-weight: 300; } #generic_price_table_home .itemnametext{ text-align: center; font-size: 20px; padding-top: 5px; text-transform: uppercase; display: inline-block; } #generic_price_table_home .footer{ padding:00px 0; } .price-heading{ text-align: center; } .price-heading h1{ color: #666; margin: 0; padding: 0 0 50px 0; } .demo-button { background-color: #333333; color: #ffffff; display: table; font-size: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 50px; outline-color: -moz-use-text-color; outline-style: none; outline-width: medium ; padding: 10px; text-align: center; text-transform: uppercase; } .bottom_btn{ background-color: #333333; color: #ffffff; display: table; font-size: 28px; margin: 60px auto 20px; padding: 10px 25px; text-align: center; text-transform: uppercase; } .demo-button:hover{ background-color: #666; color: #FFF; text-decoration:none; } .bottom_btn:hover{ background-color: #666; color: #FFF; text-decoration:none; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
-
Site URL: https://www.joeblackham.com/new-page I'm having difficulty with the position of some custom CSS I'm using for Pricing Tables. When I am in the edit mode, the tables all position next to each other (which is what I would like). However, when I click done and come out, they reposition underneath each other. My code blocks are positioned next to each other, so this makes me think it's something in the CSS making this happen! This is the code I'm using: @import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700italic,700,900italic,900); @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); body{background-color:#eee;} #generic_price_table{ background-color: #f0eded; } #generic_price_table .generic_content{ background-color: #fff; } #generic_price_table .generic_content .generic_head_price{ background-color: #f6f6f6; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{ border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head span{ color: #525252; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .month{ color: #414141; } #generic_price_table .generic_content .generic_feature_list ul li{ color: #a7a7a7; } #generic_price_table .generic_content .generic_feature_list ul li span{ color: #414141; } #generic_price_table .generic_content .generic_feature_list ul li:hover{ background-color: #E4E4E4; border-left: 5px solid #2ECC71; } #generic_price_table .generic_content .generic_price_btn a{ border: 1px solid #2ECC71; color: #2ECC71; } #generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg{ border-color: #2ECC71 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #2ECC71; color: #fff; } #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head span, #generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span{ color: #fff; } #generic_price_table .generic_content:hover .generic_price_btn a, #generic_price_table .generic_content.active .generic_price_btn a{ background-color: #2ECC71; color: #fff; } #generic_price_table{ margin: 50px 0 50px 0; font-family: 'Raleway', sans-serif; } .row .table{ padding: 28px 0; } /*PRICE BODY CODE START*/ #generic_price_table .generic_content{ overflow: hidden; position: relative; text-align: center; } #generic_price_table .generic_content .generic_head_price { margin: 0 0 20px 0; } #generic_price_table .generic_content .generic_head_price .generic_head_content{ margin: 0 0 50px 0; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{ border-style: solid; border-width: 90px 1411px 23px 399px; position: absolute; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head{ padding-top: 40px; position: relative; z-index: 1; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head span{ font-family: "Raleway",sans-serif; font-size: 28px; font-weight: 400; letter-spacing: 2px; margin: 0; padding: 0; text-transform: uppercase; } #generic_price_table .generic_content .generic_head_price .generic_price_tag{ padding: 0 0 20px; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price{ display: block; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{ display: inline-block; font-family: "Lato",sans-serif; font-size: 29px; font-weight: 400; vertical-align: middle; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{ font-family: "Lato",sans-serif; font-size: 60px; font-weight: 300; letter-spacing: -2px; line-height: 60px; padding: 0; vertical-align: middle; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{ display: inline-block; font-family: "Lato",sans-serif; font-size: 24px; font-weight: 400; vertical-align: bottom; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .month{ font-family: "Lato",sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 3px; vertical-align: bottom; } #generic_price_table .generic_content .generic_feature_list ul{ list-style: none; padding: 0; margin: 0; } #generic_price_table .generic_content .generic_feature_list ul li{ font-family: "Lato",sans-serif; font-size: 18px; padding: 15px 0; transition: all 0.3s ease-in-out 0s; } #generic_price_table .generic_content .generic_feature_list ul li:hover{ transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } #generic_price_table .generic_content .generic_feature_list ul li .fa{ padding: 0 10px; } #generic_price_table .generic_content .generic_price_btn{ margin: 20px 0 32px; } #generic_price_table .generic_content .generic_price_btn a{ border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; -webkit-border-radius: 50px; display: inline-block; font-family: "Lato",sans-serif; font-size: 18px; outline: medium none; padding: 12px 30px; text-decoration: none; text-transform: uppercase; } #generic_price_table .generic_content, #generic_price_table .generic_content:hover, #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content .generic_head_price .generic_head_content .head h2, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head h2, #generic_price_table .generic_content .price, #generic_price_table .generic_content:hover .price, #generic_price_table .generic_content .generic_price_btn a, #generic_price_table .generic_content:hover .generic_price_btn a{ transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } @media (max-width: 320px) { } @media (max-width: 767px) { #generic_price_table .generic_content{ margin-bottom:75px; } } @media (min-width: 768px) and (max-width: 991px) { #generic_price_table .col-md-3{ float:left; width:50%; } #generic_price_table .col-md-4{ float:left; width:50%; } #generic_price_table .generic_content{ margin-bottom:75px; } } @media (min-width: 992px) and (max-width: 1199px) { } @media (min-width: 1200px) { } #generic_price_table_home{ font-family: 'Raleway', sans-serif; } .text-center h1, .text-center h1 a{ color: #7885CB; font-size: 30px; font-weight: 300; text-decoration: none; } .demo-pic{ margin: 0 auto; } .demo-pic:hover{ opacity: 0.7; } #generic_price_table_home ul{ margin: 0 auto; padding: 0; list-style: none; display: table; } #generic_price_table_home li{ float: left; } #generic_price_table_home li + li{ margin-left: 10px; padding-bottom: 10px; } #generic_price_table_home li a{ display: block; width: 50px; height: 50px; font-size: 0px; } #generic_price_table_home .blue{ background: #3498DB; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .emerald{ background: #2ECC71; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .grey{ background: #7F8C8D; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .midnight{ background: #34495E; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .orange{ background: #E67E22; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .purple{ background: #9B59B6; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .red{ background: #E74C3C; transition:all 0.3s ease-in-out 0s; } #generic_price_table_home .turquoise{ background: #1ABC9C; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .blue:hover, #generic_price_table_home .emerald:hover, #generic_price_table_home .grey:hover, #generic_price_table_home .midnight:hover, #generic_price_table_home .orange:hover, #generic_price_table_home .purple:hover, #generic_price_table_home .red:hover, #generic_price_table_home .turquoise:hover{ border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .divider{ border-bottom: 1px solid #ddd; margin-bottom: 20px; padding: 20px; } #generic_price_table_home .divider span{ width: 100%; display: table; height: 2px; background: #ddd; margin: 50px auto; line-height: 2px; } #generic_price_table_home .itemname{ text-align: center; font-size: 50px ; padding: 50px 0 20px ; border-bottom: 1px solid #ddd; margin-bottom: 40px; text-decoration: none; font-weight: 300; } #generic_price_table_home .itemnametext{ text-align: center; font-size: 20px; padding-top: 5px; text-transform: uppercase; display: inline-block; } #generic_price_table_home .footer{ padding:40px 0; } .price-heading{ text-align: center; } .price-heading h1{ color: #666; margin: 0; padding: 0 0 50px 0; } .demo-button { background-color: #333333; color: #ffffff; display: table; font-size: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 50px; outline-color: -moz-use-text-color; outline-style: none; outline-width: medium ; padding: 10px; text-align: center; text-transform: uppercase; } .bottom_btn{ background-color: #333333; color: #ffffff; display: table; font-size: 28px; margin: 60px auto 20px; padding: 10px 25px; text-align: center; text-transform: uppercase; } .demo-button:hover{ background-color: #666; color: #FFF; text-decoration:none; } .bottom_btn:hover{ background-color: #666; color: #FFF; text-decoration:none; }
-
I am looking to purchase or find a Calorie Intake Calculator to plug-in my website. I don't have the formulas so I would like to buy one already made. thank you!!
-
Change HTML language tag on individual pages
atshort21 posted a question in Coding and Customization
Hello all, I have a site with two languages on same template. I'm in the process of adding hreflang tags but my translated pages still have HTML language in original language. My site is in ENG, but is there a way I can override this global setting and give page it's own HTML lang setting? Been looking for a fix but can't find one. Andrew -
Creating a percentage ring with pre-made code
hugorsmith posted a question in Coding and Customization
Hey all, I am attempting to hard-code in a set of percentage rings using HTML, CSS, and Javascript (migrating from Wordpress, where this was just a plugin). This is the code I am trying to integrate: https://codyhouse.co/ds/components/info/circular-progress-bar I put the HTML inside a code block, and it shows up correctly. However, the CSS and Javascript do not seem to be working, despite the code editor not kicking back any errors, and it working outside of Squarespace. How can I add this code? Thanks, Hugo -
I would like to make a fetch request from my squarespace site to a weather data provider. The code works fine when I write it into a code block directly on the page. My issue is that the code contains an API key that I want to keep secure, yet accessible. My strategy to keep this "simple" was to use the method described in this article to upload my file that runs the script which uses the API key, and then reference that file using <script src="/s/javascriptfile.js"></script> The biggest question is whether storing an API key in an uploaded file linked on a disabled page and then referencing that file is a secure way to access the API key without showing it to the world. The next question is do I really need to wait overnight for the references to uploaded files to work? That is one of the problems noted in the same article. Thanks!
