Search the Community

I would like to make one of my navigation menu items/titles to look like a button/be highlighted compared to the rest. I am using the om-template. It looks like the attached photo and I would like the DONATE to be in a darker font with a white rectangular background behind it. I would like it to look similarly to the other attached photo where the CONTACT looks like a button. Thank you!

I have set up different background images to display on different pages and seemed to have it working, however now working from another computer, the background images on the Home page and Music page are not taking up the full screen. Also, on mobile the Home page is not displaying full screen either. This is the CSS I'm using for the background images on Desktop: #collection-5de6d28545f1a7075b7a2741 #canvas{ max-width: 100% !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 11px !important; background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #collection-5de6d2e045f1a7075b7a34a3 #canvas{ background-position: cover; max-width: 100% !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 11px !important; background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5df035e05d133c6a73380fa1/1576023521067/IMG_1683.JPG) } For Mobile I'm using: @media only screen and (max-width: 400px) { #collection-5de6d28545f1a7075b7a2741 .canvas{ max-width: 100% !important; max-height: 100% !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 11px !important; background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } The website I'm working on is richiequake.com, the password to access it is Help123. What I'm I missing in my CSS that the background images are not displaying full screen on Desktop and Mobile?

I there a way to change the logo image file just for the mobile size in Om (possibly with css)?

Site URL: http://thelastcoast.co I'm trying to change the font of my site's blog post titles, both on the blog roll page and on individual pages.I have successfully uploaded the custom font and used it to change h1 and h2. But the blog post titles still elude me. I've gone through every custom font post in this forum and tried all the coding, and still haven't found a CSS code that works. I've also tried the codes listed here: https://beaverhero.com/squarespace-71-css-list/#Blog_Posts but the only one that worked was ".collection-type-blog.view-list". It changed the date stamp and the "Read more" bit at the end to the font I wanted. No other codes have worked, though. I'm working on the Om template and my site is http://thelastcoast.co. Can anyone help me?

Site URL: https://www.mindbodybowl.com.au Hi, I'm having the same problem. My custom 'luster' font works great on desktop version but doesn't show up on my mobile (iphone, safari). I've tried various codes I've found on here but nothing seems to work. Here's my current code: @font-face { font-family: 'Luster'; src: url('FONT URLhttps://static1.squarespace.com/static/6029f3929f10401f2e5e1d4b/t/604991971c6fbd0b19df23aa/1615434138584/luster-brush.otf')format('opentype'); } .mobile-bar-wrapper *, h1 { font-family: 'Luster' !important; font-size: 86px } password is hranson88 thanks in advance for any help!

Site URL: https://www.dearbhlaglynn.com/ Hi, I used the following code to add a call to action button in the main navigation bar. Problem is, i'm also getting the buttons on the drop down menus in the navigation. Could someone help me edit the code so it's in the main navigation bar only and not the drop-down? Thanks so much. .main-nav li:last-child a { background: #000; color: #fff !important; padding: 10px 20px !important; border-radius: 20px; }

Site URL: https://oval-violin-hrze.squarespace.com/ I would love to know if there is some available code to inject to display the post thumbnail image for OM template. Unfortunately didn't realize this wasn't a feature of this template and already worked all day setting up basic styles for the site for a client. We'd really like to stick with this template too. Hopefully this is feasible and someone can help me. Thanks!!

Hi, I am using Om Template for my website. I have bought a font that I would like to use for my site title. I have looked through the online help and am still stuck with this. I know I am on the right path because using css code I am able to change the Heading 1 or Heading 2 or Heading 3 to use this custom font.... but I just cannot figure out how to change the site title. The custom font is not available in the list of fonts available under Site Styles | Typogrpahy | Site Title. So I have added following code under Design | Custom CSS. Where am I going wrong? Any help would be much appreciated. You can view the website on : https://interiordesignstein.squarespace.com/ // Adding Leyton Font @font-face { font-family: 'Leyton'; src: url(//static1.squarespace.com/static/5d71b8d9e71af8000103a6ea/t/5e0d887f014e1a25d2e580a0/1577945215697/Leyton-Regular.otf); } //change the heading 1 font h1 { font-family: "Leyton"; } //site title does not want to change?? header h1.site-title { font-family: "Leyton"; }

Hi, I'm using the OM template to create a simple artist page. Most of the page is pretty much set except that on mobile screens the page is not displaying correctly.What I want is for the Nav bar to be underneath the logo, the logo itself to be top and center of the page and for the background images to fill full screen. However, I got this to work briefly but now the media CSS appears to not work. The url of the website is richiequake.com and the password to view it is Help123. UPDATE I have decided to place the logo on the upper left hand and the menu button on the upper right hand side of the website. This is my CSS now: media screen and (max-width: 500px) { #header { float: none; display: block; text-align: left; }} @media only screen and (max-width: 400px) { #collection-5de6d28545f1a7075b7a2741 .canvas{ max-width: 100% !important; max-height: 100% !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 11px !important; background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } @media only screen and (max-width: 400px) { .logo-image .logo img { position: relative; right: 100px; top: -130px; width: 60%; //add for good resize based to screen } } @media only screen and (max-width: 400px) { #mobileMenuLink { margin: 0; display: inline-block; //change block to inline position: relative; font-family: "Helvetica Neue",Arial,sans-serif; font-weight: 400; font-style: normal; line-height: 1.2em; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; text-align: center; visibility: visible; left: 70%; top: -2%; } } @media only screen and (max-width: 400px) { #collection-5de6d28545f1a7075b7a2741 { } } .page-borders-thick #mobileMenuLink { border-bottom-width: 2px; padding: 5%; // ADD PADDING } #mobileNav { background: none; position: relative; top: 50%; } #mobileNav .wrapper { border-bottom-style: none; border-bottom-color: none; } #mobileNav .menu-open { margin-top: 30px !important; } Now my issue is that I want the menu to open down when the button is clicked. I tried to do this by using the .menu-open class but that did not work. How can I do this?

Site URL: https://cforc.quebec Hi, can someone please help me with hiding my shopping cart icon on certain pages? I am on Squarespace 7.0 https://cforc.quebec

Hi, I am using the OM template with an events page where I create events with a thumbnail image for each of them. Just found some of them in the search engine results. I am looking for a way to prevent the thumbnail images for each event on my site from showing up in search engine results. Any ideas or tips on how I can prevent that? Thank you in advance.

Site URL: https://www.richiequake.com/ I have been trying multiple ways to get a background image to take up the whole page. Using this CSS: #collection-5de6d28545f1a7075b7a2741 #canvas{ width: 100%; height: 100%; min-height: calc(100vh - 11px); background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg) } I have been able to get the background image to take up the whole page except: 1) There is still a black space on the left side of the page, and 2) The image is zoomed in and the rest of the picture is not displayed. I feel I'm missing something simple to achieve what I want but can't figure it out. The page is https://www.richiequake.com/ and you can view it using Help123. How can I get the background image to take up the whole page and that the image itself is completely shown and not zoomed in on one part of it?

Site URL: https://chris-stanford.online/blog Seeking to change the appearance of tags in the Om template. Rather than Tags x, y, z, I'd like the tags to appear like the ones here on the forums, with the tag name within a shape that looks like an actual tag (and without being preceded by the word "Tags"). Is there a way to do this?

Site URL: https://giraffe-cube-8ykw.squarespace.com Hi, I'm trying to insert a space between the orange line and the share/like buttons built into the blog block of the Om template - any thoughts most appreciated!