DevonHarris

@sorca_marian idk what happened but it's working now, thank you so much!!

11 hours ago, sorca_marian said:

Hi @DevonHarris,

Add the below code in Custom CSS

.sqs-announcement-bar-dropzone {
    min-height: auto!important
}

 

bummer it's not reflecting on my end 😞  I'm not sure what happened, but I also have the last nav item a button (in CSS) and that's not showing up either...

30 minutes ago, sorca_marian said:

@DevonHarris, can you add a link to your site?

hey!  sure its www.stmarksrvc.org  thank you!!

hey guys!  I recently tried this code and it's not working, not sure why...seems that there are a few new not-so-easily-fixed issues with SS customization which should be 😞

hi @tuanphan I can't seem to get this code to work...trying to change the background color from pre-set red to white.  I'm not sure where to find this setting in site styles 😕

www.stmarksrvc.org

hey @jessmall I just installed on my own website.  Basically try following these steps:

1. Insert marquee

2. reduce width of marquee to button-width, you can do so by using the handles

3. Change the background color in CSS with the selector .Marquee (you can also apply a border, border-radius, and other things to disguise this marquee as a button)

4. Change the font color in CSS with the selector .Marquee *

5. Go into your block settings and be sure to link your marquee to the appropriate page,

6. Pro Tip- If you just want one or two of these on your website, be sure to add the Block ID before your selector in CSS.  

***Example below***

#block-yui_3_17_2_1_1705517217512_9343{
  .Marquee * {
   font-family: 'GothamBold' !important;
    font-size: 1.2rem;
   color:black;
    margin: .35rem;
}
  .Marquee{
      background-color: #daff60;
      border: 3px solid black;
    border-radius: 50px;
  }
}

On 1/10/2024 at 10:12 PM, tuanphan said:

Space seems fine to me

hey @tuanphan I was wondering if you were ever able to find a fix for this?  The globe image should be moving (and in place of) all the pink text.  I tried targeting 'even' content items within the marquee block, and changing the text to transparent and adding a background image, but that just forces the globe image to stay, wheras I would like it to scroll with the text.  hoping you might have a good solution!

hey @tuanphan I'm trying to add the globe where the text is pink (and remove the pink text)- I have effectively targeted "every other" and colored it pink, now I just want to replace the text with the globe icon and make it scroll...Any ideas?

sure but it's not live yet.  Password: Watson 

So far this is the code that I used, without luck.  I have successfully ID'd the 'even' element, but the image remains absolute.  When position is changed to 'relative' or 'static', the image disappears off the page

.Marquee *:nth-of-type(even) {
  color: transparent;
background-image:url(https://static1.squarespace.com/static/5fd5fd7bc704802ff553283e/t/657a0322eb49b744657bc1f5/1702495010530/website-design-new-york-breakpoint-branding-globe-icon.png);
 background-size:contain;
 background-repeat:no-repeat;
}

The only other solution I can think of is using Chris Schwartz-Edmisten's scrolling logo plugin and insert images, then use the :nth-of-type(even) to toggle the item title on and off. 

hey @tuanphan very similar but I was hoping to space the items evenly, I tried changing the item to have a background image, but the image then stays absolute rather than moving with the text 😞

hey @tuanphan and @luciedemaid were you ever able to figure out a solution to this?  I'm looking for the same 🙂

hi!  Wondering if anyone can assist me in targeting only certain items in the Marquee Block.  I'm looking to change the font color on the 2nd, 4th and 6th items.  I tried the following but it didn't work 😞. Hopefully someone has a solution!

.Marquee * nth-child(2) {
 color:red!important;
}

On 12/20/2019 at 6:05 AM, tuanphan said:

@eclemons @Etrenoir @Creativore Add this to Home > Design > Custom CSS

(Each site  will need different block ID. This code for @eclemons site)

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1565372617118_21335 .sqs-gallery-design-grid-slide {
    width: 33.33% !important;
}
}

 

Hi @tuanphan, 

this works great except it's chopping off my instagram post image.  the fr approach doesn't work at all.  Any suggestions?

Hi!  I'm trying to remove the thumbnail image on hover of a list item.  Unfortunately both 
 

visibility: hidden

and 

display: none;

still occupy space, although the thumbnail is gone.  I need to remove the thumbnail and any space it occupies on hover, so the description text can occupy the entire space of the card.  The below is the ideal hover state:

Please let me know if you have any ideas!

Hi!  I'm trying to make my h2 tag overflow off the page.  Below is an example of the desired result.  I'm looking for the letters to actually be cut off at the edge of the page...the "services" text is slightly overflowing the page.  Any ideas on how to make this possible?  Don't want to hinder SEO by making it an image.  Would prefer to use a text block.  Thank you so much for any help you can give!

Hi guys, is there a way to add this to the metadata when the blog is viewed in a summary block?  Like this:

Hi!  This code didn't work for me 😞. Basically I just want the field list NEXT to the submit button...hoping you can assist!  Also I don't know how to locate the form ID...only the block ID?  Didn't seem to work

site: www.breakpointbranding.com/shop-1

PW: ChickenNuggets

Thanks!!

Hi!  Hoping someone can assist...looking for an easy way to recreate the below layout...

I'm looking to expand the image BEYOND the wrapper on an image-card.  I tried both using FE blocks, as well as messing with the text wrapper and padding of the card block, but neither are producing the effect I'm looking for.  I wonder if I can increase the image size, and make the overflow visible somehow?  

If anyone might know an easy fix, please let me know, thank you sooooo much!!

On 3/25/2023 at 6:18 PM, tuanphan said:

We can use code to add image, if you can share link to page where you use newsletter block, we can check & give exact code

hey @tuanphan didn't out it onto the site yet, was just wondering if it's possible with some simple code.  Let me know if so, thank you so much!!

hey @tuanphan wondering if you ever found a solution to this...looking for newsletter form information left, image right, same block.  Lmk if you find a work-around!  No site yet, thanks!

For anyone looking for a simple fix to this:

Within the "title" section of the List Contents window, Add your main heading, then the subheading.  BOLD the subheading and then go to Design>Custom CSS.  Enter the following: 

Section ID{
.list-section-title p strong{
    display: block;
    font-size: 1.6rem !important;
    font-family: 'GothamBook' !important;
    color: hotpink !important;
  }
}

The display: block attribute forces the bolded text to flow to a new line.  ".list-section-title p" identifies the list section title, and the "strong" specifies only the BOLDED text.  The Section ID ensures that this only happens within that specific section.  Then simply match your site subheading text to the font attributes listed in the code above.  

To adjust mobile font sizes, wrap the code in a media query for phones and tablets, like this:

Section ID{
@media screen and (max-width: 641px){
display: block;
color: hotpink;
}}

and

Section ID{
@media screen and (max-width: 780px){
display: block;
color: hotpink;
}}

1 hour ago, tuanphan said:

Change this line

#block-yui_3_17_2_1_1607577106512_8287 ul li:before {
	content: "";
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
  background-repeat: no-repeat;
  background-size: cover;
	position: absolute;
  width: 40px;
  height: 20px;
	left: -40px;
  top: 2px;
}

to this

#block-yui_3_17_2_1_1607577106512_8287 ul li:before {
	content: "";
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
  background-repeat: no-repeat;
  background-size: cover;
	position: absolute;
  width: 40px;
  height: 20px;
	left: -40px;
  top: 2px;
}
#block-yui_3_17_2_1_1607577106512_8287 ul li:nth-child(1):before {
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
}
#block-yui_3_17_2_1_1607577106512_8287 ul li:nth-child(2):before {
 background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
}
#block-yui_3_17_2_1_1607577106512_8287 ul li:nth-child(3):before {
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
}

you can see nth-child(1), (2), (3)

@tuanphan this is amazing, THANK YOU SO MUCH!  I have been racking my brain all week trying to figure out how to correctly insert the :nth-item tag with no luck.  You are awesome!!!

Hi!  How would I target only one bullet point with this?  I'm trying to add different images for each bullet.  Hoping someone can assist!

On 10/31/2022 at 6:30 AM, tuanphan said:

What is password?

Hey @tuanphan I fixed the issue- it just needed a color change in the style settings.  Thank you!!!