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

kale

Circle Member
  • Content Count

    947
  • Joined

  • Last visited

  • Days Won

    10

Reputation Activity

  1. Like
    kale got a reaction from chrisdavis1570048609 in How do I change the font size used in the caption of image blocks?   
    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.
  2. Like
    kale got a reaction from rjackson in How do I change the font size used in the caption of image blocks?   
    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.
  3. Like
    kale got a reaction from TreeTops in How do I change the font size used in the caption of image blocks?   
    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.
  4. Like
    kale got a reaction from ghee in How can I edit the style settings on one page only?   
    @leather0294 - The CSS you would need to paste into the custom CSS section on your site is this:
    #collection-5196d546e4b0a0fe04e906ab #mainContent { display: none; }
    OR
    If you decided to use the 'Page Header Code Injection' section for that particular page instead, you would paste this into the the 'Page Header Code Injection':
    <style> #mainContent { display: none; } <style>
  5. Like
    kale got a reaction from ghee in How can I edit the style settings on one page only?   
    Yes, you can affect just a single page by using either the 'collection id' for that page with the 'Custom CSS' section, or by using the 'Page Header Code Injection' section for the particular page, in conjunction with some custom CSS and the various selectors.
    To use the collection ID / custom CSS section you would go to the page in question, and then click the 'Manage Site' (gear icon) and then look in the URL for that page, it should look something like:
    .squarespace.com/config/#module=content&collectionId=516240dfe4b0b72af94f9ff5
    The bold part is the number you need to copy. Then you would go to the Custom CSS section -- 'Change Style' (paintbrush) > 'CSS' which pops open a window. You would add the collection ID before the selector you want to work with, something like this (replacing the collection ID with your own):
    #collection-516240dfe4b0b72af94f9ff5 #canvas-wrapper { background-image: none; } #collection-516240dfe4b0b72af94f9ff5 #horizontal-navigation-bar { display: none; }
    If you were to use the 'Page Header Code Injection', you would instead go to the page you want to apply these changes to, then go 'Manage Site' (gear icon) > 'Page Settings' > 'Advanced' and paste this into the 'Page Header Code Injection':
    <style> body { background-image: none; } #horizontal-navigation-bar { display: none; } </style>
    But in order for this to work, you need to find the various the selectors you want to hide. This can be done using the 'Inspect Element' found in Chrome and Safari, or by using the add-on 'Firebug' for Firefox. Different templates use different selector names so there's not really any way to provide the selectors without that basic information.
  6. Like
    kale got a reaction from kathy in How do I change the font size used in the caption of image blocks?   
    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.
  7. Like
    kale got a reaction from harryt in How can I edit the style settings on one page only?   
    Yes, you can affect just a single page by using either the 'collection id' for that page with the 'Custom CSS' section, or by using the 'Page Header Code Injection' section for the particular page, in conjunction with some custom CSS and the various selectors.
    To use the collection ID / custom CSS section you would go to the page in question, and then click the 'Manage Site' (gear icon) and then look in the URL for that page, it should look something like:
    .squarespace.com/config/#module=content&collectionId=516240dfe4b0b72af94f9ff5
    The bold part is the number you need to copy. Then you would go to the Custom CSS section -- 'Change Style' (paintbrush) > 'CSS' which pops open a window. You would add the collection ID before the selector you want to work with, something like this (replacing the collection ID with your own):
    #collection-516240dfe4b0b72af94f9ff5 #canvas-wrapper { background-image: none; } #collection-516240dfe4b0b72af94f9ff5 #horizontal-navigation-bar { display: none; }
    If you were to use the 'Page Header Code Injection', you would instead go to the page you want to apply these changes to, then go 'Manage Site' (gear icon) > 'Page Settings' > 'Advanced' and paste this into the 'Page Header Code Injection':
    <style> body { background-image: none; } #horizontal-navigation-bar { display: none; } </style>
    But in order for this to work, you need to find the various the selectors you want to hide. This can be done using the 'Inspect Element' found in Chrome and Safari, or by using the add-on 'Firebug' for Firefox. Different templates use different selector names so there's not really any way to provide the selectors without that basic information.
  8. Like
    kale got a reaction from JanetP in How can I change the top and bottom padding of horizontal rule?   
    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; }
×
×
  • Create New...