Loading...
 
Skip to main content

Themes

Forum List Topic List

Forums » Themes » Optimizing Tiki theme Yeti
 
Thread actions
Print this page
  • Print all pages

    • Optimizing Tiki theme Yeti

    Posted by Wiebe

    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:

    Copy to clipboard
    .autotoc {
     z-index:100;
}

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

    Copy to clipboard
    .siteloginbar_popup {
     z-index:3;
}

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

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

    Other changes, improving the alignment of search module button

    Copy to clipboard
    .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.

    Copy to clipboard
    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;
}
    Reads: 3335
    Posted by Gary Cunningham-Lee 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


    Posted by Wiebe

    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!

    Posted by Gary Cunningham-Lee 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

    Posted by Wiebe

    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.