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

colin.irwin

Circle Member
  • Content Count

    3,466
  • Joined

  • Last visited

  • Days Won

    90

Posts posted by colin.irwin


  1. In Bedford the #page part of the layout (under the full width banner) has a maximum width setting as well as padding. 
    These can be controlled by adding the following to your custom css, after any other code that may be there. 

    #page {
        max-width: 1020px !important; // 1020px is the default size
        padding: 96px 32px !important;  // First number is top & bottom, second is left & right  Defaults are 96px and 32px
    }

    Once inserted you can tweak the max-width and padding values. I've inserted comments so that you can see what the default values are. 


  2. You can use a regular page and then hide its header and footer using css. 

    You need to know the page's collection ID. You can find it by Inspecting the page code and looking at the BODY tag. 

    image.png.bd6b0c0d85aee08b666f768c46e306a7.png

     

    Then insert the collection id after the # in the code below and paste it into your custom css after any other code that may already be there. 

    #collection-id-goes-here {
      header.Header, footer.Footer {
          display: none !important;
      }
    }

     


  3. 14 hours ago, BHagen said:

    Thats what Im saying. The teardrop never appears. If i click EDIT i get this (see attachment)

    Screen Shot 2019-10-25 at 12.33.16 PM.jpg

    It looks like you are working on a gallery page rather than a page with a gallery block on it. 

    You should create an Index page in the navigation and drag your gallery page into the index. 

    Then you should create a Page and drag that into the Index, under your gallery. 

    Then you should be able to edit the Page and insert blocks and arrange them as you like. 

     


  4. Ajax loading is a red herring. It is not the cause of any delayed load on Bedford. 

    Looking on Google it seems that Shopify embeds can have performance issues. 

    I suggest you support Shopify support. In my experience they are excellent. Ask them if there is an optimal way to embed a store to avoid performance issues. 

     


  5. The best way to do this would be to have the black and whiteimages loaded to the site and a script to swap the color and grayscale versions. 

    However, there's a rough and ready pure css way of doing it using filters. 

    #projectThumbs a:hover img {
    	filter: grayscale(1) brightness(6);
    }

    This effectively grayscales the image and then blows out the intermediate shades of gray using brightness. 

    It's not perfect - fine detail is lost in some images.  However, I think that could be tweaked by creating custom brightness values for specific images.

    As I say, the best way is to use scripting to image swap. 


  6. There's probably a more elegant way of doing this, but the following should get you there

    @media only screen and (max-width: 640px) {
    	.homepage #block-yui_3_17_2_1_1572010646013_3853 {	
    		.slide img {
    			height: 400px !important;
    			width: 600px !important;
    			left: -100px !important;
    		}
    	}
    }

    Play with the height and width, but keep the aspect ratio correct. 

    Use the left setting to get the center of the images in view. 

    NB. This only really works if all images have the same aspect ratio. Otherwise images will get stretched. For this reason you should put all your images (including portrait ones) on a 3:2 aspect ratio canvas. 


  7.  

    As a test I created a gallery called test gallery. 

    Then I gave some of the items in the gallery links 

    image.png.dfb0bbe02e188c21069d3744ec7fc78a.png

     

    I created a summary block on another page that uses the gallery as the source of its images. 

    Then I created a css rule to kill pointer events for any summary items whose link is from the original gallery (begins with /test-gallery).

    It works as expected. Items with no clickthrough url have a standard cursor and are not clickable but those with a clickthrough work properly. 

    Here is the code - insert it at the bottom of your custom css area after any other code that may already be there. You'll need to tweak href ^= "***" to reflect your gallery slug 

    .summary-item a[href^="/test-gallery"] {
        pointer-events: none;
    }
×
×
  • Create New...