Having troubles with regions and elements in Upfront


I have spent another 4 hours paying around with everything - the tutorial was a great help! If someone would beable to help with a few questions I have below - that would be amazing (apologies I am probably trying to do too much at once)

Getting my head round regions/elements

1. Top paddings - even when setting these to 0 - there still seems to be a little extra padding in place - i.e on the call today element under the header - there is definitely a little extra padding at the top compared to the bottom

See image002.png attached

2. Elements - sometimes seem a little buggy when using the height handles - I added a gallery on - with a small row of thumbnails - the box is far too tall - so I grab the bottom and pull it up - and it just jumps back to the size it was - I could send you a screencast of this happening. The width one works totally fine - I am using firefox.

3. - is there any option to center items in an element - i.e a gallery so it is not left aligned? Within its box.

4. Also my thumbnails showed as small images - but when I changed the ratio it then changed into a cropped image - the only way I can get a small original image to appear is then to manually edit each thumbnails (would just be a pest if I added 100 images on - changed the image ratio and then had to manually edit each thumbnail to small a small bit/ rather than a cropped corner of an image - understand this might not be do-able I tend to use nextgen gallery or the responsive gallery pro (paid plugin) for most clients - but just in case your gallery would be a good alternative option to these.

5. Changing the colour of text also seems a bit buggy -I highlight the text click the T icon choose a new colour and click ok - and it doesn't always change. But watching the tutorials it works perfectly - should I not use firefox?

6. If I add a button - make it pretty small and then move it across to where I want it to sit - it jumps to the full width (again I can do a screencast showing this) - the only way to center it seems to be to add 2 empty text boxes either side - but again in the tutorial it does look like I should just be able to drag and drop this anywhere?

See image003.png attached and image004.png also attached

7. Adding custom css :-

Customizing Upfront Elements
paragraph 6 _ cannot find

This part: Go into the settings and the pre-set you have just created should be selected. Open up CSS Styles & Anchor Settings panel at the bottom of the settings dialogue, then click add new style.

I can see a custom css option and beside this it says edit present css - when I click on that and add styling at the bottom the element I have added the preset to doesn't seem to change or pick this up at all - i.e Ihave created a preset called small text
I click on a text element - click the settings icon but I cannot get it to pick up what I have set

I have added this

.plain-text-container p{font-size:18px; color#ffffff;
} = saved this and then saved the element.

But my text is still picking up the default typography settings in the theme settings (where a p tag = grey text)

Sorry for the HUGE email.

I have enabled the support in my admin area - and if required I can record what is happening and send a screen cast across - of I also use join.me if anyone was about and I can share my screen to also show this in action (I am based in the uk - so this may not suit)

Thanks again.

  • Luís

    Hi @kiaran,

    Hope you're doing well today!

    1) It could be some padding in the grid or in the object and we need to correct it using custom CSS. I checked your website, but it seems a little different, where should I remove this "extra padding"?

    2) All the elements have a minimum height, but this could be changed using custom CSS. It's the only way to customize it, because the handle will always respect this minimum height.

    3) Unfortunately, we don't have that option but, you can reduce the element and try center it in the layout, using the "empty" boxes or spacers.

    4) You can change the thumbnail size in the Gallery Settings (gear button) changing the field thumbnail size.

    When you change the ratio, it rebuilds the image, but I am not sure if is supposed or it can be considered a bug. I will ping the developer to get their feedback.

    5) I tested it in my install using Chrome and Firefox and I was unable to replicate. Sometimes it take a little additional time to change the color.

    6) The tutorials are from a older version of Upfront and it changed a little bit in this new version (1.x).

    After the version 1.0 the elements will try adjust to the grid, it's why it can take the full width.

    Example: If you add 3 text elements to the same row, the grid will change so the elements can fill the space correctly (3 text elements with the same width.)

    7) As I said above, Upfront changed in the 1.0 version, so, now you need to "edit Preset" to add Custom CSS.

    But, you should avoid edit the default preset, because this CSS would be applied to all the elements using that preset (i.e all paragraphs). Unless this is the behaviour you want.

    The best option is add a new preset and insert your Custom CSS there. See the image attached.

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.