positioning elements inside a layout grid

[heynen]

Dear Pablo, Dear all,

the images in this screenshot are all individual layout grids. I have two questions about these layout grids:

https://drive.google.com/open?id=1pW710 ... iy97k9-sPJ

1) The layout grid in the upper left contains a green label ("Politik"). I want to have it aligned to the right (inside the box / layout grid). Is this possible? This element can either be a "label" or a "text" (both have the same appearance). So is it possible to align either a label or a text element to the ride (inside a layout grid)?

2) That same layout grid has no round edges. The other have round edges. But I do not know any more how I made the edges round... How does this work?

Thank you!

Malte

[crispy68]

1. You can select how the content inside a grid cell is aligned by simply clicking on the cell in the layout grid properties to highlight it and then choose horizontal positioning as 'right'.

2. Based on your question, i assume the images themselves do not have rounded corners. Did you round the edges using the border property?

[heynen]

1. Thank you so much! I was really standing in my own way: I tried everything on the objects themselves, but of course it must be defined for the whole grid cell... Works perfectly!

2. Right, the image has no rounded corners. And "border radius" is set to zero (in the flexbox where the edges are rounded).

[heynen]

I have found a hint to a solution:

The name of the layout grid with sharp edges is "LayoutGrid13".
If I change the name to "LayoutGrid3" the edges become rounded!

So somewhere I must have defined a general look for some layout grids (ending wie 1, 2, 3, 4 etc, but excluding 13)

[crispy68]

I believe the curve you are creating is within the grid cell and not the whole layout grid.

Open up the layout grid properties, double click on the cell and check the border here. If you set the radius and add a border, you can curve it.

[heynen]

Ok, I have found it in the code, but I do not know how to change it in WWB...

In the index.css, there is the following code:

Code: Select all

#wb_LayoutGrid10 
{
    border-radius: 2%;
}
#LayoutGrid10-overlay 
{
    border-radius: 2%;
}

If I add this code manually for "LayoutGrid13", then this gets also round corners!
But where do I change it in WWB???

Thank you in advance.

[Pablo]

You can add custom code in Page HTML or via an HTML object.

[heynen]

The code that I mentioned is published inside the "index.css" file.
How do I change the content of that file? I do not find it inside the program.

[Pablo]

If you add custom styles in Page HTML then this will automatically be moved to this file.

[heynen]

Thanks, understood.
But strangely, I cannot find the additional code that I cited...
In WWB, if I open the HTML of the index page, I do not see it:

Code: Select all

#wb_LayoutGrid10 
{
    border-radius: 2%;
}

Where could that code be "hidden" inside the program?

[Pablo]

Styles need to be between style tags:

Code: Select all

<style>
#wb_LayoutGrid10 
{
    border-radius: 2%;
}
</style>

[crispy68]

You either added the code in the Page HTML, Site HTML, an HTML object or you added it as a custom style to the layout grid. Can you provide a copy of your project file to look at? Would be easier to find this way.

[heynen]

Thank you very much for all your help!

I will try to find it - if that does not work, I will post the whole site this afternoon.

Two questions:

a) Where would I find a HTML object in WWB?
b) To check the HTML of a page or the project, I click (activate) the page or the project in the site manager, then hit CTRL-H? Is that right?

Thanks

Malte

[Pablo]

Where would I find a HTML object in WWB?

It's available in the toolbox and insert menu.
Related tutorial:
http://wysiwygwebbuilder.com/add_html.html

To check the HTML of a page or the project, I click (activate) the page or the project in the site manager, then hit CTRL-H? Is that right?

You can access the page HTML via the main menu or context menu (right click).

[heynen]

Thank you, Pablo and Crispy!

Problem solved, and I understand my own project again... I actually added some extra HTML to the index page. Found it in the object manager. So now I can add the text for each new Layout grid there.

Code: Select all

<style>
#wb_LayoutGrid10 
{
    border-radius: 2%;
}
#LayoutGrid10-overlay 
{
    border-radius: 2%;
}
</style>

But is there actually a smarter way to do this? Can I define the border radius just once (for example as a class "roundedcorners"), and then put class="roundedcorners" inside the html of each layout grid? Would be much faster.

Thanks in advance.


PS: By the way program is great! Most of the time it as easy as driving a car (you don't have to understand the motor to do it). And if you want to tune a bit more, it offers windows into the inner workings of the motor, that you can then tweak a bit.