Loading...
 
Themes

Themes


Optimizing Tiki theme Yeti

I've made some simple optimizations on the Yeti theme, and like to share the ones that could be of help for others. They can directly be copied into Look & Feel, custom CSS section. Maybe these can be made part of the official theme?

Automatic table of contents isn't on top of all other elements:

.autotoc {
     z-index:100;
}

Login menu of login module isn't on top of other elements:

.siteloginbar_popup {
     z-index:3;
}

Aligning the page title and action bar and improving the looks by adding a line:

.pagetitle {
     margin-top: 0px;
}
 .wikiactions_wrapper {
     border-bottom: 1px solid #ddd;
     margin-bottom: 10px;
}

Other changes, improving the alignment of search module button

.input-group-sm>.input-group-btn>.btn {
     height: 27px !important;
     margin-top: 5px !important;
     padding: 0 12px !important;
}

Module Bookmarks doesn't respect the theme's CSS file because of hardcoded font size etc.

This is not the nicest way of fixing this, but for now this works, quick and dirty.

input[name="modb_name"] {
    margin-top: 10px;
}
input[name="modb_name"],  input[name="s_f_attachments-comment"], select[name="assign"] {
    width: 100%;
    font-size: 12px !important;
    margin-bottom: 15px;
    line-height: 1.4;
    height: 36px;
    padding: 8px 12px;
    color: #6f6f6f;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
input[name^="bookmark"] {
    font-size: 12px !important;
    display: inline-block;
    line-height: 1.4;
}
input[name="addtags"] {
    height: 36px;
}
Japan

Hi,

Thanks for your suggestions. A few questions and comments, though:

What version of Tiki are you using? Some of the HTML involved has changed in Tiki 18.

About .autotoc, what page elements was it not being on top of? (Actually most page elements shouldn't conflict with the autotoc because it is in its own grid div.) I haven't seen any reports of problems about this, and the z-index specs haven't changed for a while.

Also, all the themes have the same z-index specs because they are compiled using the standard Bootstrap Less files, so if one theme is different there is either a code problem in the theme or a site-specific problem maybe.

The same is true for the login module dropdown -the behavior should be the same in all themes as again they are compiled from the same source files, and again I haven't seen any reports of problems with this dropdown. Do you have an example to look at? Is your website public, so that we could check it with a DOM inspector?

About the page title and action bar, the HTML changed in Tiki 18 so that the div ''wikiactions_wrapper" no longer has a clearfix class, so this probably affects the px changes in your suggestion. Otherwise, lining things up evenly seems like a good idea so is something we should look at to improve the page-top appearance.

About the search module button changes, just so I can understand the context, where is the module located when making these changes - in the navbar or in a module in a side column, or other place? I'm a little concerned because Yeti generally specifies a taller button size, so is your version going to look inconsistent?

About the Bookmarks module, as far as I know, the code of that module hasn't been touched for quite a long time, so should be updated to remove the hardcoded font size, etc. We'll keep your suggestions in mind when doing that.

-- Gary


Hi Gary,

Thank you so much for you attention and your extensive answer!
I have placed the demo environment here:
http://wiki.derustplek.nl
Please use username Test with password mm96A2t4KwN2C4
You are absolutely right about the Tiki version, the demo is still on 17, when we go live we will upgrade to 18.

  • The auto.toc z-index is necessary for the file attachment form, these input fields are on top of the Auto Toc.
  • The search module input field is on top of the dropdown menu of the login module.
  • Please have a look at my solution of the page title, I really like my solution ;-).
  • The search button is aligned and sized to the search input field, I think this looks much better.
  • It would be great if the bookmarks module code could be renewed!

Japan

Sorry, maybe I missed the window of opportunity to log in to your site - the credentials in your post don't seem to work now. Could you check on that and give new authentication info if necessary?

-- Gary

Hi Gary,

No problem, I have enabled again the test user account.
It's no longer Tiki 17 but 18 and I have changed the custom CSS a bit.


Why Register?

Register at tiki.org and you'll be able to use the account at any *.tiki.org site, thanks to the InterTiki feature. A valid email address is required to receive site notifications and occasional newsletters. You can opt out of these items at any time.