-
Posts
190 -
Joined
-
Last visited
-
Days Won
2
Content Type
Forums
Downloads
Store
Events
Blogs
Gallery
Profiles
Everything posted by justin.mabee
-
Social Media Icons: Can we change them, and how?
justin.mabee replied to Andrew101's topic in Site Design & Styles
You shouldn't have to do anything for mobile, it should just work with the original code. What happened on mobile? -
Social Media Icons: Can we change them, and how?
justin.mabee replied to Andrew101's topic in Site Design & Styles
Hey Andrew! This is easy with a bit of custom code. I've included a couple screenshots and the code I used here. What you would do is put the social links that you want in, and then navigate to Website Tools, then Custom CSS. From there, upload the files of the logo you want to use (in this case, the bluesky logo you want to use) in the color you want. Then, add this code, and notice that it says nth-of-type(3). That means it's the 3rd social link. So wherever you want the link, put it there in the order you want it. If you want it to be the first one, it would be nth-of-type(1). They just need to match in the social icons links area. Once you have the code in there, copy and paste the URL of the image you just uploaded to Custom CSS, and put it between the parentheses under background-image: url(_). Hope this helps! //Custom Social Icons// .sqs-svg-icon--list a:nth-of-type(3) { svg { display:none; } background-image: url(); background-size: 100%; background-repeat: no-repeat; } -
In addition to an informative 404 page, I'd highly recommend getting a URL Report from a service like Screaming Frog SEO Spider for both the old site and the new site, and then creating 301 redirects for each URL that is changing. It's a pain, yes, if there are lots of pages, but redirects will ensure that the URLs continue to work after you switch everything. Simply setting up a 404 page could cause members to get annoyed that they can't find what they were looking for easily. Under Settings, then Developer Tools, then URL Mappings, you can add 301 Redirects. A typical redirect looks like the following: /old-back-half-url -> /new-back-half-url 301 I have a Screaming Frog account and I've done tons of these URL reports before, so I'd be happy to help you if you need it or have questions. Feel free to reach out.
-
Yeah there's definitely something wrong with the code you're using to target the header on mobile. I don't know what it is, but I'd recommend removing anything you're targeting the #header on mobile with, that should fix it.
- 4 replies
-
- mobile
- navigation
-
(and 3 more)
Tagged with:
-
Can't access/edit mobile only content
justin.mabee replied to David_Perth's topic in Pages & Content
Check the Business Information for the email address. I believe Bedford might surface that information from Settings. -
After checking the page on mobile, I do see the problem but I can't tell what is happening to cause it. My first inkling is that the animation is causing it. Do you have a site-wide animation turned on? If so, turn it off and see if that helps the issue. If not, do you have custom code in for animations, or any custom code targeting the shop?
- 4 replies
-
- mobile
- navigation
-
(and 3 more)
Tagged with:
-
Tips on how to show full web pages on portfolio site
justin.mabee replied to BillyG's topic in Pages & Content
@BillyG I would probably use a blog roll for case studies and just add an intro and a paragraph or two on the page itself, and then link out to see the full case study for additional info. No need to save the HTML file as a PDF, that could likely make it look bad in the export. You can use the excerpt to link out. Check out this example of a site I created for a professor at Princeton who does a lot of legal writing -- https://www.martinflaherty.org/ -
@ebailey215 You're right, the spacing is very off on this particular page. You might consider using a List Section for this page which will put everything in line and have all the same spacing across the board. That way you won't have a bunch of weird spacing in different areas. To use a List Section, click on Add Section when in edit mode, and select any of the People layouts under pre-designed layouts.
-
@KrisMiklos Apologies, I forgot you were on 7.0. I did check a few searches but wasn't able to figure out the issue, I'm sorry! The site width is only available on 7.1. Might be a reason to rebuild your site in 7.1? It'll give you some more freedom to do things like this.
-
FLATIRON How to add a text ONLY at the top of an INDEX page
justin.mabee replied to emma_tokyo's topic in Customize with code
I believe because it's a Portfolio style page in 7.0, this isn't possible, even with custom code. The text is inputted on the page itself, but then applies to each additional page because they're all in the same collection. I'd need access so I can try to do it for you, if you want me to try feel free to message! -
@KrisMiklos Have you tried adjusting the Spacing of the site under Site Styles? Click the paintbrush icon in the top right, then click Spacing, and adjust from there.
-
@KeepCluckin ah, no it doesn't go in Advanced Code Injection. It goes under Custom CSS. This is under Website Tools, then Custom CSS.
-
Code for custom bullet points (checkmarks)?
justin.mabee replied to amandaclairef's topic in Customize with code
@amandaclairef You should be able to still add code to the Custom CSS area, under Website Tools, even just on the Personal Plan. It's mostly Code Injection, if I'm not mistaken, that doesn't work. First, you'll need to upload the image you want to use for your check marks. Upload it within the Custom CSS area. I've attached the one I've used to this post. Then you can use this code, and use the link from the file you just uploaded where URL is. ul[data-rte-list] li>*:first-child::before { content: " " !important; background-image: url(); background-size:contain; background-repeat:no-repeat; background-position: center; height:20px; width:20px; } Let me know if this works for you! -
In 2023 Why Can't I Easily Embed Google Reviews to my Page?
justin.mabee replied to Nato100's topic in Customize with code
Elfsight is a great alternative to showcase your Google reviews! You can even do one widget for free. https://elfsight.com/google-reviews-widget/ Have you tried this solution @Nato100? -
@KeepCluckin This should work -- .header-title-logo img { max-height: 320px !important; }
-
Hey Brian! Yes, this is possible with Summary Blocks. You can create three Summary Blocks, and connect each one to a particular blog to showcase the posts from that particular blog. Alternatively, you can have one blog with categories, and then use Summary Blocks to showcase different categories of posts on the same page. Included some screenshots here on how to do it. Let me know if you have questions!
-
@yerrington There's a 20 post limit per blog roll page, yes, which would then send you to a second page of older posts. But it doesn't complicate anything with RSS feeds. The RSS feed just reads the posts, not the style of it or organization. As @tuanphan said, if you want to show more than 20 on one particular page, you could create a separate page with a summary block and use Michael Mashay's Lazy Summaries to showcase more past that limit. But I don't think you need to worry about that, people are used to clicking on "older posts" to see previous posts beyond the 20 item limit. It's mostly a safeguard to make sure your site loads quickly.
-
How to edit site so it displays correctly on iPads
justin.mabee replied to sabsyoga's topic in Site Structure & Navigation
In addition to what @tuanphan recommended, you can also try Chris's brilliant chrome extension to add a tablet view on the editor. Check it out here: https://chromewebstore.google.com/detail/fluid-engine-tablet-spaci/gemmfnoajaghnaddkccmekbchdgckdab -
What are your best practices for mobile styling?
justin.mabee replied to Jo_SQSP's topic in Site Design & Styles
One of the best pieces of advice I can give with Fluid Engine and mobile design adjustment is to adjust mobile as you go. Building out websites, I do my best to build out a page, get client approval, then adjust for mobile, and then use that as my template moving forward. I mostly build my websites from pages I've already created, saving sections, and re-using them throughout the site. Once you adjust a section for mobile, you can save the section, and then when you re-use it, it stays mobile optimized. So if you add additional content to that particular section elsewhere, you only have to re-adjust the new elements you added. This worked really well on my most recent launch, dingsmotionusa.com, where I had nearly 100 pages and several pages that all had the same content and elements on them for products. I built one page with the structure I needed, then adjusted for mobile, saved the sections, and repeated across 70 pages. So I had very little I had to adjust when I was done. -
Have you checked the permissions on Vimeo for those videos? I've seen several issues with videos not showing up because of certain permissions. Usually I set things to embed only on these sites, and then list the SQSP URL as well as the public URL so it shows. It is strange that its happening on all of the pages too...
-
Seconded what @AlexSan said! I actually had to do this for a client recently (dingsmotionusa.com) and I was in the middle of changing everything manually with code as much as I could but then got stuck. Then realized I could just change the theme. So I set everything up via the theme and changed it on that page, and voila!
- 8 replies
-
- shopping-cart
- selling
-
(and 3 more)
Tagged with:
-
This is a dumb issue with Squarespace where the embed is much bigger than the actual content in the embed. I completely agree it sucks. My usual way around this is to not even embed the calendar at all, but rather embed a pop-up button. You can see it on my website (justinmabee.com/book-now). I use Google Calendar Scheduling, and the book an appointment button is much friendlier for spacing. The pop-up overlays on the site and works pretty well. I know Calendly has this option, I believe it's a pop-up option. Let me know if that helps.
-
Site URL: https://ganzsecurity.com/product_selector/3/Software I'm looking to create a product comparison tool within Squarespace. I'm setting up a proposal for a very large client who has a ton of products we'll be moving into Squarespace Ecommerce in 7.1, and they have product selectors (which I can easily set up with Universal Filter) but they also have a product comparison tool on their current (100% custom) site. Most solutions I'm finding are simple pricing tables, while this is a bit more complicated. Does anyone have any recommendations on where to start to do this? I've included the link to an example, as well as a screenshot.