Hi all,
I have been asked to do a custom frame around a video and also around the whole page, so they have it around the edge.
It’s like a small purple border which has a highlighted middle to the top and bottom.
Never done a border around a whole page before - they want it to stay responsive too !!?
I have tried to do this border and cant seem to do it, or responsive…I have the frame as a png too.
Have a Google of the following styles
.border-image-slice
.border-image-source
You could potentially do this whole thing in css no images needed.
Hi both,
Thank you.
Yeah @Jerry - just found that as I remembered I asked something like this once before.
I have managed to get the colour I need, and change the thickness of the top and bottom edge, but cant seem to work out how to change the left and right edges - moved this from 98% to 99 etc…and nothing.
@PeteSharp - thank you for posting, I will have a look now.
Thank you.
Managed how to do it using the old code and set up, but not a clue how to create this with a border around the video.
@Norm - on borders etc could gradients be brought into it?
Looked at these @PeteSharp and thanks for posting, but a bit above my knowledge!
I will try again tomorrow.
I did ask @Norm above if gradients and more colour options could be added into borders & shadows etc - we cod all create some really cool borders, buttons etc with this!!! - I hunk the days of single colours are so 1990s!
Hi @Jerry,
Thanks for posting.
Yeah I sent them something like that - but didn’t do it in a DIV - I did the background in a column - when moving the screen bigger & smaller the video image of course shows it move apart and reset when stationary. They didn’t like it.
They want it firmly attached to the video like a proper border.
Not sure if the DIV as you said will move slicker!
I’ll give it a go now.
Thank you for the tip - I have done this now in a DIV and when making the screen bigger and smaller it does tend to keep it a lot tighter than a background column !
Keep forgetting the simplicity of wrapping it in a DIV container.
Cheers!
I would still like to see the colour palette in the future able to do borders and shadows etc using gradients if this is possible, for buttons etc this will open a whole new look.
Did this ever get addressed?
Hi @Bazza720
Yeah, I did it I am sure by creating a Div on the whole page at maximum size and then added a border to it using a gradient and adding the content inside the Div.
Forgot 100% but was something like that and it worked and client loved it.
I’m surprised it’s not easier to add borders to elements on a page - that’s the first time I’ve thought something was easier in Rapidweaver.
I can’t believe no one has requested the feature.
You just add a class to the element, then apply a border to the class.
After that you can assign that class to other elements. This way you can adjust the border for multiple elements with 1 class.
If you need a border on the entire page, apply the border class to the body classes in project settings.
Ah thanks Norm.
Hi @Norm
When I did it this way I remember I could not apply the gradient in the border easily.
Do you think adding gradients could be added to making borders at all ? or is my brain forgetting that its possible !!???
See for ease if a single colour border for a page, I would add it to the bloc and make it full screen and add it all on that bloc - well I did for my simple streaming pages !
Last I checked CSS doesn’t support gradients in borders and if it does, I’m not sure how well it is supported across browsers.
You would need to apply a gradient background and place a fill over it to give the illusion its a border.
Very cool looking. I like the gradient color blend.
border-image: linear-gradient (etc.,)
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
https://caniuse.com/border-image
Oh very cool, I was surprised to see its so well supported.
