judgereini

Thanks a lot tuanphan!

I have updated the @font-face declaration accordingly ... and now it works :-)))
Now the page looks exactly as it should look 😁

Thanks for your valuable advices 🙏
Christian

I investigated the "bold"-issue a little further ... actually, the headlines are marked as bold ... i can see this when editing a page. I can even de-/activate bold using the editor. However, it does not make any difference in how the font gets displayed.

Anyone got an idea, where the mistake is?

Hi tuanphan!

Thanks for feedback and code!
The CSS for the form works :-)))

Using your code and receiving your feedback I realized that I did something wrong with the @font-face. I had that code in, too ... but obviously something did not work right.

The whole CSS that I'm now using for the custom font is:

  //--- Your Custom Font ---//
@font-face{ 
font-family: 'Borna';
src:
url('https://static1.squarespace.com/static/65508747872b676c6cb769ce/t/66ab240ce3558468a9554a53/1722491916174/borna-regular-webfont.woff'),
url('https://static1.squarespace.com/static/65508747872b676c6cb769ce/t/66ab241d6d7412047306cbce/1722491933983/borna-bold-webfont.woff');
font-weight: 400;}

h1, h2, h3, h4 {
font-weight: bold;
font-family: 'Borna'!important;

}

.sqsrte-large {
font-family: 'Borna'!important;
}

.sqsrte-large {
font-family: 'Borna'!important;
}

p:not(.sqsrte-large, .sqsrte-small){
font-family: 'Borna'!important;
}

.sqsrte-small {
font-family: 'Borna'!important;}

#siteWrapper.site-wrapper .sqs-button-element--primary, 
#siteWrapper.site-wrapper .sqs-button-element--secondary, 
#siteWrapper.site-wrapper .sqs-button-element--tertiary{
    font-family: 'Borna'!important; 

  font-weight: bold;
}

.header-nav *, nav.header-menu-nav-list * {
     font-family: 'Borna';
font-size: 18px;
  font-weight: bold;
}

div.form-block *, div.form-block *::placeholder {
    font-family: 'Borna' !important;
}

###############################

Now it almost works correctly ... except that the headlines don't get displayed in bold. Do you see the issue? If so, pls. let me know how to do it correctly.

Thanks,
Christian

Hi Community!

I'm using a custom font on this website: https://www.schule-der-ideen.org/

Therefore, I have uploaded the font and added some custom CSS (see below).
I managed to change the font all over the page, except in the forms:
https://www.schule-der-ideen.org/bewerbung
https://www.schule-der-ideen.org/kontakt

Can anyone let me know, which CSS code would do this job?

Best,
Christian

Here is the CSS code I have used so far:
If there is something to improve, pls. let me know. I don't "speak" CSS ... I can just copy/paste ;-)))

h1, h2, h3, h4 {
font-family: 'borna-bold-webfont.ttf'!important;}

.sqsrte-large {
font-family: 'borna-regular-webfont.ttf'!important;
}

p:not(.sqsrte-large, .sqsrte-small){
font-family: 'borna-regular-webfont.ttf'!important;
}

.sqsrte-small {
font-family: 'borna-regular-webfont.ttf'!important;}

#siteWrapper.site-wrapper .sqs-button-element--primary, 
#siteWrapper.site-wrapper .sqs-button-element--secondary, 
#siteWrapper.site-wrapper .sqs-button-element--tertiary{
    font-family: 'borna-bold-webfont.ttf'!important; 

  font-weight: bold;
}

.header-nav *, nav.header-menu-nav-list * {
     font-family: 'borna-bold-webfont.ttf';
font-size: 20px;
  font-weight: bold;
}

Hi kevn42000!

I tried your solution but it did not work for me. The HTML code keeps staying visible if put in the option field

I've opened a new thread for this situation and there the user HoaLT posted a solution that actually works for me, by putting the link in the label of the checkbox field. Here is the link to this solution:

Best,
Christian

Hi HoaLT!

Thank you so much for this solution ... it works!!! :-))) 
Very much appreciated!!!

Also the style of your tutorials is great! Really easy to follow! Awesome!!!

Best,
Christian

Hi Squarespace community!

I am aware that this topic has been brougth up in this forum before: 

 ... but I haven't found a current solution.

So the requirment is still the same ... I would like to have a checkbox for accepting - in my case the privacy policy - when submitting a form. Therefore I would like to add a checkbox form field at the end of my form, with a descriptive text that also includes a link to the privacy policy. 

Can this be implemented using a Squarespace 7.1 theme?
If yes --> how?

Would be awesome if someone could point me in the right direction to make this happen!

Best,
Christian

Hi Squarespace Community!

Is there a new solution to this requirement?

I guess a lot of websites want to feature a form with a checkbox to confirm e.g. privacy policy ... which should be linked in the text next to the checkbox.

Best,
Christian

I could solve my main issue - the clickable main buttons, even if they are folders - with the instruction and code from this link: https://www.will-myers.com/articles/clickable-folders-for-squarespace-71

That'll do for what we currently need. 

Thanks for all your feedback!
Christian

Hi @paul2009!

Thanks a lot for the link!

Checking out the mega menus I actually realize that I would rather need a plain simple drop down menu as a second level navigation. Do you also have an advice how to realize this? Or where I find more related information?
 

Best,
Christian

Hi @jorgeamrls! 

Just a quick question: how did you realize the simple plain drop down menu? That would be exactly what I need in a current project.

Best,
Christian

Hi tuanphan!

Thanks a lot for your suggestion! I guess this would meet our requirements. Do you have any recommendations for a good plugin or code that we need to realize such a mega menu?

Best,
Christian

Hi Squarespace Community!

I would like to create a navigation that functions similar to this one:

... so it should have:
a) Second level navigation via drop down, that unfolds on mouse-over

b) Clickable menu items in the second level

c) Also clickable main menu items

I don't get how to create c) if I follow this instructions: https://support.squarespace.com/hc/en-us/articles/205813818-Adding-drop-down-menus-to-your-navigation-with-folders

Furthermore, this navigation does not look as nice and smooth as known from other websites.

Are there other approaches (e.g. with custom code and/or a plugin) to create a nice second level navigation with dropdowns? Would be awesome if someone could share a hint ...

Best,
Christian

Hi Ziggy!

Thanks a lot for your help! 😀
Very much appreciated!!!

Your code fixed the issue. The pagination looks much nicer now, as you can see in the screenshot. You can also check it out live at https://www.innsbruck.dance/

Thank you!
Christian

Hi Squarespace Community!

We have listed a couple of events on our website. The events pagination works, but the font size is too big. Consequently, there are overlaps .. .especially in mobile view.

Does anyone know, how we can reduce the font size of the pagination?

Best,
Christian

Thanks a lot for the code! That was exactly, what I was looking for :-)))

Your help is very much appreciated!!!

All the best,
Christian

Here is a link to my client's website: www.limonada.at

Here is a link to my client's website: www.limonada.at

Hi Squarespace Community!

I have searched the forum, but didn't find an answer for my specific questions ... so here it is:

My client has sponsor logos on their website.
These logos should be now displayed all in grey ... and on mouse-over these logos should get a little lighter. On click the user gets directed to the sponsor's website.
This is the site my client got the inspiration for this kind of logo presentation: https://www.weissraum.at/ (just scroll to the bottom).

Any idea how I can achieve this effect in Squarespace?

Best,
Christian

Hi Tuan!

No, I'm looking for an option that permanently shows the captions, not only on mouse-over.

Tuan, you are awesome!!! 🙌

Thank you so much!!! 🙏

Very much appreciated!!! 😀

Hi Tuan!

Another question related to the initial codepen code ... the progress bar:

Is it possible to make the actual value of the progress a variable, where I enter the value on another (hidden page) ... so I can easily change how much progress the bar shows.

So I mean using a variable for this 

data-progress-percent="25"

I'm asking this, because editing the bar and the data surrounding it is now quite cumbersome, as SS displays the embeded code with extra information ... so it looks like a mess 😉

Here's a screenshot:

Hi community!

I would like to add an instagram feed in some kind of grid view. But I would also need captions to be shown right away. Reason for this: we want to use the Instafeed as a newsfeed. The native Squarespace function doesn't come with such a view ... any suggestions how I could solve this requirement?

Best,
Christian

Hi Tuanphan!

Awesome! Exactly what I've needed. Thank you very much!

Guess it is quicker for you to just prepare the code than explaining me how to do this myself. In case that's true ...

... could you pls. also provide the code for this https://codepen.io/tag3r/pen/wYKwRq

Hi community!

I would like to display this graphical element: Super Simple Progress Bar on my website.
As I am no developer I just copy/pasted the code snippets to a code block ... unfortunately, this does not work. Would appreciated any advise to get this working!

Cheers,
Judgereini