one-over-four

Hi @tuanphan, I've tried personalising the Custom CSS you shared above. I need to change the font colour of all copy layered ontop of the header image on the following pages to #6E5C55 on mobile: https://studiotahini.squarespace.com/mentoria-personalizada https://studiotahini.squarespace.com/presets https://studiotahini.squarespace.com/blog/estilismoculinario/beige https://studiotahini.squarespace.com/blog/receta/bizcocho https://studiotahini.squarespace.com/blog/portfolio/flaxkale Please could you share with me all Custom CSS that I need to add for this, please? Thanks, Christopher

Hi @tuanphan, Are you able to share the custom code for Option 2 now? Thanks, Christopher

Hi @tuanphan, As you can see in the attached image, there's still a couple issues: The field font is brown, not #FFFFFF The input font is so small you can't even see it What needs to change in the code to make these updates?

It should now work @tuanphan, once cache has been cleared.

Hi @tuanphan, When you go down to the form (see attached image), there's a couple issues: Some of the copy appears in brown when it should be #FFFFFF When you add a value in the field (the Nombre box, for instance), you can't see the copy. It's too small. Thanks, Christopher

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

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; }

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

@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?

Hi @Earvin, Is this a different solution to the one @Lesum recommended? Thanks, Christopher

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

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

Hi @tuanphan, The page should have been enabled (see attached image!) Thanks, Christopher

Hi @tuanphan, The page has been enabled (see attached image)! Thanks, Christopher

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

@tuanphan Page URL: https://studiotahini.squarespace.com/

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

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

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

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; }

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

Thanks @Lesum! How do you add the filter with the blog tags I've created?

Hi @Lesum, On a separate note, is it possible to change the opacity of the background as well as the colour itself? Thanks, Christopher

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

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