Using extra page attributes to call different table styles

For questions and problems with the CMS core. This board is NOT for any 3rd party modules, addons, PHP scripts or anything NOT distributed with the CMS made simple package itself.
Post Reply
cawstein
Forum Members
Forum Members
Posts: 12
Joined: Mon Dec 03, 2018 3:54 pm

Using extra page attributes to call different table styles

Post by cawstein »

I am more-or-less stuck.
I want tables in two styles; 'table.current' and 'table.outdated' so I can list future lecture on one page and previous lectures on another. I have used extra page attribute 'extra1' on the two content pages: 'current' in one, 'outdated' in the other.

In 'main style' stylesheet I have designed two styles with different fonts, colours, background-colours. These work in isolation. E.g.:-

Code: Select all

    table.current {
    color: #000066;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.5vw;
    width: 100%; }
    table.current, table.current td, table.current th {border:2px solid #000099;
    border-collapse: collapse;
    padding: 8px;}

    table.current tr:nth-child(even){background-color: #ebd6ad;}
    table.current tr:nth-child(odd){background-color: #d6ebe0;}
    table.current tr:hover {background-color: pink;}
And the same for 'table.outdated' but with different colours, etcl

In template 'main template' I have:

Code: Select all

{$p_attr={page_attr key='extra1'}}
{if $p_attr=="outdated"}
<table class="outdated">
{/if}
{if $p_attr=="current"}
<table class="current">
{/if}
<p>(The content of the Extra 1 field is: {page_attr key='extra1'})</p>
That last to check that the Extra 1 field is indeed being read. I also tried the simpler:

Code: Select all

<table class="{page_attr key='extra1'}">
What am I doing wrong? Forgotten (perhaps) a curly bracket '} ?
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Using extra page attributes to call different table styl

Post by DIGI3 »

You haven't really told us what the problem is. Is {page_attr key='extra1'} not returning anything?
Not getting the answer you need? CMSMS support options
cawstein
Forum Members
Forum Members
Posts: 12
Joined: Mon Dec 03, 2018 3:54 pm

Re: Using extra page attributes to call different table styl

Post by cawstein »

You haven't really told us what the problem is. Is {page_attr key='extra1'} not returning anything?
I should perhaps have added that the last line of my template code quotation shows me that the word "current" (or "outdated") is indeed being read.

My problem is that when I look at the Lectures page online the table comes out with no styling whatever (no borders, no padding, default font, no background colour). (When I had only one table style:

Code: Select all

table {border-collapse: collapse; etc.}
the table appears as requested.

I imagine a sequence like: the content page is opened, and the 'extra1' is read. Then the template tries to insert a styled table. It goes to CSS looking for table.{page_attr key='extra1'}. It finds finds two classes of table style: table.current and table.outdated; but it chooses neither of them. !!
User avatar
PinkElephant
Forum Members
Forum Members
Posts: 169
Joined: Fri Feb 06, 2009 2:08 pm

Re: Using extra page attributes to call different table styl

Post by PinkElephant »

cawstein wrote:

Code: Select all

{if $p_attr=="outdated"}
This may be an out-of-date red herring -- I've seen top people post using the format you've used -- but smarty docs suggest whitespace is required, thus:

Code: Select all

{if $p_attr == "outdated"}
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Using extra page attributes to call different table styl

Post by DIGI3 »

If you inspect the frontend code, is the class being added to the table? I'm suspecting this is more of a css issue than a smarty/cmsms isssue.

Perhaps you can share a url so we can look at it if you're unsure.
Not getting the answer you need? CMSMS support options
cawstein
Forum Members
Forum Members
Posts: 12
Joined: Mon Dec 03, 2018 3:54 pm

Re: Using extra page attributes to call different table styl

Post by cawstein »

Thanks both. Whitespace did not solve it.
Compare the two:
http://cawstein.co.uk/index.php?page=lectures
http://cawstein.co.uk/index.php?page=old-lectures

One way of putting my problem is to look at the bit of code below, and then ask: "How would you implement that in CMSMS?"

Code: Select all

<!DOCTYPE html>
<__html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

/*my table styles*/
    table.current {
    color: #000066;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.5vw;
    width: 100%; }
    table.current, table.current td, table.current th {border:2px solid #000099;
    border-collapse: collapse;
    padding: 8px;}

    table.current tr:nth-child(even){background-color: #ebd6ad;}
    table.current tr:nth-child(odd){background-color: #d6ebe0;}
    table.current tr:hover {background-color: pink;}

  

 table.outdated {
    color: brown;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-style: italic;
    font-size: 1.2vw;
    width: 100%; }
    table.outdated, table.outdated td, table.outdated th {
    border: 2px solid red;
    border-collapse: collapse;
    padding: 8px; }

  table.outdated tr:nth-child(even){background-color: #ffcc99;}
  table.outdated tr:nth-child(odd){background-color: #ddff99;}
  table.outdated tr:hover {background-color: #ccffff;}
  

/*end of my table styles*/

</style>
</head>
</__body>
<table class="current">
<tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>



<br>
<table class="outdated">
<tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<__body>
</__html>
 
cawstein
Forum Members
Forum Members
Posts: 12
Joined: Mon Dec 03, 2018 3:54 pm

Re: Using extra page attributes to call different table styl

Post by cawstein »

Compare the two web pages:
http://cawstein.co.uk/index.php?page=lectures
http://cawstein.co.uk/index.php?page=old-lectures
They should be different. Since my first posting here I have created a 'default table style' which is the same as 'table.current'. In Safari/Develop/Show page Resources, line 133 reads "<table class="outdated">". This seems to show that table.outdated is noted, but not obeyed.

(My posting of yesterday was apparently not accepted by the moderators.)
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Using extra page attributes to call different table styl

Post by DIGI3 »

Take a closer look at your generated html. You have an empty table with the class applied, then another table with no class and all of the content.
Not getting the answer you need? CMSMS support options
cawstein
Forum Members
Forum Members
Posts: 12
Joined: Mon Dec 03, 2018 3:54 pm

Re: Using extra page attributes to call different table styl

Post by cawstein »

Dig13 wrote:
Take a closer look at your generated html. You have an empty table with the class applied, then another table with no class and all of the content.
I am not sure that I understand. And if I DO understand, what to do about it. I see, on line 133, table class="outdated". But the table that appears does not follow the style specified in "outdated".
And on line 136 I see, table style="height: 1721px; width: 812px;" etc.
I have no idea where that comes from. There follows a lot of row heights and cell widths; but no background colours, or border width, collapse, padding, which is in the stylesheet. The table that appears follows my new "default" style which is identical to "current" style.

We may be getting very confused because my post of Tuesday Dec 04, 2018 6:06 pm was not put up till late Wednesday. In the meantime, I have added a default table style to the css (Firefox Style Editor file ending ..407b.css, line 72.)

In my post posted: Tue Dec 04, 2018 6:06 pm, I tried to put my problem in a rather different way that I thought might pique the interest of a CMSMS guru. I put up a simple HTML file which, when run on a browser, draws two table each having a distinctive colour scheme. How can that be implemented in CMSMS????
What should I write in the template, and what in the stylesheet? You have been looking at my attempted answer to the puzzle -- using extra1.
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Using extra page attributes to call different table styl

Post by DIGI3 »

At this point I'd suggest two things:

1) Fix your html validation errors (this will help considerably - that's what caused me to think you had an empty table, the inspector is giving incorrect results because of the invalid <p> element as the first item in the table).
2) Once you've done that, post your CMSMS page template.

I think you've done the Smarty part right, but probably something dumb like the invalid html making the results confusing. Use https://validator.w3.org/nu/ to confirm they're fixed before posting again.

I try to check the posts awaiting approval at least once a day but we all have lives. Once you've had a few approved you will be able to post freely, we just require approval on new members to try to limit spam. We get dozens of spam posts a day so sometimes we miss the legit posts until the next check.
Not getting the answer you need? CMSMS support options
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Using extra page attributes to call different table styl

Post by velden »

I presume this table lives in the content block?

Then you added this piece of code to the page template which opens a <table class="outdated/current"> tag just after the <h2> title. (which is never closed btw)

This makes no sense because the actual table is opened later

Code: Select all

            <h2>Lectures</h2>


<table class="current">  <-- your added table open tag


            <p><strong>Banbury Hist [...]</p>
<table style="height: 153px; width: 812px;"> <-- the actual table
<tbody>
<tr>
<td style="width: 95px;">
If the above assumption is right, I'd suggest to not add a table tag but a <div class="outdated/current"> (and properly close it after the content block).

Then change your css accordingly:

Code: Select all

.current table {
    color: #000066;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.5vw;
    width: 100%; }
    .current table, .current table td, .current table th {border:2px solid #000099;
    border-collapse: collapse;
    padding: 8px;}
 
    etc...
This example only works if you don't have other tables in this content block which need other styling.
cawstein
Forum Members
Forum Members
Posts: 12
Joined: Mon Dec 03, 2018 3:54 pm

Re: Using extra page attributes to call different table styl

Post by cawstein »

If the above assumption is right, I'd suggest to not add a table tag but a <div class="outdated/current"> (and properly close it after the content block).

Then change your css accordingly:
You have all been very helpful and patient. Most grateful, but I have now spent 17 days on this and shall give up for the time being; go and learn more about divs and inheritance. Great fun to learn about "https://validator.w3.org/nu/ ", and find that my web-page is riddled with 'errors' (even fatal errors), which do not seem to matter a hoot.
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Using extra page attributes to call different table styl

Post by DIGI3 »

They matter for the following reasons:
-Fixing something like this
-SEO (error-free pages are rewarded in rankings)
-Page load times (each error causes the browser to have to make decisions, slowing rendering time)
Not getting the answer you need? CMSMS support options
Post Reply

Return to “CMSMS Core”