Loading...
 
Themes

Themes

Forum List Topic List

Forums » Themes » Tikipedia theme is finally available again
 
Thread actions
PDF Print this page
  • Print all pages

    • Tikipedia theme is finally available again

    Posted by Gary Cunningham-Lee Japan

    Long, long ago there was a Tikipedia theme for Tiki, around version 7. Finally (due to the relative ease of doing themes with Bootstrap and the developer time supported by Synergiq Solutions), Tikipedia is back again, for Tiki 15.

    More information is at https://zukathemes.com/Tikipedia and https://themes.tiki.org/Tikipedia , where you can play with a demo a bit and get the download files.

    Installation is pretty straightforward. The trickiest part is probably to be sure to give the topbar menu a "tikipedia_menu" class in the admin-modules' "Containing class" input, to position the menu correctly. More details are in the theme info.

    Give it a try if you like, and let me know about any problems with the theme or documentation. Thanks.

    -- Gary

    Reads: 3803
    Link
    Posted by WizarDave United States

    That's pretty cool Gary.
    Would that infobox code work with most themes?

    • Or do you have code in this specific theme that makes it work?


    WizarDave

    Link
    Posted by Gary Cunningham-Lee Japan

    Thanks.

    The infobox code will work to make a box in any theme, but there's an .infobox class in Tikipedia's CSS file that styles the box and its contents to match the MediaWiki infobox:

    Copy to clipboard
    .infobox {
  border: 1px solid #aaa;
  border-spacing: 3px;
  background-color: #f9f9f9;
  color: black;
  margin: 0.5em 0 0.5em 1em;
  padding: 0.2em;
  font-size: 88%;
  line-height: 1.5em;
}
.infobox img {
  margin-top: 6px;
}
.infobox h3,
.infobox h4 {
  font-weight: bold;
  background-color: #c0c0c0;
  padding: 4px;
  text-align: center;
  font-family: sans-serif;
  margin: 0;
}
.infobox h3 {
  font-size: 120%;
}
.infobox h4 {
  font-size: 105%;
}


    The details should be adjusted as needed to match the appearance of the theme. The box should be inside a div with Bootstrap grid and positioning classes, etc. to be less than full width.

    -- Gary

    Link

    Posted by John Morris United States
    Wow! Nice work Gary!!!! This is incredible.
    Link

    Posted by John Morris United States

    Gary, I copied the infobox syntax from the tikipedia theme into a wiki page with Utopia Theme, and the box appeared nicely, my question is, I did not provide the Custom CSS as provided above in my Admin/Themes/Custom CSS field.
    Why did the syntax work on the wiki page without the Custom CSS?
    Thanks Gary.

    Link

    Posted by Gary Cunningham-Lee Japan

    The infobox uses a combination of standard Tiki CSS classes and the Tikipedia-specific classes, so the box will look "good enough" in any theme. This box builds on the panel class (its main div is class="panel infobox"), so the properties that each theme uses for panels are applied here too. The custom CSS (which is from the Tikipedia style sheet) adds more styling details for the box and the headings and so on inside the box specifically to replicate MediaWiki's infobox (as seen at Wikipedia.org), but it isn't strictly necessary.

    -- Gary

    Link

    Posted by John Morris United States

    Thanks Gary, that makes sense now.
    I did however place the CSS custom into Utopia verbatim as shown above, and it had no effect on my infobox. I would like to get a border around my infobox. Please see attached for what my infobox looks like in Utopia, any help is greatly appreciated.

    Capture.PNG (191.67 Kb)
    Link


    Posted by John Morris United States
    Dave, would you be so kind to add your Custom CSS for the infobox here in this topic?
    Link

    Posted by WizarDave United States

    .infobox {
    border: 3px solid #aaa;
    border-spacing: 3px;
    background-color: #f9f9f9;
    color: black;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    font-size: 88%;
    line-height: 1.5em;
    }
    .infobox img {
    margin-top: 6px;
    }
    .infobox h3,
    .infobox h4 {
    font-weight: bold;
    background-color: #c0c0c0;
    padding: 4px;
    text-align: center;
    font-family: sans-serif;
    margin: 0;
    }
    .infobox h3 {
    font-size: 120%;
    }
    .infobox h4 {
    font-size: 105%;
    }

    Link
    Posted by John Morris United States
    Hmm, can't get the border to pop in my installation using Utopia theme. Must be a conflict with my other custom CSS I am thinking.
    Link