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!

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://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!!

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?

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?

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

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

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.