Jump to content

ArminB

Circle Member
  • Posts

    836
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by ArminB

  1. Due to recent GDPR events, I just made a quick post on this matter there is also a tutorial on how to install custom fonts. Maybe this is useful:
  2. We've just been contacted by few EU client that received letters from shady law firms pushing for a payment of around $200 or more to settle the issue. At the beginning of 2022, Germany ruled the use of Google Fonts as a violation of the GDPR. So far, I'm only aware of such letters in Germany and Austria yet but I believe this could happen in any EU country. I'm happy to open a discussion on this with best pratices. (inviting @paul2009 @KwameAndCo @colin.irwin @christyprice ....)I'm still not sure if replacing all fonts will 100% cut the bridge to a Google Server, but that what this post is here for, while I'm hoping to get a statement from Squarespace. Here's a related article by @Centerliner that becomes more and more relevant Here is a great, detailed German article: https://calysto-marketing.at/dsgvo/abmahnungen-wegen-nutzung-von-google-fonts-durch-rechtsanwalt-mag-hohenecker-im-namen-von-frau-eva-zajaczkowska-21-8-2022/?moderation-hash=2584c485cf8b3c3908d420c174dfa888&unapproved=1&utm_source=pocket_mylist While right adjustment to your privacy settings can cover this as well, here is a quick tutorial ______________ QUICK TUTORIAL how to install a custom font on your website (instead of loading it from a third party server - this is also the same procedure if a client asks you to use their custom font on the website) set all fonts to a system font (like Arial) - thanks to @Selistina for the comment 🙂 Get your font files ready (I mostly use .otf or .ttf as they work very well) NOTE: if you want have "light" and "bold" or "strong" you need to have an individual font file for that go to DESIGN > Custom CS At the bottom you'll find "MANAGE CUSTOM FILES" Just upload the font files When you click one of your uploaded fonts it will paste the file path into your css (make sure this doesn't mess with your existing CSS Example: https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257cda47c57db4f2bb5146f/1649921445359/MessinaSans-Bold.ttf Save those file links for later Copy paste this CSS and give your uploaded fonts a NAME @font-face { font-family: 'SEMIBOLD'; src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257ceb19301a214871b3282/1649921713264/MessinaSans-SemiBold.ttf'); } @font-face { font-family: 'REGULAR'; src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257ce68e86b157650ac08a1/1649921641106/MessinaSans-Regular.ttf'); } @font-face { font-family: 'LIGHT'; src: url('https://static1.squarespace.com/static/624ac8c48e016a33e668e7db/t/6257cdbe9301a214871b2334/1649921471023/MessinaSans-Light.ttf'); } Now you can individually apply those fonts to your website like this h1, h2, h3 {font-family: 'SEMIBOLD'} h4 {font-family: 'LIGHT'} h4 strong {font-family: 'SEMIBOLD'} p {font-family: 'LIGHT'} .Header-nav {font-family: 'SEMIBOLD'} .summary-title {font-family: 'SEMIBOLD'} .summary-read-more-link {font-family: 'SEMIBOLD'} Note: It's also possible to apply font weight settings (h4 is the light one and h4 strong is bold ) Please be aware that there are more font cases with your website ( e.g. .blog-title ... ) to this is not covering all of them ______________
  3. Hey There! If I understand you correct, you just want to have your logo instead of the title text. Just enter the editing mode, click the header and select the global settings. you'll find a spot to upload your logo (and also a mobile alternative)
  4. try the ARCHIVE BLOCK to display blog categories/tags
  5. Hey There! It's not possible to access the editing mode of your site unless you directly invite someone as editor/admin etc... so I'd suggest that you try a different browser or device to see if this problem still occurs
  6. Try using a GALLERY block for this as it already shows 2 rows on mobile if that's what you're looking for and you can show the caption... that might do it without additional CSS you can later add a CSS rule to show/hide the different variants on mobile/desktop Example: @media only screen and (min-width: 840px) {#BLOCK ID{display: none !important}} @media only screen and (max-width: 840px) { #BLOCK ID{display: none !important}}
  7. Hi There! I guess this is what you're looking for: @media only screen and (max-width: 840px) { #block-61e9981680b8b84a758d484d h1 {font-size: 16px !important}} or if it's about the Navigation - it should be something like: header-menu-nav-item header-menu-nav-item--collection header-menu-nav-item--active header-menu-nav-item--homepage {font-size: 12px}
  8. Hey there, try some position attributes just add an extra line https://www.w3schools.com/css/css_positioning.asp something like position: relative; or position: absolute; This could work add it below the radius
  9. you have to create a new BLOCK called SUMMARY anywhere on your website and use the settings to display your preferred results
  10. Hey there! Yes, you can archive this by using a BLOG (or EVENT) module Here is an example( artists categorized by genre) : https://www.petitevictorycollective.com/artists or here: https://www.petitevictorycollective.com/articles-insights Using it for real estate rental: https://www.living-steyr.com/ I also did a more exotic approach with using the shop module on our own site: www.braunsberger-media.com/websites They all use a BLOG module where you can got to the post settings > options and add categories and tags to each entry. then use the SUMMARY to display content by applying filters.... There are definitely a few options to discover in that case. You can test it with your existing NEWS page
  11. feel free to play with the values to find your preferred look
  12. hey there. This should help: .Marquee-svg {color: #ff7f7f; border-bottom: 1px solid #ff7f7f; border-top: 1px solid #ff7f7f; padding-top: 10px}
  13. Hi there! this should be : DESIGN > CUSTOM CSS & add: .Mobile-bar--bottom {display: none}
  14. PS: there is a lot of potential for improving a site by adding designated mobile pages Example: using another (vertical) photo on mobile
  15. Hi! 1) You'd get a good experience when making a second video that is specifically for mobile (vertical) 2) add a section and add the mobile video 3) Add some CSS (make sure you name the URLS accordingly to match with the CSS. @media only screen and (min-width: 840px) {#page-mobile{display: none !important}} @media only screen and (max-width: 840px) { #page-desktop{display: none !important}} PLEASE NOTE: As some mobile browsers are blocking background videos anyway, I'd recommend to test it with a random second video before investing further efforts in the video. A good backup is create a static graphic or a .gif loop I hope that helps!
  16. A client just mentioned the same problem. What browser are you using? (he's having the issue on Chrome)
  17. Hi @tuanphan do you know/have a script for this vertical text animation: https://www.liveatlinden.ca/ that would be awesome (the text within the top banner) Thank you!
  18. That's a tricky one. The problem is that Squarespace arranges all buttons below each other on smartphone and as far as I know that can't be bypassed. It's possible to arrange them with CSS but this needs to be customized for each case you're using it. How about you use one text block and use ASCII arrows (icons) They will get treated like text and you just have to apply three links (previous, back, next) ❮ BACK TO 3D ❯
  19. Hi, Yes, that's possible. You'd just need a little bit CSS coding for that (DESIGN > CUSTOM CSS) For instance #block-f826ed063469d27ebb98 p {font-family: Arial !important} applies a certain font ONLY to this specific block (see the screenshot > green)
  20. Hi, I had a quick look. I think you have 2 options: (DESIGN > CUSTOM CSS) A) move the whole content down e.g. .page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section) { align-items: center; margin-top: 130px; B) or only this individual image [data-section-id="61479941d692124298d8f9b1"] {margin-top: 130px !important}} Hope that helps! Besides that you might have another photo with more spacing on all sides.
  21. That's very intersting to know that the dark mode is not a "nice-to-have" any more. That's quite drastic move to e.g. invert the logo automatically. Have you reached out to Squarespace?
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.