positioning elements inside a layout grid

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

positioning elements inside a layout grid

Post by 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
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: positioning elements inside a layout grid

Post by 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
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: positioning elements inside a layout grid

Post by heynen »

1. Thank you so much! :D 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
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: positioning elements inside a layout grid

Post by 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)
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: positioning elements inside a layout grid

Post by 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
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: positioning elements inside a layout grid

Post by 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.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: positioning elements inside a layout grid

Post by Pablo »

You can add custom code in Page HTML or via an HTML object.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: positioning elements inside a layout grid

Post by 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.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: positioning elements inside a layout grid

Post by Pablo »

If you add custom styles in Page HTML then this will automatically be moved to this file.
heynen
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: positioning elements inside a layout grid

Post by 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?
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: positioning elements inside a layout grid

Post by Pablo »

Styles need to be between style tags:

Code: Select all

<style>
#wb_LayoutGrid10 
{
    border-radius: 2%;
}
</style>
User avatar
crispy68
 
 
Posts: 2729
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: positioning elements inside a layout grid

Post by 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
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: positioning elements inside a layout grid

Post by 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
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: positioning elements inside a layout grid

Post by 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
 
 
Posts: 117
Joined: Sun Dec 31, 2017 4:27 pm

Re: positioning elements inside a layout grid

Post by 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.
Post Reply