Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'custom css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Squarespace Forum Club Guidelines's Topics

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 45 results

  1. Site URL: https://www.chickenandgrill.com.au Hello! I would like to know if it is possible to add a custom CSS code to a Button Block. I have this CSS code that I use with the Custom Code Block to add a button that will take you the GloriaFood Ordering app: <!-- If you would like to customize the button, remove or change the "class" attribute inside the <span> tag --> <span class="glf-button" data-glf-cuid="f6c86696-efff-4966-8a45-641d018fe960" data-glf-ruid="cec77a3b-e53e-457d-9243-8ab0f61200f4" style="padding:15px; font-size: 16px; border-radius:0px; color:#ffffff !important ; background-color:#c21011; position: absolute; left: 50%; transform: translateX(-50%); top: 0px;"> Order Now</span> <script src="https://www.fbgcdn.com/embedder/js/ewm2.js" defer async ></script> I would like the button on my home menu to do the same thing, but squarespace only allows me to put an url or a page on the button. Is there any way I can make that button, and any other "button block" to act the same way as my custom button? Thank you for your help! Bruneta
  2. Site URL: http://gregorylassale.com Hi, I've been trying forever to figure out how to add animated / clickable scroll down arrows on my site. I found this page https://codepen.io/nxworld/pen/OyRrGy I like the arrow in section 5. Through trial and error, I managed to remove the code that didn't seem necessary for me and I tweaked the ID and class tag a bit. Would it work on my site? If so, do I put the HTML in a code block? Does the CSS go in Custom CSS and the javascript in the Code Injection header? The HTML <section id="arrow" class="scroll"> <a href="#services"><span></span>Scroll</a> </section> The CSS .scroll a { position: absolute; bottom: 20px; left: 50%; z-index: 2; display: inline-block; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); color: black; font : normal 400 20px/1 'montserrat', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; } .scroll a:hover { opacity: .5; } #arrow a { padding-top: 70px; } #arrow a span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid black; border-bottom: 1px solid black; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb05 1.5s infinite; animation: sdb05 1.5s infinite; box-sizing: border-box; } @-webkit-keyframes sdb05 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes sdb05 { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } The JS: <script> $(function() { $('a[href*=#]').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear'); }); }); </script> Thanks in advance for any help.
  3. Site URL: https://www.hoveringinthekitchen.com/blog/chicken-pot-pie-review I can't figure out how to change the font of the categories on the blog page to a custom css font. I figured out how to change it on the blog item list page (.blog-masonry .blog-categories {font-family: Annika;}) I can't seem to get it to work on the actual blog posts with .blog-meta-item–categories {font-family: 'Annika' !important;}. I used this page as my guidance; https://beaverhero.com/squarespace-71-css-list/ Can someone help me out? Thanks!
  4. Site URL: https://www.smartplayrooms.com I have a couple issues I'm trying to resolve. 1. The text on the mobile view of my site is so large. I want to make all the text smaller in general. I have tried @media only codes but they haven't worked. I am not super familiar with coding so I would love some help. 2. My boss wants some of the words in our text to be different colors. We have quote graphics where we write the quote and then have certain letter bold and in certain colors. I need to be able to do this on the homepage, our shop page, the individual product pages and shopping cart if possible. 3. On the product itself - not the product page - our product gallery image is huge on the desktop. We need that to be smaller. I know this is a lot of coding but any help would be appreciated. Thank you!
  5. Hi, I have selected heading fonts as Montserat however I would like to change the font of the 'medium' and 'large' headings only to a brush script font. I understand this is only possible with CSS in 7.1, can anyone advise exactly how to do this? Many thanks
  6. Hi, I am looking to set a custom width to all videos and images on my site (York template). Rather than having the image or video span the entire width. I prefer not to have to use spacers on every project page so is there a custom css code I can use to apply the width to all videos and images? Please let me know.
  7. Hello, everyone! I am looking for help with adding custom fonts to some image Layout Blocks that I have added to my page and hoping for some help. I have been using custom CSS code to add the custom font and am wanting to apply this font to an image block. I have tried the following code without success: .sqs-block-image .image-caption p { font-family: coldiac;} and .sqs-block-image .image-caption p { font-family: coldiac !important;} neither of which has worked. I have attached a screen shot, where it says "capturing the feeling" is where I would like to apply the custom font. Any advice would be do helpful. Thank you!
  8. Site URL: https://rabbit-indigo-e9dr.squarespace.com/config/design/custom-css Hi! I'm trying to build out a prototype for a client in squarespace, and have struggled a bit with custom CSS (total novice). I've attached a PDF of my desired layout (build in InDesign [shame on me]) as well as a screenshot of the resulting index page within the Bedford template. My question is: Can I set banner text as H1, H2, H3 with CSS? If so - any ideas re: the code I would need to add? I'd love for the top to be left justified, large and orange; The second to be left justified, smaller, blue, with enough padding to clear the woman's face and the third to be centered and white Any suggestions outside of custom CSS that you think would help? Maybe posters or collages? Super specific and annoying, but figured it couldn't hurt to ask. Appreciate any and all direction you may be able to offer as I am absolutely at a loss on this!
  9. I'm working on a non-live template and i'm trying to add a custom code for a dropdown menu and when I change from my preview and refresh it the placement of my code has moved from the original spot to the center of my screen.At times they will show up correctly with three duplicate menus in the center and others ! only have one in the correct place and all the others are centered on my page. This is the code that I am placing on the custom css area .dropbtn { background-color: #524f4f; color: white; padding: 16px; font-size: 25px; border: none; cursor: pointer; } .dropdown { position: relative; display: center; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #black;} .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: #black;} This is the code that I am using for the specific page <center> <div class="dropdown"> <button class="dropbtn">rtu's</button> <div class="dropdown-content"> <a href="#">allen bradley</a> <a href="#">idec</a> <a href="#">phoenix contact</a> <a href="#">roc</a> <a href+"#">totalflow</a> </div> </div> </center>
  10. Site URL: https://www.rubysplace.org/ Hi all, I noticed that in mobile view (or when the browser width gets small enough to show the menu icon) , the height of the header still remains the same as when it shows all the links stacked. This results in the appearance of a lot of white space above the hero image. How can I get the header height to wrap around the icon when it is downsized? I really appreciate any help on this!
  11. Site URL: https://www.wmd-inc.net/ Hello out there, I have some custom CSS applied to my site for the purpose of using a custom created font, but there are several areas of text where the code doesn't apply and requires extra code to be entered in the CSS in order to change the font in said sections to my custom font. I am looking for a source for finding those specific lines of code. Thanks all
  12. Site URL: http://www.jayclulow.photography Hi, I've been using the following custom CSS with the Flatiron template to give a wider frame view of my images on desktop .gallery-item{ width:100vw !important; height:100%; position: fixed; left: -300px; /*Change the 300px depending on your template*/ } However because on mobile that left section stacks how can I stop this rule from being applied on mobile? Thanks,
  13. Site URL: https://www.newmonday-sprint.de/medienplanung Hi everyone, in this page you will see a GetResponse form embedded in Squarespace. The weird thing happening is that any image on the page is not visible anymore and I can´t understand why. The only visible images are the ones used as background. I have tried changing image format, position, creating a different section... nothing seems to work. Ideas? thanks!
  14. Site URL: http://thepopart.squarespace.com Hi all, I'm trying to add custom fonts to image blocks (card, block and collage blocks) and hoping for some help. I've successfully applied custom fonts to the rest of the site, but these titles are the last group I need to change. Any advice or help would be so greatly appreciated! Thanks in advance, Taylor
  15. Hi all! I'm hoping someone can provide me with the code I need. I use the Wexley template and have seen code for the brine family but not Wexley. I'm looking to add a background image to the footer section behind the newsletter signup. I'm looking to have the image fill the whole entire bottom and have the text for the newsletter be white, so that it will pop against an image background. I used this to get the image on the footer; however, it does not fill the whole footer, wide, full bleed. What should I adjust? footer#footer { background-image: url( insert here); background-position: center center; background-repeat: no-repeat; background-size: cover; } Additionally, how can I make the newsletter text white, so that the text can be seen? Thanks!
  16. Site URL: https://www.yesandbymarin.com/blog I would like to hide the metadata (tag) from my blog summary carousels. I have created titles for each carousel, & thus do not need the tag also listed under the blog excerpt.
  17. Hi, I am trying to change the font on my entire website to a requested font by a client. However, I have looked up on . here how to do this and nothing seems to be working. I uploaded the font to the managed custom files and then copy and pasted what someone else recommended and nothing seems to be changing the font! I am new to css coding so not sure how to fix. @font-face { font-family: 'SpecialElite'; src: url('SpecialElitehttps://static1.squarespace.com/static/5e34f211ccdf2069316b2c65/t/5e389cb943b2a6137cb5d2a7/1580768441796/SpecialElite.ttf '); font-weight: normal; font-style: normal; } .has-site-title .Header-branding { font-family: "SpecialElite"; } #header h1.site-title { font-family: "SpecialElite";}
  18. Site URL: http://lindsey-cash.com/journal Hi, I'd like to be able to change the page width/padding on individual pages. Right now I'm having to change my page width/padding on ALL MY PAGES just to make my blog look good. I just made my page width wider and my page padding smaller to make a content page with images look how I wanted it to look, but now my blog looks weird (posts are too wide)! I've tried a few codes to make my blog posts less wide but nothing is working. Does anyone have a fix? I'd be fine with a code to either increase width/decrease padding or decrease width/increase padding and would then set my standard width as the opposite. I just want to be able to have variety and not be stuck with one width for all my pages. My goal is for my blog be skinny, like the width of the blog in the first image below, and to have individual pages that are the wider--like the width of the second image. But right now I can't have both which is frustrating. Thanks so much!
  19. Site URL: https://www.nateburdette.com/ Hi all, I'm wondering if there's a way to eliminate the slight scroll on my homepage on mobile. There's not much content, and I want the homepage to not scroll at all. (I'd like to even remove the scroll bar, like my homepage on desktop.) This code does the trick on desktop, but doesn't seem to be working on mobile. header#header { margin-top: 0; padding-top: 3vw; } Any help at all would be greatly appreciated!
  20. Site URL: https://cinnamon-guitar-2zdw.squarespace.com/blog/s Hello, I would like to change the line blocks (between blog posts) on my blog index page into an image. Can anyone advise please? Site password: 7512
  21. Site URL: https://cinnamon-guitar-2zdw.squarespace.com/blog Hello, I need help with adding a background image to my blog index page with css. ...or, adding a background image to to the wrapper of each blog post. I've been playing around with this code, but nothing is working: .tweak-blog-list-style-stacked .BlogList-item-image { background-image: url(IMAGE URL HERE) width: 100%; max-width: 500px; } If anyone can please advise, I'd really appreciate it! Site Password: 7512
  22. Hi! I added a custom font to my site, and was able to update all the headings without any issue, but i've tried multiple ways of coding for the title text and I can't get it to update to the custom font. Below is the code that I have currently. I've tried "h1.logo a", ".span site-title", "h1.site-title", ".site-title", and many others that i've seen posted in previous threads. @font-face { font-family: 'collection-regular'; src: url('https://static1.squarespace.com/static/5e3c58cf7d81b36374310001/t/5e3d74062875eb21496b77b4/1581085702842/collection-regular-webfont.woff2') format('woff2'), url('https://static1.squarespace.com/static/5e3c58cf7d81b36374310001/t/5e3d73f35749b2699ac528ab/1581085684273/collection-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } H1 { font-family: 'collection-regular'; } H2 { font-family: 'collection-regular'; } H3 { font-family: 'collection-regular'; } H4 { font-family: 'collection-regular'; } site-title { font-family: 'collection-regular'; }
  23. Site URL: https://www.jumpstarthealth.co/about-us I am needing to make the heading font color that is the banner image on this page white, but the code that I usually use is not working. Suggestions?
  24. Site URL: https://weselect.com/ So I've been trying to add custom css to our Secondary Navigation to make one of the two buttons outlined. This works fine in the editor but once I load the live site the CSS is not applied. Is there something I'm doing wrong? This is my Custom CSS: #yui_3_17_2_1_1580978748119_1195 > div > a:nth-child(1) { color: #213651!important; background-color: #ffffff!important; border: 1px solid!important; border-color: #213651!important; } It turns out like this:
  25. Site URL: https://www.jayclulow.photography/ Hello, I'm nearly complete with my website but I've ran into a number of snags I can't figure out. If you load the homepage you'll see Im using custom CSS to display a full screen gallery that almost works perfectly. What I would like is to introduce a footer element that starts immediately where the image stops so it doesn't look like the page looks half finished. Also I want to have these full screen experiences on the subsequent pages listed under portfolio. In order to get them to look like I have on the homepage they are blank pages with a gallery loaded to them. I've tried to duplicate that page and change the gallery for each but for some reason they don't work the same as they do for the homepage. Please help,
×
×
  • Create New...