Hi — So far I've been successful in customizing the menu block in Squarespace 7.1 with my custom fonts using the code below. However, I am not able to identify what code effects the font of the price. Currently the font is poppins, which is the default font. I have tried:
.menu-item-price-bottom {
font-family: 'rockhill-regular' !important;
}
But this doesn't really solve my problem as I would like to keep the price to the right, as shown, not bottom. At the moment, the only way to get the price to be 'rockhill' is if I remove the dollar sign and the price becomes part of .menu-item-title which doesn't look as clean.
Overall, I would like to change the price's font from poppins to 'rockhill-regular' so that it matches the description font. This obstacle is additionally frustrating because some menu items can have the price written in the section description but for items that have varying prices, you can obviously see the difference in font.
I am currently building this website for a client in trial mode, so I will not be able to give out password details.
Thank you for your help in advance! -D
--------
/*CUSTOM CSS MENU*/
.menu-section-title {
font-family: 'zangezi';
}
.menu-section-description {
font-family: 'rockhill-regular';
}
.menu-item-title {
font-family: 'rockhill-rough';
}
.menu-item-description {
font-family: 'rockhill-regular' !important;
}
Squarespace released an Accordion Block a few weeks ago.
Here are some useful code when you use the accordion block (Add to Design > Custom CSS)
#1. Change Dividers Color
/* accordion divider color */
.accordion-divider {
color: #ff00ff !important;
}
#2. Change Arrows Color
/* accordion arrows color */
.accordion-block .arrow {
border-color: #ffff00 !important;
}
#3. Add icons before Accordion Titles
/* Accordion icons before titles */
li.accordion-item .accordion-item__title:before {
content: "";
width: 20px;
height: 20px;
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: bottom center;
}
li.accordion-item:nth-child(1) .accordion-item__title:before {
background-image: url(https://cdn.pixabay.com/photo/2021/11/02/15/30/tealights-6763542__340.jpg);
}
li.accordion-item:nth-child(2) .accordion-item__title:before {
background-image: url(https://cdn.pixabay.com/photo/2019/10/23/06/30/hamburg-4570577__340.jpg);
}
li.accordion-item:nth-child(3) .accordion-item__title:before {
background-image: url(https://cdn.pixabay.com/photo/2021/02/17/08/02/woman-6023442__340.jpg);
}
#4. Different Color for Accordion Titles
/* accordion title colors */
li.accordion-item:nth-child(1) .accordion-item__title {
color: red;
}
li.accordion-item:nth-child(2) .accordion-item__title {
color: blue;
}
li.accordion-item:nth-child(3) .accordion-item__title {
color: violet;
}
#5. Change a specific word color in Accordion Content
First make it bold then use this CSS
/* accordion content specific word color */
.accordion-item__description strong {
font-weight: normal;
color: red;
}
#6. Accordion Title Background Color
/* accordion title background */
.sqs-block-accordion .accordion-item__title-wrapper {
background-color: #32a4e6;
}
#7. Accordion Content Background
/* accordion content background */
.sqs-block-accordion .accordion-item__dropdown--open {
background-color: #262853;
color: white;
}
#8. Add Unordered List in Accordion Content
First, add some text then Underline them
Next, use this CSS
/* Accordion Content - Add Unordered list */
span[style*="text-decoration"]:before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
background-color: black;
vertical-align: middle;
margin-right: 3px;
}
span[style*="text-decoration"] {
text-decoration: none !important;
}
#9. Accordion Titles – Add Line Break
If you use a Business Plan or higher, you can use another approach in this comment
/* Accordion SubTitle */
li:nth-child(1) span.accordion-item__title:after {
content: "Accordion Subtitle 01";
display: block;
font-size: 15px;
}
li:nth-child(2) span.accordion-item__title:after {
content: "Accordion Subtitle 02";
display: block;
font-size: 15px;
}
li:nth-child(3) span.accordion-item__title:after {
content: "Accordion Subtitle 03";
display: block;
font-size: 15px;
}
Result
#10. Accordion Title-Content Text Size on Mobile only
/* accordion title - content text size on mobile */
@media screen and (max-width:767px) {
/* accordion title */
span.accordion-item__title {
font-size: 12px !important;
}
/* accordion content */
.accordion-item__description * {
font-size: 10px !important;
}
}
#11. Simple Style 01
Add a Code Block under Accordion >> Use this code
<style>
/* accordion title color */
.accordion-item__title-wrapper {
background-color: #1a252f;
color: white;
padding-left: 20px !important;
padding-right: 20px !important;
}
.accordion-item__click-target {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
/* make first item round corner */
li.accordion-item:first-child .accordion-item__title-wrapper {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* make last item round corner */
li.accordion-item:last-child:not[data-is-open="true"] .accordion-item__title-wrapper {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
/* remove divider between accordion items */
.accordion-divider {
display: none;
}
/* accordion content padding */
.accordion-item__description {
max-width: unset !important;
padding: 20px !important;
}
/* arrows color */
.plus>div {
color: white !important;
}
</style>
Coming soon.
#12. Accordion Content Link Style
/* Links underline */
div.accordion-item__description p a {
border-bottom: 1px solid black;
}
/* Links font style */
div.accordion-item__description p a {
color: red !important;
font-size: 30px;
font-family: monospace;
letter-spacing: 2px;
}
#13. Add a button inside Accordion Content
First, you need to add a text link. Next, add this CSS to turn link to button
/* turn accordion link to button */
div.accordion-item__description p a {
background-color: black;
color: white !important;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 15px;
border-color: red;
border-width: 1px;
border-style: solid;
}
#14. Add an Image inside Accordion Content
Use this CSS to add image to top or bottom of accordion content
/* Add an image into Accordion Content */
/* replace demo image with your image url */
/* nth-child(1) is first accordion item, nth-child(2) is second item... */
/* :before is image on top, :after if image on bottom */
li:nth-child(1) .accordion-item__description:before {
content: "";
display: block;
width: 100%; /* image width, you can also use px */
height: 150px; /* image height */
background-image: url(https://cdn.pixabay.com/photo/2021/09/15/15/48/seals-6627197__340.jpg);
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20px; /* space between image-text */
}
#14.2. Add Image to Accordion Content (Use JS code)
Suppose you want to add this image
https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg
First, you edit Accordion >> Put your cursor at position where you want to add image >> Then enter text: image01
Next, add this code to Website Tools (under Not Linked) > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div.accordion-item__description p:contains("image 01")').closest('p').addClass('image-01');
$('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01');
});
</script>
<style>
.image-01 {
font-size: 0;
}
</style>
Result
If adding 3 images, doing this
and use this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// image 01
$('div.accordion-item__description p:contains("image01")').closest('p').addClass('image-01');
$('<img src="https://cdn.pixabay.com/photo/2023/11/28/08/53/skyscraper-8416953_1280.jpg"/>').appendTo('.image-01');
// image 02
$('div.accordion-item__description p:contains("image02")').closest('p').addClass('image-02');
$('<img src="https://cdn.pixabay.com/photo/2023/11/07/10/06/girl-8371776_1280.png"/>').appendTo('.image-02');
// image 03
$('div.accordion-item__description p:contains("image03")').closest('p').addClass('image-03');
$('<img src="https://cdn.pixabay.com/photo/2023/10/02/14/51/flowers-8289320_1280.png"/>').appendTo('.image-03');
});
</script>
<style>
[class*="image-0"] {
font-size: 0;
}
</style>
#14.3. Add Image to Accordion Content
You can also use this approach
Enter Image Url
highlight the text url > Add same image url (enable Open in New Window)
then use this code to Code Injection or Page Header Code Injection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div.accordion-item__description p a:contains(".jpg")').each(function() {
var $t = $(this);
$(this).contents().filter(function(){ return this.nodeType != 1; }).remove();
$t.attr({
src: $t.attr('href')
})
.removeAttr('href target');
$(this).replaceWith(function(){
return this.outerHTML.replace("<a", "<img").replace("</a", "</img")
});
});
});
</script>
<style>
div.accordion-item__description img {
width: 100%;
margin-top: 10px;
}
</style>
#15. Change Plus/Minus (+/-) to custom icon
Replace demo image urls with your icon urls
/* Plus */
:not([data-is-open="true"]) .plus {
background-image: url(https://cdn.pixabay.com/photo/2021/02/06/09/03/man-5987447__340.jpg) !important;
background-size: contain;
background-repeat: no-repeat;
}
:not([data-is-open="true"]) .plus div {
display: none;
}
/* Minus */
[data-is-open="true"] .plus {
background-image: url(https://cdn.pixabay.com/photo/2021/12/12/22/17/red-squirrel-6867105__480.jpg) !important;
background-size: contain;
background-repeat: no-repeat;
}
[data-is-open="true"] .plus div {
display: none;
}
#16. Change style of a word on Accordion Title
See this comment
Your font face code is invalide, use this new code
@font-face {
font-family: 'Butler';
src: url('https://static1.squarespace.com/static/6087caa7a2bc4a466f5c693b/t/6087d2326c6768377bed3340/1619513906757/Butler.woff')
}
h1, h2, h3, h4, .user-items-list-item-container.user-items-list-carousel * {
font-family: 'Butler' !important;
}
It's terrible, I've got clients breathing down my neck on these projects too and I'm having to tell them I literally cannot progress as I cannot upload any fonts. I haven't noticed it affecting any fonts already in place though.
Anyone figured a way of hosting these fonts elsewhere or something until this sh*tstorm blows over?
EDIT:
Found a workaround that works for me in particular, if you go to the site on your phone, force desktop mode, and then upload the font from your phone, it should upload. This seems to be a working solution until they fix this. Hope that helps you guys too!
@joshuahext
Same issue josh, except i am on mac.
It's definite bug or they are no longer allowing custom font upload in 7.1 which is what the chat bot said when i asked (that's more scary).
Am awaiting a response from SQSP.
Having the same issue, all font file types are invalid. I was uploading fonts fine on Tuesday 1 August.
Today are new 'website' pages menu reboot it is not working , have reached out to support awaiting response.
So, I created a different squarespace 7.1 site about 2 weeks ago for a client and uploaded several custom fonts. Today, I started a new site and it's not allowing me to upload fonts into my custom files. It still says "Upload images or fonts", it just won't allow me to select any font files. What do I dooooo?
This did it! You're truly amazing, @tuanphan! Whenever I see your reply on a question, its the first one I read because you've always got the solution. Thank you so much for your help!