nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

HTML Mockups and LiveSite pages

Aryan

Hello Shannon and Will,

The problem that I am going to describe is more serious than any funtionality related issues.... Smiley Happy

Our customer gave us mockups for LiveSite pages. All the content in the mockups are under a single div tag which draws a kind of border around the countent, making the page look really elegent.

Now, since I divided the page into different components (following livesite standards), I had to put the HTML code in all these components in to seperate div tags. (Understandable enough...)

NOW, the issue is that these border lines do not appear. They appear only when the components are inside a single DIV container. Also the div tags inserted by LiveSite itself (on the rendered page ) seem to interfere with this "Border" thing...

Is there a work around for this? Is there a way to have all my content insodew a single DIV container?

Find more posts tagged with

Comments

Shazzer

We have run into the same issue and got around it by using the following script included in a js file called from default.site:

if(livesite) {
window.onload=dothis;
}
function dothis () {
document.body.innerHTML =
"

"+document.body.innerHTML+"

";
}

Aryan

Thanks a lot Shazzer. But what about the DIVs inserted by Livesite...

Did you manage to remove them (Did they distort your branding???)

Shazzer

We have a custom layout that we currently use for all our Livesite outputs - you can just edit the layout xsl file to add or remove offending divs.

I think the file that you are probably after in the OOTB layouts would be the div-layouts xsl file referenced in your pagetype-config.xml.

Aryan

Thanks a lot, Shazzer.

But would'nt this afftect the layouts drastically as all the components have been designed keeping the default layout xsl.

Shazzer

It will affect all pages using the div-layout stylesheet. If you want to do it this way, you will need to be very careful with what you change and how, bearing in mind that it could affect different sites in different ways depending on what your own stylesheets are doing from site to site.

This is the advantage of writing custom layouts - you can apply your custom layout/s to specific sites if need be and not have to worry about affecting everything.

shanon

It will affect all pages using the div-layout stylesheet. If you want to do it this way, you will need to be very careful with what you change and how, bearing in mind that it could affect different sites in different ways depending on what your own stylesheets are doing from site to site.

This is the advantage of writing custom layouts - you can apply your custom layout/s to specific sites if need be and not have to worry about affecting everything.

With 2.2.1 you can just copy the div-layout.xsl to bordered-layout.xsl ( or some other name ) and then map it into the pagetype-config.xml. Once in there, LiveSite will put it as a Layout Type in the Page dropdown so that you can pick and choose which pages will have the border.

Alternatively, have you just tried using a border class on the body itself ?



/* in css */

body
{
  border: 1px solid black;
}

Shazzer

As Shanon said above, this is exactly what we have done - our custom layouts are pretty much just a copy of the original div layouts with our own customisations added.

We also tried simply adding styles to the body tag, but the effect is really not the same as applying a container div around the whole page in most cases.

Aryan

Shannon/Will,

How do I customize the layout xsl? Is there a guide line defined for it?

Do the layout xsls affect the way the components are put together to create pages?

It's very important for me to know this as it will directly impact the way the components are put together.

Also please let me know the procedure for changing the layout xsls have been documented anywhere (Documents, KB articles...)

I find that this product though poweful lacks proper documentation.

I am sorry if the tone of the post is rude, but livesite being a "product", one is totally dependant on documentation for all practical purposes.

Please help me with this issue.

bertve

Hello,

I agree with Aryan. Is there documentation available somewhere about modifying layout.xsl ?

Bert

LeaJohnston

Hi All,

Is there a response to this? It would be very useful to have some information available about the layout.xsl

Thanks

Lea

kmu

This is pretty much self explaining once you touch the page layout XSLs. The component are rendered seperately - you just adapt the container structure or whatever should go around your components. Thus the dependency is not very strict between component output and page layout.

sanoboy

With 2.2.1 you can just copy the div-layout.xsl to bordered-layout.xsl ( or some other name ) and then map it into the pagetype-config.xml. Once in there, LiveSite will put it as a Layout Type in the Page dropdown so that you can pick and choose which pages will have the border.

Alternatively, have you just tried using a border class on the body itself ?
/* in css */

body
{
  border: 1px solid black;
}

Does these operation in livesite_customer?
I just only want to add a new layout but not page type, so i should copy pagetype-config.xml from com.interwoven.livesite to livesite_customer and add the new layout mapping, right?

vpatel

Does these operation in livesite_customer?
I just only want to add a new layout but not page type, so i should copy pagetype-config.xml from com.interwoven.livesite to livesite_customer and add the new layout mapping, right?

New layout of what? Are you talking about FAL or are you talking about new page type?

sanoboy

New layout of what? Are you talking about FAL or are you talking about new page type?

of one existing page type in livesite i.e default html

vpatel

of one existing page type in livesite i.e default html

Clarify your question -- still unclear.

sanoboy

Clarify your question -- still unclear.

i want to add one custom layout for one existing page type(i.e default html) in livesite, that is say when i create a new page, if i select default html as page type then i can see custom layout under layout dropdown list

for above requirement, should i copy pagetype-config.xml from com.interwoven.livesite to livesite_customer and add the new layout mapping, or modify existing pagetype-config.xml directly?

vpatel

i want to add one custom layout for one existing page type(i.e default html) in livesite, that is say when i create a new page, if i select default html as page type then i can see custom layout under layout dropdown list

for above requirement, should i copy pagetype-config.xml from com.interwoven.livesite to livesite_customer and add the new layout mapping, or modify existing pagetype-config.xml directly?

If all you want is a custom layout -- NOT custom page type -- then you do NOT need to do anything with pagetype-config.xml. Have you read the basics of FAL? Have you read the guide to see how you can create FALs? That information is in SP Dev guide. I would suggest you read that first and/ or get some training.