XF 2.3 CSS for Terms and Rules page/phrase only

[Big Easy]

Hi all, I'm looking to apply the CSS below to my terms and rules page to enable me to have better numeric formatting of an ordered list of points.

If I apply it in extra.less it works great, but applies itself elsewhere (such as the nav menu) where it is not wanted. I'm not clear how I can limit it or specify it purely to the "terms_rules_text" phrase. Or apply styling to any specific phrase for that matter.

I'm a newbie on XF Cloud - know a bit of HTML and CSS but that's about it. Any help would be appreciated. Thank you.

// ########################### LIST NUMBERING ON TERMS AND RULES ########################

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;
}

li li {
  margin: 0;
}

li li:before {
  content: counters(item, ".") " ";
}

 

[Deleted member 184953]

Search for the concerned template and frame all your code like this:

[data-template="your_template"]
{
    /*your code */
}

 

[Big Easy]

Search for the concerned template and frame all your code like this:

[data-template="your_template"]
{
    /*your code */
}

Thanks for your input @Old Nick - I added the below to the extra.less template (with all my CSS code from the original post within) but it hasn't done anything. Sorry if I'm being a moron. Is extra.less the right place for it?

[data-template="_help_page_terms"]
{

}

 

[Deleted member 184953]

Yep, in extra.less template, but use this instead:

[data-content-key="help_page-terms"]

But i'm not sure that's the proper way to achieve this, the easy way is to edit the terms_rules_text phrase using html tags...

 

[Naz]

Thanks for your input @Old Nick - I added the below to the extra.less template (with all my CSS code from the original post within) but it hasn't done anything. Sorry if I'm being a moron. Is extra.less the right place for it?

[data-template="_help_page_terms"]
{

}

It should be this:

[data-template-name="public:_help_page_terms"]
{
   
}

Edit: Oops, ignore this. This would only work if "Embed template names in HTML" is enabled and you're an admin.

 

[Deleted member 184953]

It should be this:

But in any case it will apply the code to the entire page and not just to the terms & rules block (Or does it only target the block?), so editing the phrase seems the best solution.

However, I note this syntax, it could be used elsewhere. Thanks @Naz

 

[Big Easy]

Yep, in extra.less template, but use this instead:

[data-content-key="help_page-terms"]

But i'm not sure that's the proper way to achieve this, the easy way is to edit the terms_rules_text phrase using html tags...

Thanks again @Old Nick this did work but also applied numbering to loads of other areas. Wasn’t sure if the hyphen after page was a typo but that way was the only variation that effected change. Just too much!

 

[Big Easy]

Thanks @Naz but this unfortunately didn’t change anything.

It should be this:

[data-template-name="public:_help_page_terms"]
{
   
}

 

[Deleted member 184953]

Thanks @Naz but this unfortunately didn’t change anything.

the easy way is to edit the terms_rules_text phrase using html tags...

 

[Big Easy]

Okay, thanks @Old Nick I'll give that a go at some point. Thanks for your efforts nonetheless.

 

[DimmmCom]

Hi all, I'm looking to apply the CSS below to my terms and rules page to enable me to have better numeric formatting of an ordered list of points.

If I apply it in extra.less it works great, but applies itself elsewhere (such as the nav menu) where it is not wanted. I'm not clear how I can limit it or specify it purely to the "terms_rules_text" phrase. Or apply styling to any specific phrase for that matter.

I'm a newbie on XF Cloud - know a bit of HTML and CSS but that's about it. Any help would be appreciated. Thank you.

// ########################### LIST NUMBERING ON TERMS AND RULES ########################

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;
}

li li {
  margin: 0;
}

li li:before {
  content: counters(item, ".") " ";
}

.template-help_page
{
    &[data-content-key="help_page-terms"]
    {
        .p-body-pageContent
        {
            >.block
            {
                &[data-template-name="public:help_wrapper"]
                {
                    // your code
                }
            }
        }
    }
}

 

[Russ]

Okay, thanks @Old Nick I'll give that a go at some point. Thanks for your efforts nonetheless.

I tested this, and it seems to work just fine.

[data-content-key="help_page-terms"] .p-body-pageContent
{
    ol
    {
        list-style-type: none;
        counter-reset: item;
        margin: 0;
        padding: 0;
    }

    li
    {
        display: table;
        counter-increment: item;
        margin-bottom: 0.6em;
    }

    li:before
    {
        content: counters(item, ".") ". ";
        display: table-cell;
        padding-right: 0.6em;
    }
    li li
    {
        margin: 0;
    }
    li li:before
    {
        content: counters(item, ".") " ";
    }
}

This will just the content area on the terms page. Using a default style, this does load the CSS correctly:


Simply placing:

[data-content-key="help_page-terms"] .p-body-pageContent
{

}

into the template won't do it, you need to have your CSS inside of it (as my above CSS)

 

[Big Easy]

I tested this, and it seems to work just fine.

[data-content-key="help_page-terms"] .p-body-pageContent
{
    ol
    {
        list-style-type: none;
        counter-reset: item;
        margin: 0;
        padding: 0;
    }

    li
    {
        display: table;
        counter-increment: item;
        margin-bottom: 0.6em;
    }

    li:before
    {
        content: counters(item, ".") ". ";
        display: table-cell;
        padding-right: 0.6em;
    }
    li li
    {
        margin: 0;
    }
    li li:before
    {
        content: counters(item, ".") " ";
    }
}

This will just the content area on the terms page. Using a default style, this does load the CSS correctly:
View attachment 317204

Simply placing:

[data-content-key="help_page-terms"] .p-body-pageContent
{

}

into the template won't do it, you need to have your CSS inside of it (as my above CSS)

Brilliant - thanks @Russ - that’s worked a treat.