Recreating an effect from Be Webinar on my own Betheme installation.

DanielNolan · January 2020

Hello, can you please tell me how you achieved something as I am trying to recreate it on another betheme theme. I want to recreate the light blue box with signature found on the about page of the BeWebinar theme. I have done everything so far but can not achieve the padding to the left which pushes the box over to a more central position. Can you please tell me how you did it?

Bryan · January 2020

Hey,

I have exported this section for you. Import this in your Muffin Builder on a new page for testing

YToxOntpOjA7YTozOntzOjM6InVpZCI7czo5OiI4MTUwZjg4YTUiO3M6NDoiYXR0ciI7YToxODp7czo1OiJ0aXRsZSI7czowOiIiO3M6ODoiYmdfY29sb3IiO3M6NzoiIzdiNmU2MSI7czo4OiJiZ19pbWFnZSI7czo5NDoiaHR0cHM6Ly90aGVtZXMubXVmZmluZ3JvdXAuY29tL2JlL3dlYmluYXIvd3AtY29udGVudC91cGxvYWRzLzIwMTkvMDgvd2ViaW5hci1hYm91dC1taWNoYWVsLmpwZyI7czoxMToiYmdfcG9zaXRpb24iO3M6MzI6Im5vLXJlcGVhdDtjZW50ZXIgdG9wO2ZpeGVkO2NvdmVyIjtzOjc6ImJnX3NpemUiO3M6NToiY292ZXIiO3M6MTI6ImJnX3ZpZGVvX21wNCI7czowOiIiO3M6MTI6ImJnX3ZpZGVvX29ndiI7czowOiIiO3M6MTE6InBhZGRpbmdfdG9wIjtzOjM6IjEwMCI7czoxNDoicGFkZGluZ19ib3R0b20iO3M6MzoiMTAwIjtzOjc6ImRpdmlkZXIiO3M6MDoiIjtzOjk6ImRlY29yX3RvcCI7czowOiIiO3M6MTI6ImRlY29yX2JvdHRvbSI7czowOiIiO3M6MTA6Im5hdmlnYXRpb24iO3M6MDoiIjtzOjU6InN0eWxlIjtzOjA6IiI7czo1OiJjbGFzcyI7czowOiIiO3M6MTA6InNlY3Rpb25faWQiO3M6MDoiIjtzOjEwOiJ2aXNpYmlsaXR5IjtzOjA6IiI7czo0OiJoaWRlIjtzOjA6IiI7fXM6NToid3JhcHMiO2E6MTp7aTowO2E6NDp7czozOiJ1aWQiO3M6OToiNGFjOTI5ZGNjIjtzOjQ6InNpemUiO3M6MzoiMS8yIjtzOjU6Iml0ZW1zIjthOjI6e2k6MDthOjQ6e3M6NDoidHlwZSI7czo2OiJjb2x1bW4iO3M6MzoidWlkIjtzOjk6IjY1ZTFkM2QwZSI7czo0OiJzaXplIjtzOjM6IjEvMSI7czo2OiJmaWVsZHMiO2E6MTM6e3M6NToidGl0bGUiO3M6MDoiIjtzOjc6ImNvbnRlbnQiO3M6MzkxOiI8aDM+QWJvdXQ8YnIgLz4NCk1pY2hhZWwgRXJybG90aDwvaDM+DQpbZGl2aWRlciBoZWlnaHQ9IjE1Il0NCjxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCAgaW5jaWRpZHVudCB1dCBsYWJvcmUgZXQgZG9sb3JlIG1hZ25hIGFsaXF1YS4gUXVpcyBpcHN1bSBzdXNwZW5kaXNzZSB1bHRyaWNlcyBncmF2aWRhLiBSaXN1cyBjb21tb2RvIHNpcy48L3A+DQoNCjxwPkRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNjaW5nIGVsaXQsIHNlZCBkbyBlaXVzbW9kIHRlbXBvciBpbmNpZGlkdW50IHV0IGxhYm9yZSBldCBkb2xvcmUgbWFnbmEgYWxpcXVhLiBRdWlzIGlwc3VtIHN1c3BlbmRpc3NlIHVsdHJpY2VzIGdyYXZpZGEuIFJpc3VzIGNvbW1vZG5hcyBhY2N1bXNhbi48L3A+IjtzOjU6ImFsaWduIjtzOjY6ImNlbnRlciI7czoxMjoiYWxpZ24tbW9iaWxlIjtzOjA6IiI7czo5OiJjb2x1bW5fYmciO3M6MDoiIjtzOjg6ImJnX2ltYWdlIjtzOjA6IiI7czoxMToiYmdfcG9zaXRpb24iO3M6MjA6Im5vLXJlcGVhdDtsZWZ0IHRvcDs7IjtzOjc6ImJnX3NpemUiO3M6NDoiYXV0byI7czoxMzoibWFyZ2luX2JvdHRvbSI7czowOiIiO3M6NzoicGFkZGluZyI7czowOiIiO3M6NzoiYW5pbWF0ZSI7czowOiIiO3M6NzoiY2xhc3NlcyI7czowOiIiO3M6NToic3R5bGUiO3M6MDoiIjt9fWk6MTthOjQ6e3M6NDoidHlwZSI7czo1OiJpbWFnZSI7czozOiJ1aWQiO3M6OToiOWY5ZmM1YjMzIjtzOjQ6InNpemUiO3M6MzoiMS8xIjtzOjY6ImZpZWxkcyI7YToxODp7czozOiJzcmMiO3M6OTc6Imh0dHBzOi8vdGhlbWVzLm11ZmZpbmdyb3VwLmNvbS9iZS93ZWJpbmFyL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE5LzA4L3dlYmluYXItYWJvdXQtc2luZ25hdHVyZS5wbmciO3M6NDoic2l6ZSI7czowOiIiO3M6NToid2lkdGgiO3M6MDoiIjtzOjY6ImhlaWdodCI7czowOiIiO3M6NToiYWxpZ24iO3M6NjoiY2VudGVyIjtzOjc6InN0cmV0Y2giO3M6MToiMCI7czo2OiJib3JkZXIiO3M6MToiMCI7czo2OiJtYXJnaW4iO3M6MDoiIjtzOjEzOiJtYXJnaW5fYm90dG9tIjtzOjA6IiI7czoxMDoibGlua19pbWFnZSI7czowOiIiO3M6NDoibGluayI7czowOiIiO3M6NjoidGFyZ2V0IjtzOjE6IjAiO3M6NToiaG92ZXIiO3M6MDoiIjtzOjM6ImFsdCI7czowOiIiO3M6NzoiY2FwdGlvbiI7czowOiIiO3M6OToiZ3JleXNjYWxlIjtzOjE6IjAiO3M6NzoiYW5pbWF0ZSI7czowOiIiO3M6NzoiY2xhc3NlcyI7czowOiIiO319fXM6NDoiYXR0ciI7YTo5OntzOjg6ImJnX2NvbG9yIjtzOjc6IiM4MWUxZDAiO3M6ODoiYmdfaW1hZ2UiO3M6MDoiIjtzOjExOiJiZ19wb3NpdGlvbiI7czoyMDoibm8tcmVwZWF0O2xlZnQgdG9wOzsiO3M6NzoiYmdfc2l6ZSI7czo0OiJhdXRvIjtzOjc6Im1vdmVfdXAiO3M6MDoiIjtzOjc6InBhZGRpbmciO3M6MTQ6IjYwcHggNDBweCA0MHB4IjtzOjEzOiJjb2x1bW5fbWFyZ2luIjtzOjA6IiI7czoxNDoidmVydGljYWxfYWxpZ24iO3M6MzoidG9wIjtzOjU6ImNsYXNzIjtzOjA6IiI7fX19fX0=

thanks

DanielNolan · January 2020

Yes I managed to do that on my own by inspecting the demo webpage and rebuilding in my own installation. The issue I am having is that this sits against the left hand edge of the browser. It is not pushed over like it is in the demo. I can not find the CSS that you used, whether it is margin or padding to the left. Also I can not see how you achieved the more centralised box using the vanilla settings in betheme ever. Can you tell me how to do that bit?

DanielNolan · January 2020

In fact it appears to be a margin on ALL the content, however

#Content {

margin: 200px;

}

Will not work, I only want this margin on this specific page to recreate the look of bewebinar.

Pablo · January 2020

Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co

thanks

DanielNolan · January 2020

I am just asking how you added the margin to the page content in your be webinar about us page. The page is live because it is YOUR page Pablo.

Pablo · January 2020

I do not see where margin should be applied there because it looks proper on BeWebinar, that's why I asked you about it.

If you want to add the padding for page content, just edit first section and apply the pixels value in field dedicated to it.

http://prntscr.com/qqpmm1

Thanks

DanielNolan · January 2020

I literally just want to add a margin or padding to the left and right of the page. Not the top or bottom, but the left and right of the page. At present there is no margin to my page. The yellow squares in the photo show the section I want to amend.

https://prnt.sc/qr5ssf

Pablo · January 2020

Okay, I do understand now.

It's called the "Grid Width" and you can change it in the Theme Options > Global > General

http://prntscr.com/qr6khg

Thanks

DanielNolan · January 2020

You are wonderful! Thank you!

DanielNolan · January 2020

All done with now... I found a way

Recreating an effect from Be Webinar on my own Betheme installation.

Comments

This website uses cookies