Jump to content

Phobic78

Member
 View Profile  See their activity

  • Posts

    34

  • Joined

  • Last visited

 Content Type 

Posts posted by Phobic78

    Button not centred

    in Customize with code

    Posted

    On 9/26/2022 at 1:48 PM, paul2009 said:

    Yes. You can use CSS to do this, as you did in your original post above, except that you'll use the classes of the Product Block's button instead of your ".signup" class. For example, to change the background colour you might use something like this: 

    .product-block .sqs-add-to-cart-button.sqs-button-element--primary {
  background-color: #c4e5c0!important;
}

     

    Yes, this works exactly as intended now, thanks a lot!

    Button not centred

    in Customize with code

    Posted

    On 9/24/2022 at 12:41 PM, paul2009 said:

    The code in this thread won't work as intended. This is because the the link you are using (mentioning a cartToken) is unique and as soon as the item is removed from the checkout, it will fail to work. 

    A much simpler solution is to add a Product Block to the page, as this won't require code. If you link the Product Block to the product that you want sell, and toggle all options off except the button, it should achieve the result that you want.

    Thank you for this head up, @paul2009. I will use the product block. Is it possible for me to customise the button so that it isn't just a black rectangle? The button I have created is ideal but as you point out, it isn't going to link to the product as intended.

    Button not centred

    in Customize with code

    Posted

    On 9/23/2022 at 5:10 PM, Web_Solutions said:

    I have updated your code.  Please replace these code and let me know if it work. 

    .SignupDiv{
  display: block;
  text-align: center;
}
.signup{
 -webkit-transition: all 400ms ease-in-out;
     -moz-transition: all 400ms ease-in-out;
      -ms-transition: all 400ms ease-in-out;
       -o-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
  transition: all 200ms ease-in-out;
  padding: 15px 25px !important;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  tex-decoration:none !important;
  outline: none !important;
  color: white  !important;
  background-color: #c4e5c0;
  border: none;
  border-radius: 25px;
  box-shadow: 0 2px #999;
  max-width:max-content;
  position:relative;
}
a:link{
	text-decoration:none !important
    }
    
.signup:after{
	content:"Sign Up"; 
    }
    
.signup:hover{
    -webkit-transition: all 600ms ease-in-out;
     -moz-transition: all 400ms ease-in-out;
      -ms-transition: all 400ms ease-in-out;
       -o-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
  transition: all 600ms ease-in-out;
  box-shadow: 0 4px #999;color:#7c7c7b !important;
  color:#7c7c7b;
  }

.signup:active {
  color: #7c7c7b;
  box-shadow: 0 4px #999;
  transform: translateY(4px);
}

<div class="SignupDiv"><a class="signup" href="https://secure.squarespace.com/checkout?cartToken=cCgtbiu3iuL1bhb92cLZ5lfk-RahxlBtwd5QeSw9&websiteId=58762023893fc0d94810ba05"></a></div>

     

    Thank you, @Web_Solutions. defining a div class worked. It sounds like the link to the product isn't going to work, which is a shame, but i greatly appreciate the coding lesson!

    Button not centred

    in Customize with code

    Posted

    Site URL: https://tracytredoux.com/programmes/2-week-winter-detox-2023

    Hi all,

    I have created a button for a sales page and centred it with the position:relative, left:50%, but for some reason it is aligning right of centre.

    Also, the text is appearing at the bottom of the button, rather than vertically centred. Strangely, this happens in all the instances except the one at the very bottom of the page, where the text is in the vertical centre. I have used a styled link, rather than a button as I read somewhere that buttons shouldn't be used to link to other pages but i'm not sure if this is correct.

    Most buttons look like this:

    image.thumb.png.59732176f3ef50f564c1c6007ced2ba9.png

     

    Button at the bottom of page looks like this:

    image.thumb.png.9c839e864ec9ba507cbca2a59ca4cfb7.png

     

    And here is my code: 

    .signup{
 -webkit-transition: all 400ms ease-in-out;
     -moz-transition: all 400ms ease-in-out;
      -ms-transition: all 400ms ease-in-out;
       -o-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
  transition: all 200ms ease-in-out;
  padding: 15px 25px;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  tex-decoration:none !important;
  outline: none !important;
  color: white  !important;
  background-color: #c4e5c0;
  border: none;
  border-radius: 25px;
  box-shadow: 0 2px #999;
  max-width:max-content;
  position:relative;
  left:50% ;
  
}
a:link{
	text-decoration:none !important
    }
    
.signup:after{
	content:"Sign Up"; 
    }
    
.signup:hover{
    -webkit-transition: all 600ms ease-in-out;
     -moz-transition: all 400ms ease-in-out;
      -ms-transition: all 400ms ease-in-out;
       -o-transition: all 400ms ease-in-out;
          transition: all 400ms ease-in-out;
  transition: all 600ms ease-in-out;
  box-shadow: 0 4px #999;color:#7c7c7b !important;
  color:#7c7c7b;
  }

.signup:active {
  color: #7c7c7b;
  box-shadow: 0 4px #999;
  transform: translateY(4px);
}
</style>

<a class="signup" href="https://secure.squarespace.com/checkout?cartToken=cCgtbiu3iuL1bhb92cLZ5lfk-RahxlBtwd5QeSw9&websiteId=58762023893fc0d94810ba05"></a>

    Many thanks in advance!

    align image and text within a div

    in Customize with code

    Posted

    13 minutes ago, tuanphan said:

    It looks fine to me. Which screen size/or device do you see problem?

    Thanks, @tuanphan and @bangank36, it does seem to work now. I'm not sure why the image was resizing for me before. I cleared my browser cache and restarted the laptop and it works now. The only thing is that the image aligns to the top of the container (see the screenshot). Is there any way that I can vertically align it to the centre?

    image.thumb.png.5500e38847dc9113a95fbc65cf9092f9.png

    align image and text within a div

    in Customize with code

    Posted

    4 hours ago, bangank36 said:

    Try adding to Home > Design > Custom Css 

    .green {
  display: flex;
  align-items: center;
}

.green .imageplace {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  width: 10%; /*increase size of image*/
}
.green .text {
  margin-left: 0;
}

    Support me by pressing 👍 if this useful for you

    Thanks for your answer, @bangank36. It kind of works, but when the screen width gets smaller, the image becomes tiny. I'm attaching a screenshot:

     

    image.thumb.png.b757835d4007cd29d089c5456a7f2d90.png

    align image and text within a div

    in Customize with code

    Posted

    Site URL: http://https%3Atracytredoux.com/code-test

    image.thumb.png.494cc9ccce97468b989e6c3a808948f5.png

    Hi, I'm trying to create a series of coloured blocks that contain an icon, a title and some text. This is the closest I have been able to get and as you can see from the code below, it's a bit messy. I have had to position the icon and the text manually, and the icon does not stay vertically centred as the screen is resized.

    If anyone has a suggestion how I could code this more effectively I would be very grateful. 

    <style>
  
  .heading{
  font-size:1.2em;
  }
  
  .text{
  margin-left:60px}
  
  .imageplace{
   position:absolute;
   top:30px
   }
  
  .green{
  background-color:#c4e5c0;
  padding:20px 40px 20px 40px;
  border-radius:0px 20px 0px 20px;
  max-width: max-content;
  text-align:center;
  }
  
  </style>
  
  <div class="green">
  <div class="imageplace"><img src="https://images.squarespace-cdn.com/content/v1/58762023893fc0d94810ba05/1663759321108-63ZII831I0JURY7W4V9T/guide.png?format=500w" alt="Cinque Terre" width="60" height="60"></div><div class="text"><span class="heading">At a Glance</span> – this is your daily protocol for phases 2 and 3 of the program, recipes included and some more test text to see how it resizes as i change the size of the viewport.</div>
</div><br>

     

    Creating a custom hyperlink

    in Customize with code

    Posted

    1 hour ago, bangank36 said: 
    section[data-section-id="632325195ff8e36ad6da6f2b"] .list-item-content__button {
  top: -100vh;
  left: 0;
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: transparent !important;
  border: none !important;
}
section[data-section-id="632325195ff8e36ad6da6f2b"] .list-item {
  overflow: hidden;
}

    1. Show the button for items when you edit this section

    2. Use my above code to make the buttons cover over item

    Let me know how it works on your site

    Perfect, thank you so much!

    Creating a custom hyperlink

    in Customize with code

    Posted

    10 minutes ago, bangank36 said:

    Have you tried this setting for the service section?

    image.thumb.png.cb2b754bf8a3b2ef87738ba70ffcc821.png

    Hi @bangank36, thanks for your suggestion. Yes, I've seen the button option and it's a last resort but I would really like to make the entire section clickable as I think it would improve the usability and save on screen real estate on mobiles.

    Creating a custom hyperlink

    in Customize with code

    Posted

    Site URL: https://bettertotalk.com/sandbox

    Hi all,

    I'm working with a section that is taken from the 'services' templates in fluid mode. I'd like to make each of these 3 sections hyperlinks but there isn't any built in option to do so (other than adding a button). I have been able to tweak the text formatting using the section ID, but I can't find an ID to target the individual list elements and I'm not sure what the actual syntax should be for creating a hyperlink.

    Any suggestions appreciated!

    image.thumb.png.ae19a2b28b7c4fa3d13589a7472af828.png

    Changing font size

    in Customize with code

    Posted

    On 8/26/2022 at 10:18 AM, tuanphan said:

    #1. Use this new code 

    @media screen and (max-width:767px) {
div#block-5457f48e1c64898f4c01 * {
    font-size: 12px !important;
}
}

    #2. Both are same. But add to Custom CSS will be easier to manage/edit in the future.

    Thank you!

    Changing font size

    in Customize with code

    Posted

    5 hours ago, tuanphan said:

    Try adding this to Design > Custom CSS 

    @media screen and (max-width:767px) {
.fe-62e6c5861df8fc47dd4cde1b * {
    font-size: 12px !important;
}
}

     

    Thanks @tuanphan, this does change the font size, but it is applying it to the entire footer. I am trying to change only the 'better to talk' text, which is block id: #block-5457f48e1c64898f4c01

    Also, is there any particular reason why this should be in custom CSS, rather than embedded in a code block in the footer itself?

    Thanks!

    Changing font size

    in Customize with code

    Posted

    Site URL: https://bettertotalk.com

    Hi,

    I'm trying to change some text size in my footer in mobile view only. For some reason none of the font-size commands seem to have an effect. Code is below (the second part) and is located in a code block within the footer itself. I added in the background-color bit just to be sure that I am referencing the correct block and it works fine so it's just the font size that has no effect.

    Thanks in advance! 

    <style>
  @media only screen and (min-width: 601px){
    #block-yui_3_17_2_1_1661168201465_60548{
      position:relative;
      top:-6px
    }
  }
  @media only screen and (max-width: 600px){
    #block-5457f48e1c64898f4c01{
      font-size: 50% !important;
      background-color:red
    }
    {
    
</style>

     

    Aligning Text

    in Customize with code

    Posted

    2 hours ago, paul2009 said:

    There used to be an Opening Hours feature in Squarespace 7.0 but, as you've found, you must manually create this in Squarespace 7.1.

    You may want to use a table for this information, by adding it to a Code Block. For example, add a Code Block and then add the following information to the Code Block (noting the settings in the screenshot below): 

    <style>
th {
  text-align: left;
  padding-right: 7px;
}  
</style>

<table>
<tr><th>Monday</th><td>08:00 - 22:00</td></tr>
<tr><th>Tuesday</th><td>08:00 - 22:00</td></tr>
<tr><th>Wednesday</th><td>08:00 - 22:00</td></tr>
<tr><th>Thursday</th><td>08:00 - 22:00</td></tr>
<tr><th>Friday</th><td>08:00 - 22:00</td></tr>  
</table>

     

    image.thumb.png.cecf701a2e1ee089bebe53acf1f74e2b.png

    image.png.7822309ee87617450208b3625b9f9caf.png

      If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

    Thanks @paul2009, this is exactly what I needed!

    Aligning Text

    in Customize with code

    Posted

    Site URL: https://bettertotalk.com

    Hi,

    I'm trying to find a better way of aligning the text in my footer so that the opening times are aligned. I think that TAB should work but in Squarespace pressing that key cycles around blocks. I have used the space key in the image below but obviously they aren't quite lined up. I also tried to use 2 different text blocks, but as you can see in the 2nd screenshot, they start to overlap when on a smaller screen.

    Is there a way to implement this?

    Thanks in advance!

     

    image.thumb.png.b366fa84744fa3628d2078cf0b701cfc.png

     

    image.thumb.png.9b3a9dcd449865ba53ab9436dbea8488.png

    image.png

    Change link colour on a single page

    in Customize with code

    Posted

    Hi all,

    I would like to be able to change the link colour for a whole page. At the moment, I have a workaround by defining a .colorchange class and then using 'span class="colorchange"' within each link. But it would be great if I could just define the link colours in the page's style header.

    I have tried a few variations around: 

    <style>
  
  p a{
    color:#c10000
  }
  
</style>

    This doesn't seem to have any effect so I'm wondering if my syntax is wrong, or if it just isn't possible?

    Thanks in advance.

    H4 not displaying correctly

    in Customize with code

    Posted

    29 minutes ago, meganheath said:

    You can use bold/light or a value.

    This specific issue had to do with the fact that the h4 tag already had a font-weight:bold; set by Squarespace. So you needed to override this in your css. (see image below)

    The span style is set by the inline css you've added to the tag. 

     

    820050224_Screenshot2022-02-10at13_24_13.thumb.png.4db0321e34e049fdb5896a9d7335d3b2.png

    Ah yes, I understand it now and it's working for me. Thanks a lot!

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources