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


Circle Member
  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by kale

  1. Hmm, try adding it to the actual specific pages that you want it to affect, and see if they change when in the index page. Think of an index page as just showing multiple pages in a list, so I think the style(s) of each page are probably retained. So, if you want the 3rd section of your index to have red h2, go to that page, go into the 'advanced' > 'page header' and put the style tags and css on that page, then see if it applies when viewing on the index.
  2. @mhossey Yeah, instead of adding the CSS to your custom CSS section, add it to your 'Page Settings' > 'Advanced' > 'Page Header Code Injection' area (of the page you want the CSS to apply to) But, you have to wrap the CSS in a style tag, like this: <style> h2 { color: red !important; } </style> Do that on the page(s) where you want a different h2 color and change the color to whatever you want on each page.
  3. I think this will do the trick. If you want to hide it on particular pages only, add this CSS (with style tags) to the Page Settings > Advanced > Page Header Code Injection area. Please note, if you already have style tags for other CSS for that page, don't add an additional set, simply add the CSS within existing style tags. <style> .title-desc-wrapper.has-main-image { display: none; } </style> If you'd rather apply it to every page on your site, add this to the 'Design' > 'Custom CSS' section (no style tags necessary). .title-desc-wrapper.has-main-image { disp
  4. I don't think you are setting up these blocks correctly. You need to use div id's or classes and then place your content within those, something like this: You'd add a 'Markup Block' and then add this HTML: <div class="scenario"> <p>Here is some paragraph content</p> <ul> <li>Here is an unordered list item</li> <li>and another<li> </ul> </div> And then your custom CSS would be: .scenario { font-style: normal; text-align: left; font-weight: 300; font-size: 20px; line-height: 1.8em; color: #2e4259;
  5. Have you tried adding !important to the declaration? Like this: text-align: center !important; Otherwise, if that doesn't work, can you post a link to said markup block?
  6. If you want to affect blog titles with a media query, it would be this: @media only screen and (max-width: 640px) { .collection-type-blog article .entry-title { font-size: 12px; }}
  7. You can use a media query to adjust the font size based on the width of the window, try adding this to your Custom CSS section. @media only screen and (max-width: 640px) { #header h1.site-title { font-size: 24px; } } That will reduce the font size to 24px when the screen width is 640px or less. Adjust the font size (and/or max-width value) to your liking, but 640px and 480px are common values for max-width when targeting mobile devices.
  8. Not sure why I was down voted -- perhaps because I didn't specify that this was to remove a single time from the events lists without removing all times.
  9. EDIT: This is a method to remove a single time from an events list without removing all times from the list. This is not how you would hide the time from all events. I believe I have this solved (somewhat), however, it requires jQuery. It works by using a "unique" time to target and then add a custom class to it. Then, we hide that class and thus, hide the time. The custom time I've used is 1:23am -- so any event you want to hide the time on, you set the start time to that value. Unfortunately, if you have an event that starts at that exact time, this won't work. This is for the FIVE templat
  10. Yep, go to the page you want to hide the header and footer on, and go to Manage Site (gear icon) > Page Settings > Advanced and paste this into the Page Header Code Injection (be sure to include style tags): <style> #header, #footer { display: none } </style> That should do the trick. And to remove the header and footer across the site, add this to the Custom CSS Editor: #header, #footer { display: none }
  11. You're correct -- a 'Post Blog Item Code Injection' will accomplish what you're after. You can find the 'Post Blog Item Code Injection' in the 'Blog Settings' > 'Advanced' area (it's the 2nd box) You will need to use HTML to add content to that section -- by that, I mean you will need to use paragraph tags, and other html, rather than text boxes etc. It would look like this: <h2>About thenickrobinson</h2> <p>This is a paragraph about myself.<p> <p>You can use several paragraphs in here.</p> <p>You can also add pictures and additional formating,
  12. If you want this to be applied site wide, then you should use the custom CSS section, and will only have to add the CSS once -- if you want to control image captions on a single page, then you can use per page code injections and style tags. For a single, site wide adjustment, go to 'Change Style' (paintbrush) > 'CSS' (hit confirm) and copy / paste this: .sqs-block.image-block .image-caption-wrapper p { font-size: 16px; } And then 'Save' in the CSS window, and 'Save' again in the 'Style Editor' slide-out. If you want to control it on a page-per-page basis, you would instead go to t
  13. @physicswoman I think this is the CSS you'll need for Adirondack template: .main-image-wrapper .main-image { height: 200px; }
  14. Try adding this to the 'Page Settings' > 'Advanced' > 'Page Header Code Injection' (on the page you want this to be applied, so the homepage for you). Be sure to include the style tags <style> #main-navigation { position: fixed; } </style>
  15. The #hero is just the name of the element that whoever designed the template chose. A hero image is a common print / design term for the top main image on a page (I believe). This could have been named #banner or #banner-wrapper or something but they chose hero (which is why the original code didn't work). I believe the min-height offers the ability to grow beyond the value set. In other words, something with min-height says "I must be 'this' high, but I can be taller if space allows" -- vs -- height, which is a more definite value (not positive on this, though).
  16. @Toe Try adding this CSS to your custom CSS section: #collection-52017e88e4b0e6816c1cd75a #hero .page-image { min-height: 200px; } That will change the height of your banner image on the 'Contact Us' page (not sure if that's the one you're wanting to alter but I used it to figure it out). If its for a different page, and you don't know how to get the collection ID, just post back, or alternatively, you can apply this to a single page by going to the 'Page Settings' > 'Advanced' > 'Page Header Code Injection' and pasting this (including style tags) <style> #hero .page-
  17. @Toe if you can post a link to your site, I can probably give you the CSS -- first, though, check in the 'Style Editor' -- sometimes those options are there. If not, and you can post a link, I should be able to give you the CSS.
  18. Highly unlikely - and even if there is, there will be another simple workaround. Trying to stop people from getting your images from your website is virtually impossible if they're determined.
  19. You add the code to your custom CSS section, which is described here: http://help.squarespace.com/customer/portal/articles/438114-making-style-changes However, you will need to identify your block ID, as the one I used above is just a random string of text. You get the ID by using the 'Inspect Element' found in Safari or Chrome, or by using Firebug extension for Firefox. It can be a bit tricky finding the block and id, but once you get the hang of it, identifying all of the various elements becomes quite easy. Edit: If you have a particular block on a particular page you want to center, and
  20. You could use some custom CSS to reposition (center) a block on a page. If you were to have a search box with no blocks on either side, you could left align it in the layout engine, but then do something like this to center it: #block-27cdfcdfb02ef08fdfc1 { position: relative; background: pink; width: 25%; left: 38%; }
  21. I just tested and yes, you are correct, it expands the HR, so use margin instead -- it would be: hr { margin-top: 10px; margin-bottom: 10px } or hr { margin: 10px 0 10px 0; }
  22. I imagine it would be: hr { margin-top: 10px; margin-bottom: 10px } or the shortened version is: hr { margin: 10px 0 10px 0; }
  23. I'm not sure what template you're using, so it might vary, but using the FIVE template, you can remove the logo but leave the navigation in using this CSS: #collection-yourcollectionid123456789 #banner-wrapper { display: none !important; }
  24. @Chris S - The problem is that you are using a background image, and it doesn't scale above 100% on Squarespace. Regular images will, which is how you get those full bleed galleries like Momentum, but background images are treated differently. I have never found a good solution to scale a background image. I've tried numerous CSS hacks and jQuery scripts and none worked, but I didn't really spend a lot of time on it, so it's most likely possible to get a background image scaling the same way regular images do on Squarespace, but I don't know how.
  • Create New...