Precise placement of web part

Dave Smith asked on July 1, 2016 18:52

What is the process to place a web part within a certain HTML tag? (I'm not a developer, just an admin that probably knows more than he should about coding) :-)

I've pulled in a web part (form) into a web part zone but it is not placed correctly within the code. Specifically, I need to place it inside a div:

I'be been reading up on web part containers and I think my answer is somewhere around there but I've tried many things and can't get it placed correctly.

Any thoughts? Thanks!

David

Recent Answers


Virgil Carroll answered on July 1, 2016 19:16

Dave,

You can really control this from multiple locations and yes web part containers are one of those. Here are a few thoughts for you.

  • In the web part properties you can use the 'Content before' and 'Content after' fields to specify HTML code that will 'wrap' the contents of the webpart. This is the easiest to implement but also the least flexible..i.e. if you want to do this multiple times you have to do each separately

  • You can create a consistent webpart container that you would put the HTML in you need then apply to each webpart you want to use it. Much more flexible, but I am not a fan of webpart containers because it requires Kentico to load another component which could have a performance cost

  • You could add the HTML into the page layout and put the webpart zone inside of that. This can help with consistency across similar pages

  • You could add the HTML to the master page if you wanted to do something on a global level.

Hope that gives you some thoughts.

1 votesVote for this answer Mark as a Correct answer

Dave Smith answered on July 1, 2016 22:33

Thanks Vigil, that helps.

Now how do I get that web part to place within the html code in a certain div? In this case, I have an 18 column layout. 12 are left side, 4 are right side and the other are gutters. I want to place this in the 4 column side in a div

web part here

?

Thanks!

David

0 votesVote for this answer Mark as a Correct answer

Dave Smith answered on July 2, 2016 00:29

Sigh, okay, I see this forum removes special characters. Let me try again. Here is where I want to place the we part:

div class equals four columns web part here close div

0 votesVote for this answer Mark as a Correct answer

Virgil Carroll answered on July 2, 2016 17:11

Dave, how are you setting up your divs? Are you using a page layout? If so, did you place a web part zone inside the div columns? If I am understanding you correctly, the only way to add a web part into a particular place in a page is to have a web part zone to add it into.

Sorry if that is not what you are asking I am just not understanding the question.

0 votesVote for this answer Mark as a Correct answer

Anton Grekhovodov answered on July 2, 2016 17:23

Hi Dave,

Maybe it doesn't work correctly in admin interface, because there are additional wrappers for each webpart on Design tab. Check it in livesite mode.

How to place webpart into html code:

Image Text

More information about containers here: Creating webpart container

1 votesVote for this answer Mark as a Correct answer

Dave Smith answered on July 5, 2016 13:58 (last edited on July 5, 2016 14:00)

Thanks guys. Let me explain a bit more, first the form. Our vendor for Kentico set up forms that tie into our back office systems so I have to use those. They are in web parts. Normally they are put in the upper right or upper left of the page depending on if the template is a 33%/66% or 66%/33%. Normally they fit right in there. We have a new page design whereby the form is not all the way against the far side of the containing element, rather it is position slightly inside so it appears to overlay on top of the rest of the page without using Z positioning. Our vendor gave us CSS control of the forms which I had hoped would help with positioning but the page is positioned in HTML (it uses columns to put it in the right spot).

Next, we also asked our vendor to create a "free form" template that would allow us full control over the entire page/template. This will mostly be used for SEM pages and micro sites that use somewhat different styling than the main site (which uses main navigation and other items that are hard coded in the back end of Kentico).

So to sum, I felt I had to remove the styled form that the designer created so that I can use the form app so that this form will be tied into our back office properly. I'm really close to getting there. When I used the inspect tool in chrome I can manually move the currently misplaced form into the right div and it works. That leaves me with how, in a free form web part do I place this form app -based form in the right spot? :-)

Thanks all!

David

0 votesVote for this answer Mark as a Correct answer

Virgil Carroll answered on July 5, 2016 17:10

Dave,

Here is my last effort :) If I am understanding what you are asking, you are saying when you use the OOTB form webpart it is not aligning right, correct? If so you really only have two options there. First you can create an alternate form in the properties and lay it out yourself the way you want it, but more so you will probably have to do some CSS magic to override the OOTB styles that are causing your issue. Many of the Kentico webparts have their own styles attached to them and we routinely have to override those.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.