Loading...
 
Skip to main content

Themes

Forum List Topic List

Forums » Themes » 271themesdonotbehavelike243
 
Thread actions
Print this page
  • Print all pages

    • 271themesdonotbehavelike243

    Posted by Stefan Beaubien Canada

    My production version is currently on version 24.3 using the Feb12 theme. We wanted to migrate to a more recent LTS version, so we installed a test machine with version 27.1 using the Feb12 theme.
    First thing we noticed is both theme are completely different color wise. Why is that so?
    Second thing, our table do not have internal border lines or columns any more. Is there something different in 27.1 to handle table? because even when we change themes, table lines and columns are still invisible.

    Reads: 438
    Posted by Gary Cunningham-Lee Japan

    Hi Stefan,

    All of the themes in the Tiki package have had some color adjustments made in recent versions in order to comply with accessibility standards regarding color contrast, for better readability and so on, but the Feb12 theme is still using the same colors basically. I compared a Tiki 24.3 using the Feb12 theme to this page - https://themes.tiki.org/Feb12 - where the Tiki version is 27, and the color differences I see are mostly in small details. Could you please be more specific about what parts of the page have colors that are different from before, or post a screenshot of a test machine page so I can understand where you see the differences in color?

    About the tables, checking the 24.3 site here, I see that there aren't vertical borders in tables, but the rows have alternating colors, which is the Bootstrap "table-striped" styling of tables that Tiki uses as a default. Does your production site have more borders than this? As I recall, Tiki did have a CSS rule to add borders to all tables in the center column but this rule was later removed because of the "retro" appearance it created compared to current table styling on the web in general. I'm not sure what Tiki versions this involved. But I can suggest some custom CSS to add to your Look and Feel admin customization page if you want to add borders on all tables.

    -- Gary

    Posted by Stefan Beaubien Canada

    Thanks for the quick answer Gary,

    Here are a screenshot of the 24.3 and 27.1 theme on our site, I now understand the logic behind the color changes for the readability. You can see the top of the page changed from aqua to grey, the main module changed from grey to aqua and the left module is now the same color has the main module
    We had just selected the Feb12 theme because we liked the color contrast and the fact that it was an old and support theme. We used to have a custom theme based on fivealive-lite, but the time consuming task of redoing it when we updated releases was not worth it.

    Has for the lines in tables, I'll answer in another post so that I can put another screenshot.

    Feb12 compare.png (92.02 Kb)
    Posted by Stefan Beaubien Canada

    Thanks for the quick answer Gary,

    Here are a screenshot of the 24.3 and 27.1 theme on our site, I now understand the logic behind the color changes for the readability. You can see the top of the page changed from aqua to grey, the main module changed from grey to aqua and the left module is now the same color has the main module
    We had just selected the Feb12 theme because we liked the color contrast and the fact that it was an old and support theme. We used to have a custom theme based on fivealive-lite, but the time consuming task of redoing it when we updated releases was not worth it.

    Has for the lines in tables, I'll answer in another post so that I can put another screenshot.

    Feb12 compare.png (92.02 Kb)
    Posted by Stefan Beaubien Canada

    Sorry for the double post on the previous answer.
    Now for the table, I included a screenshot to compare both. I don't see the alternating colors on any of them. I understand the "retro" appearance statement, but I think it removes some functionnality or should I say "user flexibility".

    I would of thought that when I put a 0px border, then no borders would appears and if I put a 1 or above value, the a border would have been visible like in the past.
    Because in the cell properties dialog box, I do not have any border width option.

    I'm trying to keep my custom CSS changes to a bare minimum as to be more efficient when changing tiki version and I can't have my user (content editor) go through the html source to fiddle with aspects, they are not knowledgeable of this neither do they want to.

    Feb12 tables.png (27.85 Kb)

    Posted by Gary Cunningham-Lee Japan

    I installed a fresh Tiki 27.1 and switched to the Feb12 theme, and I think I actually said out loud, "Oh, he's right!" 😊. There is a problem with this theme in this Tiki version related to color modes. The :root color mode CSS variable selector is missing in the rule that specifies the left-column and center-column backgrounds, etc.

    One solution would be to activate color modes at your site. This is done by assigning the "switch color mode" module so that it appears on all pages. This switch is usually found at the top of the site, for example, at the end of the top navigation opposite the site logo. In Tiki's case, the "nobox" parameter of the module should be set to "y" because we just want the color mode toggle icon to display, not the module box.

    However, this would provide a solution only for people who have set their browser color preference to "light" or "dark" and for people who switch the Tiki site color mode toggle to "light" or "dark", because the "auto" option is the one missing in the theme's 27.1 code.

    To be sure everyone gets the correct colors, I'm sorry but this CSS should be added to the Look and Feel admin CSS customization:

    Copy to clipboard
    :root {
    --tiki-feb12-middle-bg: #ffffff url(../images/page.jpg) repeat-x;
    --tiki-feb12-col1-col3-bg: #ffffff url(../images/page.jpg) repeat-x;
    --tiki-feb12-col2-bg: #a8cce2 url(../images/columnbg.jpg) repeat-x;
}


    I'm not sure yet about the table issue so will reply separately about that.

    -- Gary

    Posted by Stefan Beaubien Canada

    Thanks Gary, the CSS Code you provided did the job for the colors. I don't want to mess around with the color mode for our users.

    I don't know if that will help you or not in your investigation, I'm really not a web developer so do what you want with the following information.

    When I inspect the web page with the Edge Browser, I see that contrary to the 24.3 version, the 27.1 version reads the styles from _reboot.scss instead of feb12.css. Maybe it's a bootstrap thing, but just to let you know. And this behavior applies to all themes.

    Attached is a screenshot of what I mean.

    Thanks a million again for the help
    Stefan

    css_style.png (87.41 Kb)

    Posted by Gary Cunningham-Lee Japan

    The difference shown by the inspector is more a difference in how the inspector reports the information rather than a difference in the CSS itself. As the screenshot shows, _reboot.scss is indicated in the newer case, but this is a SCSS file whose content, after the compiling process that is done to produce the theme stylesheets, becomes part of feb12.css. The inspector is just giving more specific information about the initial source of those CSS rules.

    I'm not sure if the difference is due to a change in how the browser inspector works, or in how the Tiki SCSS compiling process works but, in any case, _reboot.scss establishes some basic defaults and then the theme styles are added below in the stylesheet and will override the reboot properties where desired.

    -- Gary