Testing lists with html and css

[xmanhattan]

Hello all,

I have created a template_modifications.css file using the code that is for the multi nested leveled list in the attached file.

Testing locally, I flushed the cache of the website and reloaded the page in the browser but I am not seeing the results that I get from a stand alone html css file.

Please see attached.

Can someone tell me what might be wrong?

[xmanhattan]

The attached text file is actually an html file for testing purposes without Elxis to see the results.
Simply change .txt to .html.
It uses the same css that I used in Elxis for the test.

Anyone?

[datahell]

If you use CSS minifer disable it because it might has cached the previous version of the page.

Elxis administration > Settings > Performance > CSS = "No"

[xmanhattan]

The css minifier is not activated.  I checked the html coding and the css but did not find any errors.
I used the portion of the original css for lists from the flex template as this is what I am testing it with.

This is what is what the output looks like:

Code: [Select]

div class="elx_dateauthor">Last update <time datetime="2017-02-20 08:31:05">Feb 20, 2017 10:31</time> by user1</div>
<p class="elx_content_subtitle">testing lists with html and css</p>
<h3><strong>LEVELS OF LISTS</strong></h3>

<ul id="lower-latin">
<li>First Level items</li>
<li>First LI</li>
<li>Second LI</li>
<li>Third LI</li>
<li>Fourth LI</li>
<li>Fifth LI
<ul>
<li>Second Level items</li>
<li>First LI</li>
<li>Second LI</li>
<li>Third LI</li>
<li>Fourth LI</li>
<li>Fifth LI
<ul>
<li>Third Level Item</li>
<li>First LI</li>
<li>Second LI</li>
<li>Third LI</li>
<li>Fourth LI</li>
<li>Fifth LI
<ul>
<li>Fourth Level Item</li>
<li>First LI</li>
<li>Second LI</li>
<li>Third LI</li>
<li>Fourth LI</li>
<li>Fifth LI
<ul>
<li>Fifth Level Item</li>
<li>First LI</li>
<li>Second LI</li>
<li>Third LI</li>
<li>Fourth LI</li>
<li>Fifth LI</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

<p>&nbsp;</p>

I also checked to make sure that the modification file was also being linked properly.
Here is a copy of it renamed to txt because the attachments will not take css.

[datahell]

Are you sure the "template_modifications.css" file is loaded in your template's head section?

Checks
1. View page source and see if there is a link to "template_modifications.css" file and also if this link is OK.
2. Make sure that file is loaded AFTER Elxis "standard.css" file.

Tips
1. To load a css file in Elxis head use this:
$link = eFactory::getElxis()->secureBase().'/templates/your_template_here/css/template_modifications.css';
eFactory::getDocument()->addStyleLink($link);
2. You can alternatively copy-paste the contents of "template_modifications.css" file into the bottom of "template.css" file of your template.
3. Your template's template.css file normally gets loaded last, so it overwrites all other css files. So use Tip 2 to make sure you have no overwrites.

[xmanhattan]

I was using html to load the template modifications like in Elxis 3.x and then added the modifications into the flex css at the bottom as you said but it didn't work. 

The following code works correctly when placed before the closing head tag.

Code: [Select]

<link rel="stylesheet" href="<?php echo $elxis->secureBase(); ?>/templates/flex/css/template_modifications.css" type="text/css" />

Instead I figured out why after making a change to the css.

I tried to use an html css technique that I found on the net to do the lists and created the separate html file to test it and it works nicely using the ID to change the list style type directly under the content html.
When I tried to do the same under Elxis 4, apart from the separate css modification file, it didn't work.

Using the following did not work:

Code: [Select]

ul, ol { margin:0em 1em 0.5em 2em; padding:0em; text-indent:0; list-style-position:inside; }
ul li, ol li, li { margin:0em 1em 0em 2em; padding:0em; text-indent:0; }

ul li ul li { margin:0em 1em 0em 2em; padding-:0em; }
ul li ul li ul li { margin:0em 1em 0em 2em; padding:0em; }
ul li ul li ul li ul li { margin:0em 1em 0em 2em; padding:0em; }
ul li ul li ul li ul li ul li { margin:0em 1em 0em 2em; padding:0em; }

#disc {
  list-style-type: disc;
}

#circle {
  list-style-type: circle;
}

#square {
  list-style-type: square;
}

#decimal {
  list-style-type: decimal;
}

... more css style types ...

So I changed the css as follows and it works but only by setting the list style type in css directly:

Code: [Select]

ul, ol { margin:0em 1em 0.5em 2em; padding:0em; text-indent:0; list-style-position:inside; }
ul li, ol li, li { margin:0em 1em 0em 2em; padding:0em; text-indent:0; list-style:lower-greek; }

ul li ul li { margin:0em 1em 0em 2em; padding-:0em; list-style:square; }
ul li ul li ul li { margin:0em 1em 0em 2em; padding:0em; list-style:lower-alpha; }
ul li ul li ul li ul li { margin:0em 1em 0em 2em; padding:0em; list-style:upper-roman; }
ul li ul li ul li ul li ul li { margin:0em 1em 0em 2em; padding:0em; list-style:georgian; }

Therefore using ID to make a direct change under the content html does not have an effect, as in:

Code: [Select]

<ul id="disc">
<li>First Level items</li>
<li>First LI</li>
<li>Second LI</li>
<li>Third LI</li>
<li>Fourth LI</li>
<li>Fifth LI
<ul id="decimal">
<li>Second Level items</li>
<li>First LI</li>
<li>Second LI</li>
<li>Third LI</li>
<li>Fourth LI</li>
<li>Fifth LI
<ul id="upper-roman">
<li>Third Level Item</li>
<li>First LI</li>
<li>Second LI</li>
<li>Third LI</li>
<li>Fourth LI</li>
<li>Fifth LI
<ul id="lower-latin">
<li>Fourth Level Item</li>
<li>First LI</li>
<li>Second LI</li>
<li>Third LI</li>
<li>Fourth LI</li>
<li>Fifth LI
<ul id="lower-greek">
<li>Fifth Level Item</li>
<li>First LI</li>
<li>Second LI</li>
<li>Third LI</li>
<li>Fourth LI</li>
<li>Fifth LI</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

I hope that this helps others.