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
Website Design

Pure CSS Dropdown Menu with Cool Hover Effect | Latest CSS Dropdown Menu [Video]

9+ Complete Front-end Responsive Website DesignGet here – https://www.udemy.com/course/the-ultimate-frontend-web-development-8-courses-included/?couponCode=BE-CREATIVE-DESIGNER————————- Enroll this complete course – https://www.udemy.com/course/responsive-frontend-web-development-in-html-css-javascript/?couponCode=LATEST-TRENDS——————–Join this channel to get Source code everyday :https://www.youtube.com/channel/UC8xTHK97Ng__KZvGcO_K7CA/join———————-

Categories
Website Design

How To Create Advanced CSS Dropdown Menus [Video]

FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.htmlDropdown menus are one of the more common things you will create as a developer, but most developers create boring looking dropdowns. In this video I will show you have to create and advanced CSS dropdown that can include things such as forms or advanced navigation.📚 Materials/References:FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.htmlStarting GitHub Code: https://github.com/WebDevSimplified/advanced-dropdown/tree/starting-codeGitHub Code: https://github.com/WebDevSimplified/advanced-dropdownAsync Vs Defer Video: https://youtu.be/BMuFBYw91UQAsync Vs Defer Article: https://blog.webdevsimplified.com/2019-12/javascript-loading-attributes-explainedJavaScript Data Attribute Article: https://blog.webdevsimplified.com/2019-10/do-not-use-class-selectors-in-javascript🌎 Find Me Here:My Blog: https://blog.webdevsimplified.comMy Courses: https://courses.webdevsimplified.comPatreon: https://www.patreon.com/WebDevSimplifiedTwitter: https://twitter.com/DevSimplifiedDiscord: https://discord.gg/7StTjnRGitHub: https://github.com/WebDevSimplifiedCodePen: https://codepen.io/WebDevSimplified⏱️ Timestamps:00:00 – Introduction00:20 – Demo/Starting Code00:56 – Dropdown CSS07:50 – JavaScript11:25 – Advanced Menu HTML/CSS#Dropdown #WDS #CSS

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
Website Design

Custom gradient border (inspired by Apple) — Micro lesson #23 [Video]

While browsing Apple.com’s site, you might be like Grímur and want to style elements in your site using beautiful, rainbow gradients. Combining the power of gradients and padding, you can style your elements’ borders to have fully customizable gradient borders in the Webflow Designer.In this lesson, we’re going to duplicate Apple’s button and the structure for this is as follows: a Text block with padding on all four sides inside a Link block.To create the linear gradient border, you’ll need to do three things:1. Add a linear gradient to the Link block2. Set the Text block’s background color to white (the same as your site’s background color)3. Add padding to the Link block on all four sides (hold down Shift to do this at once!)And as a bonus step, with the Link block selected, you can adjust your typography settings to remove the default blue color and the underline to give it a more modern look.Clone the button here: https://webflow.com/website/apple-gradient-borderExplore more about background and spacing in our 101 Crash Course on Webflow University: https://university.webflow.com/courses/webflow-101-crash-course———-Get started with Webflow: https://wfl.io/2r7cVUWJoin the Webflow Community: https://webflow.com/communityhttps://webflow.comhttps://twitter.com/webflowhttps://facebook.com/webflow

Categories
Website Design

Use the CH typography unit to make paragraphs easier to read — Micro lesson #24 [Video]

CH lets us set the width on a text element if we’re trying to limit the number of characters (and it bases that width on the font’s zero character.) CH units are great for sizing something like a paragraph or a heading to limit the number of characters someone has to read per line. So your eyeballs don’t get strained from reading all the way across the screen each time.Learn more at: https://university.webflow.com/lesson/accessible-typography-using-ch-units———-Get started with Webflow: https://wfl.io/2r7cVUWJoin the Webflow Community: https://webflow.com/communityhttps://webflow.comhttps://twitter.com/webflowhttps://facebook.com/webflow

Categories
Website Design

Pure CSS Creative Animated Button – CSS Tricks and Hover Effect [Video]

Get 9+ Complete Responsive Website Design Course in bundleEnroll this – https://www.udemy.com/course/the-ultimate-frontend-web-development-8-courses-included/?couponCode=LATEST_DESIGNS———–Top 20 Website design animation tutorials herehttps://youtu.be/KE8ypBdUVUs—————-Full Tutorial Free for now – https://youtu.be/ElBizYh0_dsand this – https://youtu.be/ttLGwockCao Like our page – https://www.facebook.com/indiandesignrJoin our group – https://www.facebook.com/groups/328971707545530Join this channel to get access to perks:https://www.youtube.com/channel/UC8xTHK97Ng__KZvGcO_K7CA/join

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
Website Design

Cofetti Falling Animation with Toggle Menu using HTML CSS JS [Video]

Offering Today9+ Responsive Website Design course in bundle (inside one course just)Enroll here – https://www.udemy.com/course/the-ultimate-frontend-web-development-8-courses-included/?couponCode=DESIGN-MATTERS—————————-Full course is here – https://www.udemy.com/course/make-a-creative-portfolio-website-design-in-html-5-css-3-js/?couponCode=U-R-CREATIVE-NOW———————Top 20 Website design animation tutorials herehttps://youtu.be/KE8ypBdUVUs—————-Full Tutorial Free for now – https://youtu.be/ElBizYh0_dsand this – https://youtu.be/ttLGwockCaoLike our page – https://www.facebook.com/indiandesignrJoin our group – https://www.facebook.com/groups/328971707545530

Categories
Squarespace

How To Create An Accordion in Squarespace // Click to Reveal Text for Squarespace [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, we’ll create click-to-reveal text in your Squarespace website. Great for FAQ sections, this expanding section / accordion magic is made up of HTML and CSS so it will work on any subscription level; no Javascript required! The codes in this tutorial are listed below – one set on this description and the other in the first comment – but make sure you watch the entire video so you will know exactly what to change on your own site. You can also grab the codes + the step-by-step instructions at https://insidethsquare.co/squarespace-tutorials/click-to-reveal Oh! And if you need any help along the way, head on over to https://insidethesquare.co/code-help to see my current support options. Here is the CSS part of the code that creates the click to expand action and any custom styles you want to try. The actual content on your site needs a different code that can be found in the first comment below. #click-reveal div { position: relative;} #click-reveal input[type=”checkbox”] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;} #click-reveal h2 { font-size: 30px; font-weight: 400; margin: 20px 0 0;} #click-reveal label { position: relative; display: block; padding-left: 30px; } #click-reveal label::before { content: “”; position: absolute; width: 0; height: 0; top: 50%; left: 10px; border-left: 8px solid black; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-top: -8px;}#click-reveal input[type=”checkbox”]:checked ~ h2 label::before { border-left: 8px solid transparent; border-top: 8px solid black; border-right: 8px solid transparent; margin-left: -4px; margin-top: -4px;} #click-reveal p { max-height: 0; overflow: hidden; padding-left: 30px; transition: max-height 0.4s ease;} #click-reveal input[type=”checkbox”]:checked ~ h2 ~ p { max-height: 80px;} —🤩 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
Squarespace

How To Customize the Newsletter Disclaimer Text Style in Squarespace // Free Squarespace Codes [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, we’ll customize the newsletter disclaimer text on your Squarespace site with a little custom code. If you do want to change the font style or customize those hyperlinks, or change up the look of the Google ReCaptcha text, the codes covered in this tutorial will help you do just that. If you need any help along the way, head on over to https://insidethesquare.co/code-help to see my current support options. Here are the codes from this tutorial://– Change the color of the text.newsletter-block .newsletter-form-footnote:last-of-type {color:red}//– Make the text all capital letters and change the font size too.newsletter-block .newsletter-form-footnote:last-of-type {text-transform:uppercase; font-size: .8rem}//–Remove the underline from the active links and add a background color.newsletter-block .newsletter-form-footnote:last-of-type a{text-decoration:none; background-color:yellow}—🤩 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