Loading...
 
Themes

Themes


Tikipedia theme is finally available again

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

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

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:

.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


Wow! Nice work Gary!!!! This is incredible.

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.


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


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.



Dave, would you be so kind to add your Custom CSS for the infobox here in this topic?

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%;
}

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.

Upcoming Events

1)  Thu 20 Feb 2020 14:30 GMT-0000
Roundtable Meeting 2020 02

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.