Thread List template

[purp1eone]

So I am trying to move things around a little on the thread list page. In order to do this it requires a little CSS work.



My issue that I am having is when I try to add additional CSS to the "Thread List" template it causes an issue with the pagination.



When I initially load the page it looks exactly how I want it to but then when I click the pagination to go to the next page or click a page number the formatting goes way off.



When trying to add the css to the template as soon as I put the style tags above the {foreach $[thread]} line the pagination stops working.



Style tags work find on the Board template but not the Thread List template.

Any help as to why I can't add css to the Thread List template would be appreciated.

Thanks.

Test site: link

[Kami]

You shouldn’t really be adding style tags directly to your template, ever. Some helpers may suggest doing so, or you may be asked to for a plugin, but there’s no reason you can’t add it to your stylesheet or into your headers and footers if you’re looking for a lazy fix for multiple themes.

While you may not have noticed an issue until now, what you are doing is incorrect. CSS should really only exist in a stylesheet or at best in inline styles / headers and footers, because otherwise your coding is not only incredibly sloppy, but you are putting style tags in the middle of HTML tags. This can frequently cause problems, as you’ve experienced now.

In particular, the thread listing template exists within the board listing template, ie, the thread listing is the “middle” of the contents of the board listing (the thread listing variable on the board listing template loads the content of the thread listing template). Effectively, you’ve just stuck style tags in the middle of HTML which broke it. Putting style tags at the “top” of a template doesn’t inherently mean that you are safe because all the templates are nested into other templates rather than individual HTML pages.

You need to either a) use inline CSS to make your changes, or b) use your theme’s stylesheet to make these changes. I recommend the latter because it’s better practice development wise and the stylesheet gets cached by browsers so your CSS won’t have to load fresh every time.

[purp1eone]

Thanks for the response Kami.

Question for you then.

How in the style sheet do I align the following two lines or is there a way to do it inline?

1) <td class="created-by clickable"><center>$[thread.created_by]</center></td>

2) {if $[thread.pagination]}<div class="ui-micro-pagination">Pages: $[thread.pagination]</div>{/if}

I was able to achieve the following look by putting both of them into divs and aligning the tow divs using css.


This is the look I am trying to get to work, basically removing the Started By column and moving who started the thread under the thread title

[Kami]

Could you show me the actual CSS / HTML you have, or at least link to your forum?

[purp1eone]

Aug 14, 2018 11:00:35 GMT -8 Kami said:

Could you show me the actual CSS / HTML you have, or at least link to your forum?

Here is the link:  link

Again I appreciate your help.

[Kami]

Could you clarify a little bit more what you mean by "align the following two lines"? Just to make sure I'm on the same page.

[purp1eone]

Aug 14, 2018 12:35:57 GMT -8 Kami said:

Could you clarify a little bit more what you mean by "align the following two lines"? Just to make sure I'm on the same page.

So if you look at the image in the third post I basically took the Created by "link" and moved it underneath the thread title and I took the pagination numbers and put them on the same line as where I moved the Created by "link".

So it would look like this(not the colors):

"Thread Title thread title thread title "
created by "LINKofperson"  1 2 3(the pagination numbers)


Currently I have everything how I want at that link I gave you but the pagination is on the third line, I would like it on the second line.

Hopefully that cleared it up.  Let me know if it didn't.

[Kami]

You need to remove the "div" tags around the pagination. Right now it should show something like this:

{if $[thread.pagination]}<div class="ui-micro-pagination">Pages: $[thread.pagination]</div>{/if}

Change those "div"s into "span", but leave everything else as-is, and let me know how that works.

[purp1eone]

Wow that was simple enough.

Thanks for your help that worked great.

So since you mentioned the style sheet and css I was playing around with moving some of my css code and it seems pretty straight forward. But I have a couple of quick questions to make sure I got it.

So as long as I have a unique class name for a div or whatever I am working with I can just move the associated css into the style sheet and it should work?

Anything special I need to do with custom pages or will it work the same way.

This would have saved me a lot of work if I would have done this from the start.

[Kami]

That's correct. As long as there's a unique class name or ID in your HTML it can all be targeted via stylesheet regardless of where on your forum it's placed (this includes plugins, HTML in your headers/footers, custom pages, and templates).

For elements you don't personally name but do have classes, you can right click on that element > inspect element and then use the class or ID that is shown for that element to target it (:

[purp1eone]

Cool, thanks Kami I really appreciate all your help!!

[Kami]

Youre welcome!