Categories
Squarespace

Adding a Site Border to Squarespace 7.1 (The BEST Way) [Video]

Adding a Site Border to Squarespace 7.1 (The BEST Way) – In this video I break down why the accepted solution out there is flawed, and the more complete way to add a border to your 7.1 site.Get the CSS Here:https://schwartz-edmisten.com/blog/adding-a-site-border-to-squarespace-7-1Save 10% off your first subscription of a Squarespace website or domain by using code PARTNER10. (This is an affiliate link, so if you end up setting your website live I will receive a small commission!)squarespace.syuh.net/sewebdesignSign up for my free Squarespace CSS for beginners eCourse:https://schwartz-edmisten.com/learn-css-4-day-ecourseLearn to create custom layouts in Squarespace!https://schwartz-edmisten.com/custom-layouts-with-flexboxMy goal is to help you create more custom Squarespace websites so that you can charge more for your services.If you need help designing, updating, or implementing custom code on your Squarespace website, you can hire me to do so through my contact page:https://schwartz-edmisten.com/contactIf my content has helped you out I would really appreciate a small donation to allow me to keep making tutorials:https://schwartz-edmisten.com/donateTimestamp:0:00 Analysis on why current method is wrong4:28 Re-writing it the correct wayMusic: https://soundcloud.com/justin-kolas

Categories
Squarespace

How to hide the background art pause button in Squarespace // Squarespace 7.1 Tutorial [Video]

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 http://bit.ly/guide-to-css—New to Squarespace 7.1, the background art feature generates interesting background designs for page sections. To learn more about all your options, be sure to check out the free training at https://insidethesquare.co/backgroundartIf you have background art enabled for a page section on your site, you might have noticed the pause/play button on the bottom right hand side of the page section. This button is pretty simple and totally customizable thanks to CSS!This tutorial will show you how to hide it completely, change the shape, or change the color… or both if you want to combine them!—Here are the codes from this tutorial:Want to hide the button? Try this:.background-pause-button.visible {display: none!important}Make it a square? This code will work!.background-pause-button.visible {border-radius: 0px!important}How about changing the color? Change the word purple in the code below to a web-safe color name, HEX color code, or an RGBA/HSL color you want to see:.background-pause-button.visible {background-color: purple!important}—🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 50 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css—🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️ —🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.—The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ —#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace

Categories
Squarespace

How to Customize Category Links in Squarespace // Squarespace Code Tutorial [Video]

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 http://bit.ly/guide-to-css—In a Squarespace blog post, you can have links to blog categories shown on the individual post page. Those category links are designed to match the look of your paragraph text, but you can use CSS to make them look like clickable buttons, complete with hover effects! This tutorial will show you an example style; codes below. Please note – If you are using an older version of Squarespace, you’ll need different codes! Check the bottom of this description for the selectors used in Brine as well as Bedford.—Here are the codes from this tutorial:This will give a background color, border, and padding to a category link. Change anything in bold so that it matches the style of your site!.blog-meta-item–categories a {background: yellow; border: 1px solid #000;padding: 0 .5rem;border-radius: 1rem;} This code will add the hover effect. Any color, typography, or font settings can be used here to make that link stand out on a hover..blog-meta-item–categories a:hover {background: #000!important;color: #FFF!important;} Using a Brine Squarespace theme? Replace “.blog-meta-item–categories a” with “.BlogItem-pagination-link-meta-item–categories”Using a Bedford Squarespace theme? Replace “.blog-meta-item–categories a” with “.entry-category”—🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 50 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css—🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️ —🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.—The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ —#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace

Categories
Squarespace

How to customize cookie alert colors in Squarespace // Squarespace Cookie Alert Tutorial [Video]

In this tutorial, you’ll learn how to customize the colors of your cookie alert using CSS in Squarespace. A few things to note before we get started:⚠️ This was recorded in my Squarespace 7.1 demo site but the codes are the exact same for any version and theme.✨ There is more than one way to do this! This is just one approach of many because code is super customizable. 📄 You can learn more about borders at (https://insidethesquare.co/border) and more about color options at (https://insidethesquare.co/colors)🙋 If you need any help along the way, head on over to insidethesquare.co/code-help to see my current support options. Ready to rock? Here are the steps to turn on the cookie alert:1 – Navigate to settings2 – Select Cookies & Visitor Data3 – Choose light or dark / bar or pop-up / opt-in or opt-in & out4 – Optional: select customize to change the text and accept/deny option style5 – Navigate back to your main menu6 – Select Design7 – Select CSS8 – Customize your alert using the codes below!SELECTORS FOR COOKIE ALERT OPTIONSCookie Alert.sqs-cookie-banner-v2Cookie Alert Disclaimer Text.sqs-cookie-banner-v2 pCookie Alert Accept Option.sqs-cookie-banner-v2-acceptCookie Alert Decline Option.sqs-cookie-banner-v2-denyPREMADE CODE IDEASDecline red / Accept green.sqs-cookie-banner-v2-accept {background:green!important}.sqs-cookie-banner-v2-deny {background:red!important}Decline red / Accept green on hover.sqs-cookie-banner-v2-accept:hover {background:green!important}.sqs-cookie-banner-v2-deny:hover {background:red!important}Rounded Buttons.sqs-cookie-banner-v2-accept, .sqs-cookie-banner-v2-deny {border-radius:20px}Box shadow for it all.sqs-cookie-banner-v2 {box-shadow: -15px 0px 15px }Inset Shadow.sqs-cookie-banner-v2 {box-shadow: inset 2px 2px 10px #ccc; background:#FFF!important;}.sqs-cookie-banner-v2 *{color:#000!important}Raised buttons on hover.sqs-cookie-banner-v2-accept, .sqs-cookie-banner-v2-deny {box-shadow: 2px 2px 10px #ccc; }.sqs-cookie-banner-v2 {box-shadow: inset 2px 2px 10px #ccc; background:#FFF!important;}.sqs-cookie-banner-v2 *{color:#000!important}.sqs-cookie-banner-v2-accept:hover, .sqs-cookie-banner-v2-deny:hover {box-shadow: 2px 2px 5px #ccc; }—🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 50 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css—🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️ —🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.——The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ —#squarespace #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #squaresapcesite #squarespacedesign #learnsquarespace

Categories
Squarespace

Edit Your Squarespace Site for Mobile [Video]

Spend wayyyy too much time trying to customize your client’s Squarespace website? 🧐 Save time and your sanity by avoiding these three TIME SAPPING mistakes that EVERYONE makes when finding code for Squarespace 👉https://www.rebeccagracedesigns.com/mistakes-to-avoid—————–In this video, I show you how to use media queries in Squarespace so that you can customize your website for different screen sizes. ➡️➡️For the code used in the video go to https://www.rebeccagracedesigns.com/blog/edit-your-squarespace-site-for-mobile—————-Subscribe for more Squarespace Tips & Tricks 👉 http://bit.ly/youtuberebeccagrace Connect with Me: Blog: https://www.rebeccagracedesigns.com/blogFacebook: https://www.facebook.com/rebeccagracewebdesignInstagram: https://www.instagram.com/rebeccagracewebdesign#squarespace #squarespaceCSS #squarespacehelp #customcode #codesnippets

Categories
Squarespace

How to add custom effects on squarespace website with full source code [Video]

add hover effect on Button on Squarespace 7.0 and 7.1 by jishaansinghal. This code uses a CSS editor and works with Squarespace 7.1 and 7.0 templates.In this video, I’m showing you how to add a hover effect on the Button on the Squarespace website with custom Code!You can change the movement value which you wanted.This code uses CSS editor Copy and pastes the code below into the editor box.code link: https://jishaansinghal.blogspot.com/2021/09/add-button-hover-animation-button-go-to.htmlConnect/Contact with me hereFiverr : https://www.fiverr.com/jishaansinghalYoutube : https://www.youtube.com/channel/UCIgDfi6qUcTmeepNJ7uqLBQFacebook : https://www.facebook.com/jishaan.singhalTwitter : twitter.com/jishaan_singhalInstagram : https://www.instagram.com/jishaansinghalLinkedin : https://www.linkedin.com/in/jishaan-singhal-1b77b2203Blogger : https://jishaansinghal.blogspot.comEmail : jishaanwm21@gmail.com squarespace bilsquarespace b&bsquarespace customer servicesquarespace costsquarespace customer service numbersquarespace careerssquarespace commercesquarespace c’est quoisquarespace domainsquarespace domain searchsquarespace discountsquarespace domain transfersquarespace duplicate pagesquarespace domain costsquarespace discount code 2021squarespace designerd&ad squarespacesquarespace emailsquarespace ecommercesquarespace email campaignsquarespace email pricingsquarespace email listsquarespace editorsquarespace email hostingsquarespace ecommerce pricingsquarespace e learningsquarespace ecommerce templatessquarespace ecommerce subscription basedsquarespace ecommerce categoriessquarespace ecommerce vs shopifye-signature squarespacesquarespace freesquarespace forumsquarespace fontssquarespace free trialsquarespace file size limitsquarespace faviconsquarespace faqsquarespace formssquarespace gift cardsquarespace gmailsquarespace google analyticssquarespace gallerysquarespace glassdoorsquarespace gallery pluginssquarespace godaddysquarespace gifsquarespace g suitesquarespace g suite pricingsquarespace g suite setupsquarespace g suite email not workingsquarespace g suite loginsquarespace g suite mx recordssquarespace g suite verificationsquarespace g suite transfersquarespace how tosquarespace hostingsquarespace help numbersquarespace hover image changesquarespace header image sizesquarespace how to change text colorsquarespace how to change templatesquarespace incsquarespace iposquarespace image sizessquarespace invoicesquarespace integrationssquarespace image gallerysquarespace id findersquarespace investor relationssquarespace i already have a domainsquarespace i am not a robotsquarespace ispoti hate squarespacei hate squarespace 7.1i hate squarespace adsi thought squarespace was freei love squarespacesquarespace jobssquarespace javascriptsquarespace jump to sectionsquarespace j colesquarespace job application formsquarespace justify textsquarespace job boardsquarespace javascript not workingsquarespace keywordssquarespace knowledge basesquarespace klaviyosquarespace klarnasquarespace keeps crashingsquarespace knickssquarespace keanu reevessquarespace keeps freezingsquarespace login pagesquarespace logo makersquarespace link to sectionsquarespace landing pagesquarespace live chatsquarespace lsquarespace member areasquarespace monthly costsquarespace markdownsquarespace market capsquarespace marketplacesquarespace mailchimpsquarespace mailing listsquarespace mobile view editm squarespace.comsquarespace newslettersquarespace navigation bar csssquarespace nonprofit pricingsquarespace newsletter blocksquarespace nameserverssquarespace numbersquarespace newssquarespace new yorksquarespace or wixsquarespace outagesquarespace or shopifysquarespace or wordpresssquarespace online storesquarespace officesquarespace ownersquarespace or godaddysquarespace o wordpresssquarespace o wixsquarespace o que ésquarespace o shopifymeglio wix o squarespacesquarespace pricingsquarespace planssquarespace promo code 2021squarespace pluginssquarespace portfoliosquarespace phone numbersquarespace promosquarespace psquarespace p/esquarespace qr codesquarespace qr code generatorsquarespace quickbookssquarespace quizsquarespace questionssquarespace quotesquarespace questionnairesquarespace quarterly reportsquarespace q&asquarespace revenuesquarespace reviewsquarespace redirectsquarespace reduce space between sectionssquarespace refundsquarespace remove underline from linkssquarespace referral codesquarespace real estate idxr/squarespacesquarespace schedulingsquarespace supportsquarespace student discountsquarespace sign insquarespace sslsquarespace seosquarespace stock pricesquarespace trialsquarespace tutorialsquarespace template idsquarespace transfer domainsquarespace templates for salesquarespace tables

Categories
Squarespace

Welcome to my Squarespace website design tutorials youtube channel [Video]

Hello there! Welcome to my youtube channel. My name is JishaanSinghal.This Channel is a free resource to learn how to extend the design limitations of Squarespace or any type of website by adding custom Codes like HTML, CSS, JAVASCRIPT, JQUERY ETC.Squarespace can look great, but you can make it even better. The tutorials on this channel take a step-by-step approach to HTML, CSS, JAVASCRIPT, JQUERYand web design, rather than just giving you code to copy and paste. Every website and situation is different and copy and pasting code into your site will only get you so far. Eventually, you will want an effect on your site that isn’t working without you knowing why. Then comes the hours searching forums and Facebook groups to try and get someone who knows HTML, CSS, JAVASCRIPT, JQUERY Custom code to help you.My content on this channel is free, and will always be.code link: https://jishaansinghal.blogspot.com/2021/08/add-pill-button-on-hover-with-full.htmlYoutube : https://www.youtube.com/channel/UCIgDfi6qUcTmeepNJ7uqLBQFacebook : https://www.facebook.com/jishaan.singhalFB Group :https://www.facebook.com/groups/457165385377074FB Group :https://www.facebook.com/groups/freegigpromotewithjishaansinghalFB Page :https://www.facebook.com/promoteyourgigTwitter : twitter.com/jishaan_singhalInstagram : https://www.instagram.com/jishaansinghalLinkedin : https://www.linkedin.com/in/jishaan-singhal-1b77b2203Blogger : https://jishaansinghal.blogspot.comThanks a lot :)#squarespacewebsite,#squarespacewebsitedesign,#squarespacewebsiteplugin,#squarespacewebsitecustomcode,#squarespacewebsitecustomdesign,#htmltutorials, how to be a webdeveloper,#csstutorials,javascript tutorials, jquery tutorials, fix squarespace

Categories
Squarespace

How To Customize Squarespace Contact Form Fields // Free Squarespace Code Tutorial [Video]

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn—In this tutorial you’ll learn what custom codes you can use to customize the look of contact forms on your Squarespace website. There are a LOT of form fields available in Squarespace so this tutorial will cover the input fields, background colors, and the oh so cool active and focus states. A few pro tips before you dig in:✨ There is more than one way to do this! This is just one approach of many because code is super customizable. 🔗 Here is a link to the tutorial on how to install this code on a single page in your Squarespace site: https://www.youtube.com/watch?v=kX6kRjCbzu8🙋 If you need any help along the way, head on over to https://insidethesquare.co/code-help to see my current support options. You can use these same codes to customize a form that has lightbox mode enabled! Add the text .sqs-modal-lightbox to the start of any code below to isolate that specific type of form.Here are the codes from this tutorial://–Background and Border.form-wrapper .field-list .field .field-element//–Input Text Font Styles.form-wrapper .field-list .field .field-element//– Active/Focus Background & Outline.form-wrapper .field-list .field .field-element:active, .form-wrapper .field-list .field .field-element:focus//–Special code name for lightbox mode!.sqs-modal-lightbox—🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css—🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️ —🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.—The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥—#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips

Categories
MondoPlayer

Free Call with Video Marketing Expert

Now is the time to be thinking about your business’s future. Take this opportunity to build a following, get people into your sales funnel and nurture the relationships so they’ll buy from you when they’re ready. If you’d like to see how an Automated Video Curation strategy can work for you, book a free call […]