-
Posts
836 -
Joined
-
Last visited
-
Days Won
1
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by ArminB
-
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:
-
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 ______________
-
Audio player button bug after custom css
ArminB replied to philpaluch's topic in Customize with code
I'm happy to help! -
How to add image with logo & company name to site header?
ArminB replied to blackpearlmobile's topic in Customize with code
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) -
Filter by Blog Author using Universal Filter?
ArminB replied to paigesquarespace's topic in Customize with code
try the ARCHIVE BLOCK to display blog categories/tags- 3 replies
-
- custom-css
- blog
-
(and 2 more)
Tagged with:
-
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
-
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}}
-
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}
-
Audio player button bug after custom css
ArminB replied to philpaluch's topic in Customize with code
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 -
you have to create a new BLOCK called SUMMARY anywhere on your website and use the settings to display your preferred results
-
-
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
-
feel free to play with the values to find your preferred look
-
hey there. This should help: .Marquee-svg {color: #ff7f7f; border-bottom: 1px solid #ff7f7f; border-top: 1px solid #ff7f7f; padding-top: 10px}
-
Hi there! this should be : DESIGN > CUSTOM CSS & add: .Mobile-bar--bottom {display: none}
-
PS: there is a lot of potential for improving a site by adding designated mobile pages Example: using another (vertical) photo on mobile
-
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!
-
A client just mentioned the same problem. What browser are you using? (he's having the issue on Chrome)
-
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 ❯
-
How to lock the font on one page so it never changes
ArminB replied to poeticallygrey's topic in Customize with code
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) -
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.