• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 13 posts ] 
Author Message
 Post subject: Using extra page attributes to call different table styles
PostPosted: Mon Dec 03, 2018 6:13 pm 
Offline
Forum Members
Forum Members

Joined: Mon Dec 03, 2018 3:54 pm
Posts: 12
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:
    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:
{$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:
<table class="{page_attr key='extra1'}">


What am I doing wrong? Forgotten (perhaps) a curly bracket '} ?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using extra page attributes to call different table styl
PostPosted: Tue Dec 04, 2018 12:54 am 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Feb 25, 2009 4:25 am
Posts: 782
Location: Victoria, BC
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using extra page attributes to call different table styl
PostPosted: Tue Dec 04, 2018 10:21 am 
Offline
Forum Members
Forum Members

Joined: Mon Dec 03, 2018 3:54 pm
Posts: 12
Quote:
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:
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. !!


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using extra page attributes to call different table styl
PostPosted: Tue Dec 04, 2018 1:20 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Feb 06, 2009 2:08 pm
Posts: 154
cawstein wrote:
Code:
{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:
{if $p_attr == "outdated"}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using extra page attributes to call different table styl
PostPosted: Tue Dec 04, 2018 3:30 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Feb 25, 2009 4:25 am
Posts: 782
Location: Victoria, BC
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using extra page attributes to call different table styl
PostPosted: Tue Dec 04, 2018 6:06 pm 
Offline
Forum Members
Forum Members

Joined: Mon Dec 03, 2018 3:54 pm
Posts: 12
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:
<!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>
 


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using extra page attributes to call different table styl
PostPosted: Wed Dec 05, 2018 5:10 pm 
Offline
Forum Members
Forum Members

Joined: Mon Dec 03, 2018 3:54 pm
Posts: 12
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.)


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using extra page attributes to call different table styl
PostPosted: Wed Dec 05, 2018 6:25 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Feb 25, 2009 4:25 am
Posts: 782
Location: Victoria, BC
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using extra page attributes to call different table styl
PostPosted: Wed Dec 05, 2018 9:59 pm 
Offline
Forum Members
Forum Members

Joined: Mon Dec 03, 2018 3:54 pm
Posts: 12
Dig13 wrote:
Quote:
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using extra page attributes to call different table styl
PostPosted: Thu Dec 06, 2018 1:13 am 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Feb 25, 2009 4:25 am
Posts: 782
Location: Victoria, BC
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using extra page attributes to call different table styl
PostPosted: Thu Dec 06, 2018 7:35 pm 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 3100
Location: The Netherlands
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:
            <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:
.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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using extra page attributes to call different table styl
PostPosted: Fri Dec 07, 2018 4:00 pm 
Offline
Forum Members
Forum Members

Joined: Mon Dec 03, 2018 3:54 pm
Posts: 12
Quote:
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Using extra page attributes to call different table styl
PostPosted: Fri Dec 07, 2018 4:08 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Feb 25, 2009 4:25 am
Posts: 782
Location: Victoria, BC
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 13 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting