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

Custom CSS not appearing on live site


Question

  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

  • 0

Hello there,

Without knowing the code you're using to create the border styles shown in the screenshot, it is a bit tricky to identify where the issue is. However, it could be that you are not targeting the correct elements or your CSS isn't specific enough.

For example:

#block-yui_3_17_2_1_1620362436514_9368 {
outline: 5px solid;
border: 5px solid;
outline-offset: 5px;
}

Creates an offset outline and border effect similar to the image you've attached without the flourish.  If you could please share the CSS you're using to create the effect we could determine the changes you may need to make.

Hope this helps!

-Dan

Link to comment
  • 0

Oh sure - I've tried a few different versions, including targetting the specific block id as you've indicated.

This is one that does appear when editing:


.content {
  border: 90px solid transparent;
    -moz-border-image: url('/s/Frame_1.svg') 120 round round;
    -webkit-border-image: url('/s/Frame_1.svg') 120 round round;
    -o-border-image: url('/s/Frame_1.svg') 120 round round;
    border-collapse: unset;
  padding: 3%;
}

 

I created a custom code block as well that works - though I would really like to target a content block instead:


.home-shirt {
  border: 130px solid transparent;
    -moz-border-image: url('/s/Frame_1.svg') 120 round round;
    -webkit-border-image: url('/s/Frame_1.svg') 100 round round;
    -o-border-image: url('/s/Frame_1.svg') 120 round round;
  padding: 0%;
}

 

It just seems to me that border-image is just not supported? Maybe I'm wrong.

Link to comment
  • 0
On 5/8/2021 at 6:48 AM, familystyleLA said:

Oh sure - I've tried a few different versions, including targetting the specific block id as you've indicated.

This is one that does appear when editing:


.content {
  border: 90px solid transparent;
    -moz-border-image: url('/s/Frame_1.svg') 120 round round;
    -webkit-border-image: url('/s/Frame_1.svg') 120 round round;
    -o-border-image: url('/s/Frame_1.svg') 120 round round;
    border-collapse: unset;
  padding: 3%;
}

 

I created a custom code block as well that works - though I would really like to target a content block instead:


.home-shirt {
  border: 130px solid transparent;
    -moz-border-image: url('/s/Frame_1.svg') 120 round round;
    -webkit-border-image: url('/s/Frame_1.svg') 100 round round;
    -o-border-image: url('/s/Frame_1.svg') 120 round round;
  padding: 0%;
}

 

It just seems to me that border-image is just not supported? Maybe I'm wrong.

/s/Frame_1.svg url won't work on preview/live mode.

use full image url, eg: https://google.com/s/Frame_1.svg

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 5/11/2021 at 12:42 AM, familystyleLA said:

Ahhhh thank you 😁

Do you need help on these?

Site URL: https://rectangle-flamingo-fbgg.squarespace.com/

1. (Tablet-Homepage) Increase box width, reduce box padding?

rectangle-flamingo-fbgg.squarespace.com-

2. (Tablet-Header) Move cart icon down a bit?

rectangle-flamingo-fbgg.squarespace.com-

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...