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

kale

Circle Member
  • Posts

    947
  • Joined

  • Last visited

  • Days Won

    10

kale last won the day on August 30 2017

kale had the most liked content!

1 Follower

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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; }}
  2. 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.
  3. 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.
  4. 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 template, I'm not positive if it works for other templates. To install jQuery to your site, go to 'Manage Site' (gear icon) > 'Settings' > 'Code Injection' and paste this into the 'Header' <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> Next, go to your Events page, and go to 'Events Settings' > 'Advanced' and paste this into the 'Page Header Code Injection' <script> $( document ).ready(function() { $('.eventlist-meta-time:contains("1:23am")').addClass('hideTime'); }); </script> Lastly, go to your Custom CSS section, and paste this: .hideTime { display: none !important; } Now, as I mentioned above, in order for this to work, the event start time must match the value in the 'contains(" ") -- this can be changed to whatever time you want, but make sure you set the times of the events to match. Another thing to consider is that the time might show up in other places -- I have turned off the 'Event Date Label Time' in the 'Style Editor' (under 'Event Styles'). Another place where the time will show up is in the 'Calendar block' -- I decided to hide this for all events (aesthetically, I prefer them hidden) -- to do this, you would add this to your custom CSS: .sqs-block.calendar-block .yui3-calendar-day .event-menu .event-time-group .event-time { display: none; } This isn't a perfect solution, obviously, and I hope SQSP adds a 'hide time' and 'all day' event options -- as well as 'repeating events'.
  5. 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 the page in question, then go 'Manage Site' (gear icon) > 'Page Settings' > 'Advanced' > and paste this into the 'Page Header Code Injection' section (be sure to include style tags): <style> .sqs-block.image-block .image-caption-wrapper p { font-size: 16px; } </style> You would need to do this on any page you wanted the CSS applied.
  6. @physicswoman I think this is the CSS you'll need for Adirondack template: .main-image-wrapper .main-image { height: 200px; }
  7. 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).
  8. @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-image { min-height: 200px; } </style>
  9. @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.
  10. 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.
  11. 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 are willing to post the link to the page, I can get / provide the ID for you.
  12. 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%; }
  13. 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; }
  14. I imagine it would be: hr { margin-top: 10px; margin-bottom: 10px } or the shortened version is: hr { margin: 10px 0 10px 0; }
×
×
  • Create New...