Jump to content

one-over-four

Member
  • Posts

    31
  • Joined

  • Last visited

Everything posted by one-over-four

  1. Hi @tuanphan, Can you clear your cache? It's live for several other people looking at it. Otherwise, you can access the site with this URL: https://studiotahini.squarespace.com/blog. And delete the /blog slug to get to the homepage. Thanks, Christopher
  2. Hi @tuanphan, When you enter text into the input field, the font cannot be read. Below is the full CSS code on the site: Thanks, Christopher @font-face { font-family: Magazine Grotesque Regular; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be0ac85137ed005ab8/1713250495434/Magazine-Grotesque-Regular.otf); } @font-face { font-family: Magazine Grotesque Semi Bold; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be321c6f50f450ef17/1713250495145/Magazine-Grotesque-SemiBold.otf); } @font-face { font-family: Creation; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/666c51b24017d62b1f603b79/1718374834896/Creattion.otf); } h1 {font-family: 'Magazine Grotesque Regular';} h2 {font-family: 'Magazine Grotesque Regular';} h3 {font-family: 'Creation';} h4 {font-family: 'Creation';} p.sqsrte-large {font-family: 'Magazine Grotesque Regular';} p {font-family: 'Magazine Grotesque Regular';} p.sqsrte-small {font-family: 'Magazine Grotesque Regular';} h1 { font-family: 'Magazine Grotesque Regular'; font-weight: 500; font-style: regular; font-size: 55px; letter-spacing: -0.01em; text-transform: ; line-height: 1.25em; } h2 { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 32.5px; letter-spacing: -0.01em; text-transform: ; line-height: 1,25em; } h3 { font-family: 'Creation'; font-weight: 400; font-style: regular; font-size: 60px; letter-spacing: -0.01em; text-transform: ; line-height: 1em; } h4 { font-family: 'Creation'; font-weight: 400; font-style: regular; font-size: 50px; letter-spacing: -0.0em; text-transform: ; line-height: 1,15em; } .sqsrte-large { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 20px; letter-spacing: 0.0em; text-transform: ; line-height: 1.25em; } p { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 17px; letter-spacing: 0.0em; text-transform: ; line-height: 1.50em; } .sqsrte-small { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 14px; letter-spacing: 0.0em; text-transform: ; line-height: 1.0em; } .Marquee * { font-family: Magazine Grotesque Regular; color:#333333; font-size: 18px; } .form-wrapper .field-list .title { font-family: Magazine Grotesque Regular; font-size: 13px; font-weight: 700; color: #ffffff; letter-spacing: .15em; text-transform: ; } #siteWrapper.site-wrapper .sqs-block-button-element { font-family: "Magazine Grotesque Regular" !important; } a.btn { font-family: Magazine Grotesque Regular !important; } .header-nav *, nav.header-menu-nav-list * { font-family: Magazine Grotesque Regular; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0.03em; text-transform: ; line-height: 1em; } #collection-666c4e1b283cfc6d247cbc42 { //nav button color #header .sqs-button-element--secondary { background: #F3F0EC !important; color: #6E5C55 !important; font-family: Magazine Grotesque Regular; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0.03em; text-transform: ; line-height: 1em; } } #collection-666c6b4a2b5bc96a1e9e34f3 { //nav button color #header .sqs-button-element--secondary { background: #F3F0EC !important; color: #6E5C55 !important; font-family: Magazine Grotesque Regular; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0.03em; text-transform: ; line-height: 1em; } } #collection-663bc860911fd76b92ffc196 { //nav button color #header .sqs-button-element--secondary { background: #F3F0EC !important; color: #6E5C55 !important; font-family: Magazine Grotesque Regular; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0.03em; text-transform: ; line-height: 1em; } } #collection-666c4e1b283cfc6d247cbc42 { // header background #header { background: #292929 !important; opacity: 0.65 !important; } } #collection-666c6b4a2b5bc96a1e9e34f3 { // header background #header { background: #292929 !important; opacity: 0.5 !important; } } #collection-663bc860911fd76b92ffc196 { // header background #header { background: #292929 !important; opacity: 0.5 !important; } } div.form-block * { font-family: Magazine Grotesque Regular !important; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0em; text-transform: ; line-height: 0em; color: #F3F0EC; } /* Dropdown auto width */ .header-nav-folder-content { width: auto !important; min-width: unset !important; margin-top: 15px; border-radius: 10px; } .header-nav-folder-content * { font-family: Magazine Grotesque Regular !important; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0em; text-transform: ; line-height: 2em; color: #6E5C55; } footer.sections input, footer.sections input::placeholder { color: #6E5C55 !important; font-family: Magazine Grotesque Regular !important; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0em; text-transform: ; line-height: 0em; color: #F3F0EC; border-radius: 10px; opacity: 0.9; } footer.sections .newsletter-block button { background-color: red !important; opacity: 1 !important; color: #6E5C55 !important; font-family: Magazine Grotesque Regular !important; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0em; text-transform: ; line-height: 0em; } footer.sections .newsletter-block button * { color: #F3F0EC !important; } /* Hide items: 4, 5, 6, 7... from Left Menu */ .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+4) { display: none; } /* Hide items: 1, 2, 3 from Right Menu */ .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+3) { display: none; } /* set space between menu items */ .header-nav-item:nth-child(n+4) { margin-right: 2.5vw; } /* Move Right Menu from Right of button to Left of Social */ div.header-actions nav.header-nav-list { order: 1 !important; flex-wrap: nowrap; } div.header-actions-action { order: 2 !important; } /* Equal space between right nav items, social icons, button */ div.header-actions-action--cta { margin-left: 2.5vw !important; } div.header-actions-action--social a { margin: 0 !important; margin-left: 2.5vw !important; } div.header-actions nav.header-nav-list div:last-child { margin-right: 0px !important; }
  3. Hi @tuanphan, In terms of positioning of the links, that has worked. However, the font styles need now updating. How do I do that? Thanks, Christopher
  4. @Lesum Is it possible to have a drop-down menu at the top of the page, where the user can filter on the tags? If so, how do I add that drop-down menu on the page?
  5. Hi @Earvin, Is this a different solution to the one @Lesum recommended? Thanks, Christopher
  6. Hi @Beyondspace, I've tried a few variations of the code supplied in that thread but they don't work on my site. Are you or @tuanphan (the support on the original post) able to provide this? Thanks, Christopher
  7. Hi @tuanphan, I've added the code above and been able to change the style of the input field and button. When I enter a value into the input field though, the font is illegible (see attached image). How do I format the font here? Thanks, Christopher
  8. Hi @tuanphan, The page should have been enabled (see attached image!) Thanks, Christopher
  9. Hi @tuanphan, The page has been enabled (see attached image)! Thanks, Christopher
  10. Hi @tuanphan, Page URL: https://studiotahini.squarespace.com/ I'd like to do the same on my site, however, with 3 on the left and 2 on the right (next to the Contact button). Would you be able to supple the Code for this, please? Thanks, Christopher
  11. @tuanphan Page URL: https://studiotahini.squarespace.com/
  12. Page URL: https://studiotahini.squarespace.com/ Hi there! I want the logo in the header to feature in the centre of the page. Is it possible to break up the links in the top navigation bar evenly on one side, and the other side of the logo (3 on the left, 2 on the right with the Contacto button)? Or do they all need to appear on the left-hand side of the logo? Thanks! Christopher
  13. Page URL: https://studiotahini.squarespace.com/ Hi there! I need to change the design on the form block that appear in the Unete a la communidad section: Change opacity of input fields Can you share the custom css for this? Thanks! Christopher
  14. Page URL: https://studiotahini.squarespace.com/ Hi there! I need to change the following on the newsletter block that appear in the site footer: Input field font size and colour Input field opacity and border radius Button colour and font Can you share the custom css for this? Thanks! Christopher
  15. Hi @tuanphan, Sorry for the late reply here! Page URL: https://studiotahini.squarespace.com/ I've added the below custom code to change the font style used in the form (Unete a la communidad) towards the bottom of the page. Whilst the main caption copy has been updated, the other copy still remains the same. How do I change the font colour of the rest of the copy in this form? Thanks, Christopher ----- div.form-block * { font-family: Magazine Grotesque Regular !important; font-weight: 500; font-style: bold; font-size: 15px; letter-spacing: 0em; text-transform: ; line-height: 0em; color: #F3F0EC; }
  16. Hi @tuanphan, Sorry for the late response here, but is it possible for you to share the code to achieve the solution you suggested? Thanks, Christopher
  17. Thanks @Lesum! How do you add the filter with the blog tags I've created?
  18. Hi @Lesum, On a separate note, is it possible to change the opacity of the background as well as the colour itself? Thanks, Christopher
  19. Hi @Lesum, Thanks for this! Rather than change the background colour, is there custom CSS to change the font colour of the navigation links in this page's header? Thanks, Christopher
  20. Hi there! On a custom-made portfolio page (WIP) I will create rows of images in a gallery style. Each row will correspond to a specific group. Is it possible to add a tag to each gallery group, and then add a filter at the top of the page so users can select which group they wish to view? Thanks, Christopher
  21. Page URL: https://studiotahini.squarespace.com/ Hi there! Across the site, some pages will have a dark header background and some pages will have a light header background. Is it possible to have two different Site Header designs to select from for each page type? Thanks, Christopher
  22. Page URL: https://studiotahini.squarespace.com/ Hi there! I need to change the form ('Unete a la communidad') design, however, none of the updates I make within Site Styles > Forms are being reflected on the live site. Is there any custom CSS I can add to: Change the font design of the field captions and field inputs (inc. custom font used, font size, font letter spacing, font colour) Change the field input box design I've shared the existing custom CSS below for reference. Thanks! Christopher - @font-face { font-family: Creation; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/666c51b24017d62b1f603b79/1718374834896/Creattion.otf); } @font-face { font-family: Magazine Grotesque Regular; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be0ac85137ed005ab8/1713250495434/Magazine-Grotesque-Regular.otf); } @font-face { font-family: Magazine Grotesque Semi Bold; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be321c6f50f450ef17/1713250495145/Magazine-Grotesque-SemiBold.otf); } .sqs-block-button-element { font-family: 'Magazine Grotesque Regular' !important; } button { font-family: Magazine Grotesque Regular !important; } a.btn.btn--border.theme-btn--primary-inverse { font-family: Magazine Grotesque Regular; } h1 {font-family: 'Magazine Grotesque Regular';} h2 {font-family: 'Magazine Grotesque Regular';} h3 {font-family: 'Creation';} h4 {font-family: 'Creation';} p.sqsrte-large {font-family: 'Magazine Grotesque Regular';} p {font-family: 'Magazine Grotesque Regular';} p.sqsrte-small {font-family: 'Magazine Grotesque Regular';} h1 { font-family: 'Magazine Grotesque Regular'; font-weight: 500; font-style: regular; font-size: 55px; letter-spacing: -0.01em; text-transform: ; line-height: 1.25em; } h2 { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 32.5px; letter-spacing: -0.01em; text-transform: ; line-height: 1,25em; } h3 { font-family: 'Creation'; font-weight: 400; font-style: regular; font-size: 60px; letter-spacing: -0.01em; text-transform: ; line-height: 1em; } h4 { font-family: 'Creation'; font-weight: 400; font-style: regular; font-size: 50px; letter-spacing: -0.0em; text-transform: ; line-height: 1,15em; } .sqsrte-large { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 20px; letter-spacing: 0.0em; text-transform: ; line-height: 1.25em; } p { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 17px; letter-spacing: 0.0em; text-transform: ; line-height: 1.50em; } .sqsrte-small { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 14px; letter-spacing: 0.0em; text-transform: ; line-height: 1.0em; } .header-nav *, nav.header-menu-nav-list * { font-family: Magazine Grotesque Regular; font-weight: 400; font-style: bold; font-size: 14px; letter-spacing: 0.05em; text-transform: ; line-height: 1em; } .Marquee * { font-family: Magazine Grotesque Regular; color:#333333; font-size: 18px; } .form-wrapper .field-list .title { font-family: Magazine Grotesque Regular; font-size: 13px; font-weight: 700; color: #ffffff; letter-spacing: .15em; text-transform: ; } #siteWrapper.site-wrapper .sqs-block-button-element { font-family: "Magazine Grotesque Regular" !important; } .newsletter-form-field-element{ border-radius: 20px; border:1px solid #6E5C55!important } .newsletter-form-field-element{ font-family: Magazine Grotesque Regular !important; } .form-field-element{ font-family: Magazine Grotesque Regular !important; } a.btn { font-family: Magazine Grotesque Regular !important; }
  23. Page URL: https://studiotahini.squarespace.com/ Hi there! I've implemented CSS code for my custom font (see below). I need to change the letter spacing and font size of the navigation links. I try to change the font settings with Site Styles > Fonts > Assign Styles, however, none of the updates I make here are reflected on the actual site. Is there any custom CSS code I can add to determine the font style used in the navigation links? Thanks! Christopher - @font-face { font-family: Creation; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/666c51b24017d62b1f603b79/1718374834896/Creattion.otf); } @font-face { font-family: Magazine Grotesque Regular; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be0ac85137ed005ab8/1713250495434/Magazine-Grotesque-Regular.otf); } @font-face { font-family: Magazine Grotesque Semi Bold; src: url(https://static1.squarespace.com/static/66150ddd977a5e716da79da2/t/661e20be321c6f50f450ef17/1713250495145/Magazine-Grotesque-SemiBold.otf); } .sqs-block-button-element { font-family: 'Magazine Grotesque Regular' !important; } button { font-family: Magazine Grotesque Regular !important; } a.btn.btn--border.theme-btn--primary-inverse { font-family: Magazine Grotesque Regular; } h1 {font-family: 'Magazine Grotesque Regular';} h2 {font-family: 'Magazine Grotesque Regular';} h3 {font-family: 'Creation';} h4 {font-family: 'Creation';} p.sqsrte-large {font-family: 'Magazine Grotesque Regular';} p {font-family: 'Magazine Grotesque Regular';} p.sqsrte-small {font-family: 'Magazine Grotesque Regular';} h1 { font-family: 'Magazine Grotesque Regular'; font-weight: 500; font-style: regular; font-size: 55px; letter-spacing: -0.01em; text-transform: ; line-height: 1.25em; } h2 { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 32.5px; letter-spacing: -0.01em; text-transform: ; line-height: 1,25em; } h3 { font-family: 'Creation'; font-weight: 400; font-style: regular; font-size: 60px; letter-spacing: -0.01em; text-transform: ; line-height: 1em; } h4 { font-family: 'Creation'; font-weight: 400; font-style: regular; font-size: 50px; letter-spacing: -0.0em; text-transform: ; line-height: 1,15em; } .sqsrte-large { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 20px; letter-spacing: 0.0em; text-transform: ; line-height: 1.25em; } p { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 17px; letter-spacing: 0.0em; text-transform: ; line-height: 1.50em; } .sqsrte-small { font-family: 'Magazine Grotesque Regular'; font-weight: 400; font-style: regular; font-size: 14px; letter-spacing: 0.0em; text-transform: ; line-height: 1.0em; } .header-nav *, nav.header-menu-nav-list * { font-family: Magazine Grotesque Regular; font-weight: 400; font-style: bold; font-size: 14px; letter-spacing: 0.05em; text-transform: ; line-height: 1em; } .Marquee * { font-family: Magazine Grotesque Regular; color:#333333; font-size: 18px; } .form-wrapper .field-list .title { font-family: Magazine Grotesque Regular; font-size: 13px; font-weight: 700; color: #ffffff; letter-spacing: .15em; text-transform: ; } #siteWrapper.site-wrapper .sqs-block-button-element { font-family: "Magazine Grotesque Regular" !important; } .newsletter-form-field-element{ border-radius: 20px; border:1px solid #6E5C55!important } .newsletter-form-field-element{ font-family: Magazine Grotesque Regular !important; } .form-field-element{ font-family: Magazine Grotesque Regular !important; } a.btn { font-family: Magazine Grotesque Regular !important; }
  24. Hi there, Desired behaviour: when a user clicks on an image, for a gallery (max. 6 images( to pop-up in the style of a carousel. Is this possible? Thanks, Christopher
  25. Perfect, thanks @tuanphan! Do you know how I can also modify the font in the form fields?
×
×
  • 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.