Category: Theme: Look & feel, Styles, CSS, Theme Control Center

{syntax type="tiki" editor="plain"}
The mechanism to alter a tiki sites logo uses a cumbersome server relative path mechanism. Not intuitive especially seeing as there is a file upload facility.

I did upgrade since_last_visit_new module a while ago to use bootstrap
icons instead of png's. This worked well for a while (well, icons where
a bit small fur human fingers when in smartphones, but better than
before, for UI consistency).

However, once a Tiki site is very active, the UI showed that requries
some more love, which is beyond my skills. See screenshot attached.
Icons become overlapping each other, the border of the active tab is not
properly surrounding that icon, etc.

Any help from anyone with better skills with bootstrap UI (& css, less,
...) than me?

{img fileId="1020" thumb="y" rel="box[g]"}

More info from bootstrap:
!# Unused CSS
...
While we don’t have a prebuilt example for using PurgeCSS with Bootstrap, there are some helpful articles and walkthroughs that the community has written. Here are some options:

https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/

Lastly, this CSS Tricks article on unused CSS shows how to use PurgeCSS and other similar tools.
...
!# Non-blocking files

While minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough.

If you are using a Lighthouse plugin in Google Chrome, you may have stumbled over FCP. The First Contentful Paint metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.

You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don’t need to be present on the first paint of your page should be marked with ''__async or defer__'' attributes.

This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles.

If you want to learn more about this, there are already a lot of great articles about it:

https://web.dev/render-blocking-resources/
https://web.dev/defer-non-critical-css/

A lack of documentation on the correct usage of code in the Custom Site Header section may result in a broken site (blank white page)

For example, if one wanted to display a menu based on a users group but did not use the proper code (because he can't find documentation showing the proper code) there is a good chance the site could break.

It has happened to me a couple times but fortunately was able to go back or to another tab and remove the site breaking code and save again.

In trunk now (to be Tiki 19), with the update from Bootstrap 3 to 4, navbars have more styling flexibility. Regarding foreground (text) colors, instead of having CSS classes -+navbar-default+- and -+navbar-inverse+-, there are now -+navbar-light+- and -+navbar-dark+-, and also -+navbar-primary+-. And for background colors, there are -+bg-dark+- and +-bg-light+-.

So it would be good to implement admin L&F preferences/selectors to specify the background and foreground colors that the site uses for its main navigation navbar, and add switches in the code to put the CSS classes in the navbar HTML.

Themes should support all three color variations by specifying appropriate colors, etc.

http://nextthemes.tiki.org/Themes {sign user="marclaporte" datetime="2013-03-15T16:08:44+00:00"}
{flash type="url" movie="display167" width="1156" height="716"}

Insert Wiki Link popup has scroll bars in IE7 messing up view

((doc:Site identity)) is great because it permits quite a bit of customization without modifying any files. Everything is cleanly kept in the database for easy upgrades.

However, it's not immediately easy to know which zone is for what. Top & bottom bar could have an edit button, so we can edit zones in context.

As an example, ((doc:Interactive translation)) is great because we are in context.

After applying 33721, the top module area of my jqui theme is 150 high, which looks ridiculously big. See wiki.alphasoftware.com.

(Using 7.x branch)

Thanks, Marc.

I had all the minify's set on tiki-admin.php

I first unchecked:
Minify CSS into a single file (found in performance)
and got:
Invalid CSS property declaration at: . temp/public/minified_b0ce6c498b992dbbce71a8e58b27e5e9.css:4
Invalid CSS selector: input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner temp/public/minified_9853f6dd93c8f0e01d7638e38b456649.css:19
Invalid CSS property value: #blue temp/public/minified_814bb502a7fbafe471223475b3b5128f.css:1
Invalid CSS property name: -webkit-overflow-scrolling temp/public/minified_6df987c4671ceba4d5b952189c509395.css:1
Invalid CSS property declaration at: . design.css:2528

Clearing caches didn't help. I then unchecked
Minify CSS (found in performance)
and got:
Invalid CSS property declaration at: . lib/codemirror_tiki/codemirror_tiki.css:32
Invalid CSS selector: input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner vendor/jquery/jquery-ui-themes/themes/flick/jquery-ui.css:222
Invalid CSS property name: -webkit-overflow-scrolling vendor/jquery/plugins/colorbox/example1/colorbox.css:9
Invalid CSS property declaration at: . design.css:2528
Invalid CSS property value: #blue temp/public/codemirror_modes.css:94
Invalid CSS property declaration at: ; temp/public/codemirror_modes.css:219



On Sat, Sep 7, 2013 at 11:09 PM, Marc Laporte wrote:
> I suggest to un-minify and to see where it comes from.
>
> Then, it is likely worth reporting to http://dev.tiki.org/Make+a+wish
>
> It will likely be low priority, but easy to fix. And we need easy ones
> that we can give to new devs or students.
>
> Best regards,
>
> M ;-)
>
>
>
> On Sat, Sep 7, 2013 at 11:02 PM, Pete Jalajas wrote:
>> While tracking down that other weird problem, I noticed these in my
>> Chrome Dev Tools window:
>>
>> Invalid CSS property declaration at: .
>> minified_28c0e59edef0064ad5ab707ffc53162e.css:338
>> Invalid CSS property declaration at: .
>> minified_28c0e59edef0064ad5ab707ffc53162e.css:622
>> Invalid CSS property value: #blue
>> minified_28c0e59edef0064ad5ab707ffc53162e.css:623
>> Invalid CSS selector:
>> input.ui-button::-moz-focus-inner,button.ui-button::-moz-focus-inner
>> minified_28c0e59edef0064ad5ab707ffc53162e.css:645
>> Invalid CSS property name: -webkit-overflow-scrolling
>> minified_28c0e59edef0064ad5ab707ffc53162e.css:749
>>
>> I'm using tikinewt theme with shadows.
>>
>> Do I care?
>>
>> Thanks,
>> Pete
>>

Searching result views are little bit irregular outlines when we using Coelesce theme. It works well until Tiki 11.x as I know.

I've tested it Tiki 12.x with IE8 and Chrome browser.

{img type="fileId" fileId="636" imalign="left" align="left"}

This should be migrated to the community site, and handled with ((doc:Organic groups)) and ((doc:User Trackers))

I use Tiki Wiki for many of my sites and some of them have multiple domains associated with them. So domain.ca, domain.com and domain.co.uk all point to the same folder on the same server using domain redirection.

The main domain works and looks fine but if I go to any of the other domains everything is there but it is out of place. The modules were in the wrong place on the screen and it looked like the theme CSS was messed up. I tried playing with perspectives, multi-domain, areas, domain redirects (within Tiki), category, themes, and anything else that looked promising.

"htmlwrap() is a function which wraps HTML by breaking long words and preventing them from damaging your layout. This function will NOT insert <br /> tags every "width" characters as in the PHP wordwrap() function. HTML wraps automatically, so this function only ensures wrapping at $width characters is possible. Use in places where a page will accept user input in order to create HTML output like in forums or blog comments.

This function will not insert line breaks within HTML tags or HTML entities such as  . It treats all HTML entities as single characters, when taking them into account for string length. It will also attempt to find logical line-break insertion points (like after periods or slashes) before inserting breaks at $width characters."

http://www.greywyvern.com/code/php/htmlwrap

((doc:Edit CSS))
((doc:Edit Templates))

Depending on the width of a user's browser window, it is possible for a button to wrap to the next line when the user hovers on the button. This makes clicking the button challenging.

We did not see this behaviour with v4.3, only since upgrading to v6.7

{syntax type="tiki" editor="plain"}
Edit CSS feature produces CR/LF line terminators. This increases file size.

Edit CSS feature leads to file deletion in some cases, without warning:
- resulting file is larger than approx. 5300 bytes

CSS files with special characters in comments which are not UTF-8 encoded are not displayed. Edit leads to empty template.

Testfile was a copy of arcturus.css on a Debian/Squeeze.

File deletion can not be reproduced at demo.t.o 9x and 10x.

Currently in tiki when a link to a non-existent page is made, the page name is not styled or in any way distinguishable in the HTML and a link is only around a following hard-coded question mark. What I would like to see is to change it so that the page name is in fact the link text and the appearance can be styled via CSS. This would allow a particular theme to use the question mark indicator or a Mediawiki-style "red link" or some other styling for these "edit new page" links.

This tracker is made to help filtering and sorting the features vs categories vs options we need to tag a bug/regression/wish with.

{syntax type="tiki" editor="plain"}
Hello.

I just upgraded a Tikiwiki3 to 6.0
I did the database upgrade procedure and converted to utf 8.
The upgraded showed this error:

---
[root@WIKEttl03 it]# php installer/shell.php
Running installer for: db/local.php
Queries executed successfully: 5245
Errors:
===== Error 0 =====
-- perms types that don't appear to relate to features - 'mail notifications', 'menus', 'quicktags', 'tiki'


This command is not supported in the prepared statement protocol yet
---
Tiki Cache was cleared, Browser Caches, too. And Browser restartet.

If I click Look and Feel under tiki-admin.php it's showing the ajax "loadind..." and nothing happens. Entering the URL directly with tiki-admin.php?page=look the look and feel page loads, but with errors in the browser (java script).
Turning off ajax, results in loading look+feel from tiki-admin.php. (but still showing browser errors.) The behavior is the same for IE8, Chrome and Seakmonkey.

The PHP Errors shown on the page:

{CODE(caption="Error messages",wrap="0",ishtml="0",ln="0",wiki="0",rtl="0",cpy="0")}PHP (5.1.6) NOTICE (E_NOTICE):
File: templates_c/en^%%C4^C4D^C4DDBC33%%tiki-admin_include_look.tpl.php
Line: 27
Type: Undefined index: user_prefs
PHP (5.1.6) NOTICE (E_NOTICE):
File: lib/prefslib.php
Line: 73
Type: Undefined index: sitetitle
PHP (5.1.6) NOTICE (E_NOTICE):
File: lib/prefslib.php
Line: 73
Type: Undefined index: sitesubtitle
PHP (5.1.6) NOTICE (E_NOTICE):
File: templates_c/en^%%5B^5BD^5BDF701F%%tiki-site_header.tpl.php
Line: 10
Type: Undefined index: filegals_manager
PHP (5.1.6) NOTICE (E_NOTICE):
File: templates_c/en^%%5B^5BD^5BDF701F%%tiki-site_header.tpl.php
Line: 10
Type: Undefined index: print_page
PHP (5.1.6) NOTICE (E_NOTICE):
File: templates_c/en^%%5B^5BD^5BDF701F%%tiki-site_header.tpl.php
Line: 21
Type: Undefined index: filegals_manager
PHP (5.1.6) NOTICE (E_NOTICE):
File: templates_c/en^%%5B^5BD^5BDF701F%%tiki-site_header.tpl.php
Line: 21
Type: Undefined index: print_page
PHP (5.1.6) NOTICE (E_NOTICE):
File: templates_c/en^%%DD^DD2^DD29EF94%%tiki.tpl.php
Line: 84
Type: Undefined index: fullscreen{CODE}

Kind Regards.

js and css borked in doc.t.o while testing how to avoid issue in elfinder which prevented to upload any picture: please help

Login to https://doc.tiki.org and try to click at any wiki page icon section at the topright corner of the page: nothing is shown.

If you click in control panels to avoid using tabs, nothing happens.
etc.

(17:34:00) snarlydwarf: god, i love tiki.
(17:34:37) snarlydwarf: "why are you haveing people go to a tracker, lookie, heres a wiki page that looks prettier but still fills out the tracker form"
(17:37:18) snarlydwarf: oooh, someone with commit wanna fix an annoying jscal feature?
(17:37:41) snarlydwarf: at line 745 of lib/jscalender/calendar.js
(17:37:57) snarlydwarf: in the 'this.isPopup' clause
(17:38:36) snarlydwarf: add div.style.zIndex = "300";
(17:38:51) snarlydwarf: so the dumb calender doesnt pop up behind tabs
(17:39:09) snarlydwarf: 300 seems sufficient to be 'higher' than other items on the page
(17:39:44) snarlydwarf: you can see this if you have a jscal input in a tracker and use tabs
(17:40:05) snarlydwarf: (at least in 1.10)
(17:40:41) nyloth: snarlydwarf: thanx. Don't hesitate to commit this, or to send it to the devel mailing list

http://themes.tikiwiki.org/tiki-index.php?page=Sample+Page

"Judy" theme is fouled up.
Can't access the change theme menu.

I was incrementing through the themes. When I reached "Judy", the right column menues for themes and variations were inaccessible. There was an overlay of the user name and log out selection.

This should be migrated to the community site, and handled with ((doc:Organic groups)) and ((doc:User Trackers))

It seems that what was achieved with profile
https://profiles.tiki.org/Hide+Fixed+Top+Nav+Bar+on+Scroll

up to Tiki18 (included) is no more working in Tiki 19.x, maybe due to changes related to the Bootstrap4 migration?

I.e.: Top module zone in dev.t.o and other *.t.o sites is no more hidable on scroll, nor topbar module zone gets sticky anymore.

I presume this is easy to fix (<30' ?) by some css & bootstrap 4 master in the tikiverse? (not me for sure)

Thanks

P.S: fyi, Work in progress to get the profile updated:
https://profiles.tiki.org/Hide+Fixed+Top+Nav+Bar+on+Scroll+19