[Clip Path - can you create a Sad Face curve at the bottom?]

Hi.

We know how to do the CSS to create a happy face bottom curve. but how do you do that to be a sad face - so the middle is up, and the sides are down?

If you apply this class to a DIV/Row, it creates the Happy type.  How do you make it so the middle is upper?

.curved-bottom {
    clip-path: ellipse(100% 60% at 50% 40%);
}

Hope you can help.  The plan is to put a row of three Tiles, and apply this to the row, so the tiles are "cropped" in a sad face style.

[How do you apply a background image, below a Curved Ellipse Bottom?]

Mmmmm so what if you want the other rows to be black or plain white?  You then have to set each row's background.
I assumed you could set the background of the container as grey.

[How do you apply a background image, below a Curved Ellipse Bottom?]

https://www.79design.org.uk/contact-us-2/

This is a duplicate of the page.

Inspect it and you see the grve-section has a white background, but I can't override that, as it will affect all sections down the page.

I did try it with the additional 'curved-bottom' in the class in CSS, but that didn't work.

Any help would be terrific.  And some many problems!

[How do you apply a background image, below a Curved Ellipse Bottom?]

No that caused all sorts of problems.  Sorry.  Made the main Row that the Class was assgined to, almost disappear.

[How do you apply a background image, below a Curved Ellipse Bottom?]

.curved-bottom {
    clip-path: ellipse(100% 60% at 50% 40%);
    background-color: #000000!important;
}

I'm trying to add a background colour behind the Row that has this clip path base.

So that it isn't just white.

Then I'd like to make it black, and it blend in with the next row.

Is there a simple fix to make it a colour, after the curve?

[Can we shorted a Category URL with Sub Cat, down to Cat only, with HTACCESS?]

So in short, this needs to stay:

https://www.domain.co.uk/shop/category/jeans/mens-jeans/

But this:
https://www.domain.co.uk/shop/jeans/mens-jeans/blue-jeans-xl/

Needs to be turned into this:

https://www.domain.co.uk/shop/jeans/blue-jeans-xl/

[Can we shorted a Category URL with Sub Cat, down to Cat only, with HTACCESS?]

No that still allows the longer URL for products.

But does allow the longer URL for CAts, correctly.

[Can we shorted a Category URL with Sub Cat, down to Cat only, with HTACCESS?]

Not sure, but I suspect so yes.  It's a WordPress website.

[Can we shorted a Category URL with Sub Cat, down to Cat only, with HTACCESS?]

I need to add... we have THREE URLS for the shop area, including /shop/ itself of course.

/shop/category/{cat}/{sub-cat}/

/shop/category/{cat}/

/shop/{cat}/{product}/

The problem is, some pages in Google Index have:

/shop/{cat}/{sub-cat}/{product}/

So that's why we need to 301 THAT URL to the: /shop/{cat}/{product}/

 

[Can we shorted a Category URL with Sub Cat, down to Cat only, with HTACCESS?]

I'm doing this in Rank Math.

I don't think I can change the order.  Are you familiar with doing it in there, or do you know the fix directly via HTACCESS?

We dont' have 'category' anywhere else.  Products don't show it.

[Can we shorted a Category URL with Sub Cat, down to Cat only, with HTACCESS?]

Thanks.  The problem is, this is also shortening a page if it has /category/ in it.  Such as:
 

https://www.domain.co.uk/shop/category/jeans/mens-jeans/

Down to https://www.domain.co.uk/shop/category/mens-jeans/

I need it to not do it when Category is in the URL.

Possible?

[Can we shorted a Category URL with Sub Cat, down to Cat only, with HTACCESS?]

RewriteRule ^shop/[^/]+/[^/]+/([^/]+)/?$ /shop/$1 [R=301,L]

We have a site where sometimes Google has indexed a page where it is linked like this:

/shop/mens/jeans/jean-product/

But we need it to already redirect to:

/shop/mens/jean-product/

The site is written in this way, but Google has oddly indexed longer versions with the "jeans" in the sub category.

The Rewrite above was given to me, but it doesn't do anything at all.

Can someone please help?  Looking at it, surely it should have the various $1...$2 within it, but my knowledge is extremely rusty.

[How do I use Text Stroke, so the text can "disappear" off the screen?]

Geomanist is a paid for Font, so you won't be able to get it free, tho there maybe some non-commercial versions.

I just assumed the vm version of font=size would do it, rather than converting to SVG.

[How do I use Text Stroke, so the text can "disappear" off the screen?]

Why does it crop the top off tho?

Some pages will need it bigger than others, so I assumed there was a way to just make it "full the box", or at times, control it more.

[How do I use Text Stroke, so the text can "disappear" off the screen?]

I couldn't get it to work.

I want really to have a CSS that can set the text to be 100% the width of the containing DIV (ie, if it is in a 50% column...

And then one that I can tweak (ie. i fit is  in a full width column, I could set it to say 2/3s width.

Possible?

[How do I use Text Stroke, so the text can "disappear" off the screen?]

<div>
        <svg width='100%' viewBox='0 0 1400 200'>
            <defs>
                <style type='text/css'>
.text1 {
padding-top: 50px;
    font-family: Geomanist-Bold;
    font-size: 193pt;
    font-weight: 600;
    stroke: #d3cdcd;
    stroke-width: 2px;
    fill: transparent;
}
                </style>
            </defs>
            <text class='text1' x='50' y='193'>
               WordPress
            </text>
        </svg>
    </div>

So this should work?  And shouldnt' crop it?

I take it there is no way to use the VW font-size method, as I don't understand it.

[How do I use Text Stroke, so the text can "disappear" off the screen?]

<div>
        <svg width='100%' viewBox='0 0 1400 200'>
            <defs>
                <style type='text/css'>
.text1 {
padding-top: 50px;
    font-family: Geomanist-Bold;
    font-size: 193pt;
    font-weight: 600;
    stroke: #d3cdcd;
    stroke-width: 2px;
    fill: transparent;
}
                </style>
            </defs>
            <text class='text1' x='50' y='150'>
               WordPress
            </text>
        </svg>
    </div>

This Crops top and bottom for some reason.

I also assuemd the Font size would be a percentage, so that's a bit confusing to me.  I assume SEO does pick this up, as it is "text"?  (tho the words in this case are not vital).

Just assumed you could haev text that is a percentage of it's containing DIV.

[How do I use Text Stroke, so the text can "disappear" off the screen?]

Sorry I'm puzzled.

Does this SVG method take on the font used on the site?

I've read you can use a vw font size, but I don't really understand it. I assumed you could set a font to be say, 90% width of the viewpoint of the screen, or the container.  So it will stretch to fit.  So rather than one version for that media size,and another for multiple - you can just use a VW version that "fits all".

 

but it doesn't work.

[How do I use Text Stroke, so the text can "disappear" off the screen?]

.custom-stroke-text-effect-1 {
    -webkit-text-fill-color: #FFF;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #2a2a2a;
    white-space: nowrap;
    font-size: 7rem;
    opacity: 0.1;
    font-family: "Geomanist";
    margin-top: 41px;
}

@media only screen and (max-width: 950px) {
 .custom-stroke-text-effect-1 {
    font-size: 4rem;
}   
}

I am trying to create an effect so the outline text is above and slightly behind the text below it (layered).

Trouble is, on some screens the text goes off the page, causing the sidebars.

I tried overflow:hidden, but that oddly, crops the top and bottom of the text... no idea why.

I could do it with a background image, but prefer it as text if poss.  So it's easier to tweak.

Any ideas?

Bit like the attached, but so the outline text can be bigger.

[Border Bottom Curve Radius doesn't work when DIV has background image]

.curved-bottom {
border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

I'm trying to use this code, to create a bottom curve to Page Builder rows (WP Bakery).

When I set the background of the row to be a colour, this works.

When I try it with a background image, it doesn't.  No curve at all.

Why might that be, and is there a simple fix?

[How do you apply :before CSS when row has background image?]

Oooo wow.  By sheer logic I assumed ::before was before the item you select.  Ie.  Before ::title (inside the container), or ::before the inner DIV.

So what code would you use to place it ::before the ACTUAL Div??

Unless I got it right with the Absolute positioning?

[How do you apply :before CSS when row has background image?]

Sorted.  I applied positon: absolute, with top: 0, and index: 4 (so it goes over any color overlay, but not over any image that is 'overlapping'.

But I assumed that applying it as ::before, means this comes immediately before that row - not "inside it"...

[How do you apply :before CSS when row has background image?]

Why does the parent padding cause the gradient to not appear at the top, if the :before tells it to place it... before?

[How do you apply :before CSS when row has background image?]

This is the web page:

https://www.79design.org.uk/

This is the second where, for this test, I am adding the top :before code.

I think the background image is set within the DIV itself, rather than external Style.

If you look at one of the upper rows you see the top bar working, as the DIV it is "before" has only a background color or gradient set.

[How do you apply :before CSS when row has background image?]

No just a simple DIV row.  With a background-image assigned to it.