XF 2.0 Create new page -> wich div class do i need?

[MyPoloNL]

Hello,

On our XF1 forum we had some custom pages made, as i could've found on the forum we needed to add the following HTML on each new page like this:

<div class="messageText ugc baseHtml">

your content here

</div>

We are now testing XF2 and wanted to update those pages as well, what's the standard HTML we need to use for XF2?

And where to put our custom CSS? I always used EXTRA for that, in XF2 i've tried EXTRA_LESS but my content would not show this CSS when i load the page..

Thanks in advance!

 

[Chris D]

If you don’t use “Advanced mode” then there will already be a wrapper and so you don’t need what would have been the baseHtml wrapper from XF1. We also don’t do an extensive CSS reset like we did in XF1. It means things like bullet points etc. will automatically be styled correctly. So ultimately it should work without any additional classses.

Any custom CSS you need goes into the extra.less template.

 

[MyPoloNL]

Okey, that's clear!

Still why doesn't my CSS come up on the page i've created? (did a copy-paste from my XF1 board, so the styling should be correct i.m.o.)

My EXTRA.LESS:

<xen:comment>BEGIN Lampentabel CSS</xen:comment>

#lampentabel img, #lampentabel div {
    float: left;
}

#lampentabel div {
    vertical-align: middle;
}

#lampentabel p::after {
    height: 50px;
    content: "";
    clear: both;
    display: table;
}

#lampentabel h2 {
    color: #761826;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #000;
    line-height: 0.1em;
    margin: 10px 0 20px;
}

#lampentabel h2 span {
    background:#fff;
    padding:0 10px;
}

<xen:comment>END Lampentabel CSS</xen:comment>

 

[Chris D]

It could be the <xen:comment> lines. The equivalent in XF2 would be <xf:comment> though to be honest, as we're dealing with LESS templates here the better equivalent is actually just putting two forward slashes in front of the line.

//BEGIN Lampentabel CSS

#lampentabel img, #lampentabel div {
    float: left;
}

#lampentabel div {
    vertical-align: middle;
}

#lampentabel p::after {
    height: 50px;
    content: "";
    clear: both;
    display: table;
}

#lampentabel h2 {
    color: #761826;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #000;
    line-height: 0.1em;
    margin: 10px 0 20px;
}

#lampentabel h2 span {
    background:#fff;
    padding:0 10px;
}

//END Lampentabel CSS

 

[MyPoloNL]

Thanks, works now!