playing with tabs scomp

[jeff]

To play around and teach myself how to develop sites using Zotonic I
created a new site, added a routing rule which calls the template below.
The problem I'm having is that this template displays everything in the
tabs div as a set of lines. Michael Conners on 15 Nov 2010 said that adding

.ui-tabs-hide {
display: none;
}

fixed this problem. How do add this?

The template causing problems:

{% extends "base.tpl" %}

{% block title %} testing tabs {% endblock %}

{% block content %}
{% tabs id="tabs" %}
<div id="tabs">
<ul>
<li><a href="#tabs-1">About</a></li>
<li><a href="#tabs-2">Questions</a></li>
<li><a href="#tabs-3">Answers</a></li>
<li><a href="#tabs-4">Matches</a></li>
</ul>
<div id="tabs-1">
<p>
<h1> Place Holder </h1>
</p>
</div>
<div id="tabs-2">
<p>The meaning of Life the Universe and Everything</p>
</div>
<div id="tabs-3">
<p>42</p>
</div>
<div id="tabs-4">
<p>Dolphins</p>
</div>
</div>
{% endblock %}

Jeff.

[jeff]

On 22/11/10 4:18 PM, jeff wrote:
> To play around and teach myself how to develop sites using Zotonic I
> created a new site, added a routing rule which calls the template
> below. The problem I'm having is that this template displays
> everything in the tabs div as a set of lines. Michael Conners on 15
> Nov 2010 said that adding
>

Go to this stage. Added the html_head_extra with the style tag
encapsulated rather that a file as I'm just experimenting for now. The
tabs aren't displayed nicely in a row, but vertically which seems to
imply that I've messed up the css when I created a second Zotonic site.
Are there any CSS files, etc I should have copied from the default site?
I got the impression that things were inherited.

{% extends "base.tpl" %}

{% block title %} testing tabs {% endblock %}

{% block html_head_extra %}
<style type="text/css">
.ui-tabs-hide {
display: none;
}
</style>

[Michael Connors]

Hi Jeff,

I think that there is no style set by default for the tabs, so  you would have to add something like this to the css:

.tabnav li {

    display: inline;

    list-style: none;

    }

And add a class to the list:

 <ul class="tabnav">

Michael

--
Michael Connors
Alencon,
France

http://www.michaelconnors.net

[jm]

Thanks that worked. I was not looking forward to digging out CSS manuals.

Jeff.

[Marc Worrell]

What we normally do is to add these definitions to the zp-project.css file, which overrules base definitions and is completely site specific. Just make sure that you include the zp-project.css file in your base.tpl template (which is what the zotonic base.tpl in mod_base/templates does).

- Marc