Bevel Edge

[Tony G]

Hi Pablo
I created a bevel edge on my shapes to make them stand out, but I can't remember how I did it.
On https://www.customclock.co.uk/business_logo.html you can see the the main area shape has a bevel and the Business Logo Clock Examples button has a bevel edge. I've recently published the Home page and realised that I've lost the bevel on the shapes, https://www.customclock.co.uk/index.html
Has this feature moved or disappeared, did I do something wrong? Your help would be very much appreciated. Thank you. Tony

[Pablo]

The bevel effect was removed a long time ago, because the current rendering engine does not support this functionality for shapes and it makes shapes not responsive.
But the effect is available for images.

[Tony G]

Thank you for such a fast response.

[scribeman01]

Hello Pablo, I came upon this post regarding the "bevel effect" being removed some time ago and I'm looking for a fill jpeg file that has 3 dimensional edges similar to this. https://www.shutterstock.com/image-illu ... -701962363Would I be looking for this in our gallery library if we have them or recommendations where to look? Thank you!

[wwonderfull]

I think it can be done using box shadows also which is purely doing it using CSS but that is for shapes and paths. But if it is a text, it would need CSS text-shadow.

[scribeman01]

Thank you Wonderful. I concede that I'm red-green color-blind which makes some of this a struggle - so even to see examples of the bevels and corners with the settings used. I'm also going thru the updated vers. 20 manual and going thru past videos etc. to see more examples how objects, layers, etc. interact with each other and to better understand the merging process. I'm trying to make sub-headlines with a shape background but also how to make it lock in one of the many new grid patterns in Vers. 20. I'm still having some trouble grasping this how to properly get this down when using a layer which is not locking a object or text in and the other thing that's driving me crazy is being able to keep the layer hierarchy (ie so that the type does not get hidden below a object or fill item) or how to hide the "hidden outline" of layout grids, etc. that are still showing on different breakpoints that I've already hidden. Much appreciated!

[wwonderfull]

If I see any design, then I can give expert advice depending on wwb's capability along with if any custom code or adjustment is needed.

[Pablo]

To be honest I personally find the 'bevel' look a little bit outdated.
But if you really want this then I suggest to use a background image

[scribeman01]

That's all I need to hear Pablo. Being red-green color-blind, I concede I'm struggling with both color balance & blend while trying to maintain a "folksy" approach to my website. So my focus today will be on better understanding how layers, objects, flexgrids, etc. interact with each other. I'm trying to better control fill, highlights, shapes related to headlines and controlling targeted padding with backgrounds.The resources here are phenominal and I applaud your energies in streamlining, making things easier to find. You put a considerable amount of time & work to being responsive & spontaneous as we grow with the software.I look at Dapsonishmeal, Greg, Brian and your videos but I concede that I crave more videos showing the interactions of the above examples. Much appreciated (as always) Sir!

[crispy68]

@scribeman,

I am looking at doing more videos so I would be interested in what you are looking for exactly. I mainly try to focus on design aspects versus just how certain tools work in WB (as others have already done this to some extent) but I am open to your ideas. Feel free to email me some things you might like to see at ron@webbuildertemplates.com

[scribeman01]

Good morning @crispy68, That would be stellar! As we speak, I am experiencing a frustration trying to get a headline title, background shape to gel on a layout grid I can apply a radius for curved corners. Putting the text in a stretched trapezoid for example is severely limited to fit in one line without it dropping to two. There is no way to control padding, text coverage, etc as a clean overlay. This would normally be a 10 minute thing to do, but this is where so much time gets burned up trying to get a simple application done.I can shoot you a screenshot if you like.

[crispy68]

Can you create a 1 page demo of what you are trying to do and upload the project file (.wbs) to your server to download so I can see what you are trying to do? Screenshots are helpful and you can provide those but an actual project is better.

[scribeman01]

Thank you Crispy, I'll give you both.

I will give you a screenshot with some marked-up comments so you can understand the struggles I've had controlling edits, padding, balance, etc. I do one thing and it upsets the apple cart. I've been more understanding of using margins vs. padding (ie text boxes) etc. Because I'm color-blind, I would appreciate your insights into if the colors balance for you and presentation. I'm getting "too close" to the project and keep changing my mind!

[scribeman01]

@Crispy68 - I just uploaded a sample project:

url]https://drive.google.com/drive/folders/ ... drive_link[/url]

1) The Index Page is how it looks now. I can't get the "No Despair Computer Repair" to layer and secure to a layer, only a flex grid. I can't seem to enter a lot of text through the whole object - so tried the overlay. I could not "snap" the text box type with the layer grid and could not snap the layer grid to the layout grid. I wanted to curve the corners via the radius and was having trouble with that regarding the type in the yellow background section. Subsequently, I was having issues controlling, tweaking the yellow corners of the background (radius) to give it a little more curve on the corners). That was also difficult with the "No Despair Computer Repair" title. I could not control the padding on either side - did not want it to fully go across the entire horizontal section of that layout grid cell it was in. The only way I could get an abbreviated background was to apply it as a highlight for the selected letters and added a space on either side to give the additional medium blue background. There has to be a much easier way to control a text block with background, padding borders, etc. On the index page, I was using one of the new layout variations with a cell for the picture and 2 sub rows on the right. Had trouble controlling the padding in each row was starting to understand the text margins better. If you go to my "page 1," you will see several ways I tried to make that "No Despair Computer Repair" title work. I welcome you making new videos - especially how layers, grids, shapes, lines, etc. interact with each other. I had burned a lot of time trying to get the cell are with text to have the desired borders & shapes. I also noticed that when I hit the back arrow to get back previous actions - - - I can't back up more than 5-7 instances. Another frustrating issue is that layout grids and their contents don't always move up or down.

2) On page 1, the hidden layout grids still show the outlines of these hidden grids and then they still can sit on top of a grid being used? How can I get those out of the way without upsetting their positioning on other pages?

3) I'm also a bit confused on a proper page canvas to facilitate a desktop page for a standard pair of 19"-24" monitors. At 1280 by 1020, I still seem to have a lot of empty space on either side of them and the bottom until I start narrowing the display to compress the sections before I get into the breakpoints 800 & 480. Perhaps 1280 pixels is too much for my default size - even though I'm using a Responsive/Flexible web format?

4) I did keep the Photo-Chat page included in this sample to see you how NICELY that page is working with the CARDS you have given me a lot of help on. What do you think?

Much appreciated!

[crispy68]

@scribeman01

I am looking at your project. Can you directly email me at ron@wizbangwebdesign.com so that I can ask you additional questions as to not fill up this thread with a bunch of questions? I want to make sure I understand what you are trying to do for each point #1 and #2.

As for #3, I typically set my default at 1900 (which is 1920 but I subtract 20px for the scroll bar). I will used layout grids with a 1x 10x 1x, where the 1x is spacing on each side and the content is in the 10x section. What this means is on a 1920 wide screen, 1x = 160px on each side leaving 1600px in the middle. This obviously shrinks or enlarges depending on the screen but keeps things nice and proportionate until you get down to smaller screens.

The height of your website is based on the content on the page. So if you dont have much on the page you will have space at the bottom on larger screens.

#4, yep looks good and working well.

[scribeman01]

Thank you Ron, will do shortly.