Theming the staticpages plugin

[carl_galloway]

Hi all,

I haven't used the static pages plugin before, I've had no need for it, but a couple of users have suggested I need to support the plugin in my themes.

ooohh boy, lotta hard work, and frankly I don't think I understand the plugin very well, so could I have some help.

First, does anyone have a site I can look at that uses static pages extensively, including child pages, and that is also fully integrated into the site theme. On my standard 0.91 install I notice even the default theme doesn't fully support the plugin.

Second, why are does url shorthand appear twice in the admin suite?

Third, in the plugin_staticpage.tpl, why does the

Code: Select all

<a href="#">{$staticpage_headline|@escape}</a>

have a null link, shouldn't this automatically link to the page even though the user is already on the page. Also, why don't the static pages have extended pages?

Fourth, when you're viewing the static page it has a navigation for all linked static pages, but why does it print the page name of the next page in the sequence instead of a just next, and why does it then print an unordered list of child pages? The effect is to link to the next page twice, which seems like overkill.

I'm sure I'll think of other questions, but in the meantime if anyone knows the answers to these it would help.

Cheers
Carl

[garvinhicking]

Hi Frank!

Sadly I don't know an example for a site where static pages are used by heart. But I'm sure someone will pop up here.

Second, why are does url shorthand appear twice in the admin suite?

Uh, that should not happen! Where does it show up twice, could you make a screenshot?

Third, in the plugin_staticpage.tpl, why does the

Code: Select all

<a href="#">{$staticpage_headline|@escape}</a>

have a null link, shouldn't this automatically link to the page even though the user is already on the page. Also, why don't the static pages have extended pages?

Well, I guess this was just because the headline should be rendered as a link, and as it links to itself, a "#" was considered okay...

Fourth, when you're viewing the static page it has a navigation for all linked static pages, but why does it print the page name of the next page in the sequence instead of a just next, and why does it then print an unordered list of child pages? The effect is to link to the next page twice, which seems like overkill.

This can be configured and/or templated to show a next/previous location instead of page names. And actually that kind of navigation was requested in the past.

HTH,
Garvin

[JWalker]

Hi, Carl, I use static pages ..... but my blog is private (at my work) and I cannot put it in internet. I suppose you are not searching for screenshots ... but if you are, I can upload some at public place.

[carl_galloway]

Hi all,

Garvin, I've posted a screenshot of the plugin backend, so you can see what I mean about the double url shortcut. This was taken using serendipity 0.91 fresh install and staticpages 2.34.

Can anyone tell the reason for the plugin author using an incorrect style for entry date. Serendipity outputs 'serendipity_entry_date' whereas the plugin outputs 'serendipity_Entry_Date', and given that styles are case sensitive the plugin is likely to not work in quite a few themes. Was this intentional to force theme designers to style the plugin differently or is this a mistake.

I'm confused about the overview pages, an image seems to be required, but if one isn't specified the page still leaves a 200pixel wide space for this, and if it is used, it seems only one image can be assigned. Is this right, what did the author of the plugin intend for this?

JWalker, screenshots would be awesome, feel free to pm me the url.

Cheers

Carl

[carl_galloway]

Hi all,

Garvin, I've posted a screenshot of the plugin backend, so you can see what I mean about the double url shortcut. This was taken using serendipity 0.91 fresh install and staticpages 2.34.

Can anyone tell the reason for the plugin author using an incorrect style for entry date. Serendipity outputs 'serendipity_entry_date' whereas the plugin outputs 'serendipity_Entry_Date', and given that styles are case sensitive the plugin is likely to not work in quite a few themes. Was this intentional to force theme designers to style the plugin differently or is this a mistake.

I'm confused about the overview pages, an image seems to be required, but if one isn't specified the page still leaves a 200pixel wide space for this, and if it is used, it seems only one image can be assigned. Is this right, what did the author of the plugin intend for this?

JWalker, screenshots would be awesome, feel free to pm me the url.

Cheers

Carl

[judebert]

On the double URL fields: the first is supposed to be "Headline". It's a typo in the PHP file. It "Shows a headline above the content which is rendered as every other headline in your blog", according to the language file. I've just checked that in.

As to the templating... the templates use serendipity_Entry_Date. The default entries.tpl uses serendipity_Entry_Date, too. So do the templates I've got installed with the 1.0-alpha1 nightly. I don't know when it switched from lowercase to mixed case, but it's mixed in the berlios repository. (I always thought the mixed case was awkward, myself.)

What template are you using with the lowercase class?

[carl_galloway]

judebert,

You are right and I'm wrong about the serendipity_Entry_Date.

Somehow I have become hopelessly confused on this one style.

Cheers
Carl

[JWalker]

Hi,

Here are screenshots with entry shown and static page shown. The difference is that there is no background color for the static page body. First two screenshots are from my test blog.

-----------------

There is "Powered by..." section at the end of the page. This I did it by modifying index.tpl of the theme:

Code: Select all

<div id="footer">
    <p>
    {$CONST.POWERED_BY} <a href="http://www.s9y.org">Serendipity {$serendipityVersion}</a>.<br />
    Design by <a href="http://www.carlgalloway.com">Carl Galloway</a>.
    </p>
</div>

What you think this to be not in div "footer" but in some other specially made div "poweredby" ? Here is what I did in style.css of the theme (I do not understand CSS. Just look what is done and repeat.). Third screenshot in the link above is from my work blog:

Code: Select all

...
...
/* container for footer */
#footer {
     padding: 0;
     margin: 0 auto;
     width: 890px;
     clear: both; }
     
#poweredby 
{
	font-size:x-small;
    text-align:center;
	color: #444;
	font-style:italic;
	margin-top:-30px;
	line-height:12px;
}
/********* End of Structural Styles *********/

[judebert]

Well, I can tell you this much about CSS: the "#poweredby" you're using means "the only element with id="poweredby". The HTML you showed has no such element, so no style can be applied to it.

To style the "powered by" bit, you'd have to say, "the p element following the element with id="footer"", which looks like this:

Code: Select all

#footer p { ...styles... }

As to why the static entry's background isn't set, I can't tell for sure. If you use SlayerOffice's MODI script (free) and hover over the entry, it'll tell you what its ID and class are, as well as its parents and chidren. Then we can look in your CSS (either the style.css file, or the actual sheets with a tool like FireFox's EditCSS) and see how it's being styled.

[carl_galloway]

JWalker, from the screenshots it appears you're using my bubblegum theme which did not work with static pages. I've updated that theme, and it now works withstatic pages in article mode. I'm working on integrating the remainder. You might want to download the latest version.

The theme already includes a powered by statement, what are you trying to do with it? Perhaps I could amend the theme for you.

Carl

[JWalker]

Thank you Carl, the bubblegum theme now works with the static pages. I use static pages for several howto's and now they look more nice.

About poweredby statement. I want to use it instead of the "Powered by" side plugin. This frees a little space in the side bar. A "poweredby" statement shows the version of serendipity, it is at very bottom -- I like this info to be present and to be there. Also, this way "powered by" may be modified par example to be with smaller font, italic and so on.

Regards.

[judebert]

Hmm. To move the "plug" out of the sidebar to the bottom of the page, you'll have to remove it from the sidebar in the admin page and modify the template to show it at the bottom (like Kubrick, I believe).

[JWalker]

No, I did not move the plugin off the sidebar. I did not installed it, but simply edited index.tpl of the theme (I am using Carl's bubblegum) instead:
Part of index.tpl:

Code: Select all

<table id="mainpane">
 <tr>
{if $leftSidebarElements > 0}
        <td id="serendipityLeftSideBar" valign="top">{serendipity_printSidebar side="left"}</td>
{/if}
        <td id="content" valign="top">{$CONTENT}</td>
{if $rightSidebarElements > 0}
        <td id="serendipityRightSideBar" valign="top">{serendipity_printSidebar side="right"}</td>
{/if}
    </tr>
</table>
<div id="poweredby">
    <hr width="990" size="1">
    <p style="margin-top: 0">{$CONST.POWERED_BY} <a href="http://www.s9y.org">Serendipity {$serendipityVersion}</a>.<br />
    Design by <a href="http://www.carlgalloway.com">Carl Galloway</a>.</p>
</div>
{/if}

{$raw_data}

{if $is_embedded != true}
</body>
</html>
{/if}

There is no problem. I simply wished to say that such style is nice thing.

Regards

[carl_galloway]

Jwalker, think I see what you're trying to do. The powered by statement with version numbe ris already in the footer and you simply want to add some additional styling to it. You then want to remove the poweredby plugin from your sidebar.

This is completely ok, and all you need to do is change the styles in the 'footer', you don't need to create a new style 'poweredby'. Also, the hr you've inserted is not needed because the footer style already has a border-top of 1 pixel. This is what you want, so get rid of the hr. Border-top gives you more control anyway because you can adjust the size, spacing, and color from the stylesheet and not have to clutter up you index.tpl

It would be a lot easier for you to edit the stylesheet first, rather than the index.tpl. If you still need finer control over the powered by statement then change your index.tpl to this;

Code: Select all

<div id="footer">
    <p><span class="poweredby">
    {$CONST.POWERED_BY} <a href="http://www.s9y.org">Serendipity {$serendipityVersion}</a></span>.<br />
    Design by <a href="http://www.carlgalloway.com">Carl Galloway</a>.
    </p>
</div>

Now in your stylesheet do this;

Code: Select all

.poweredby {
   color: #444;
   font-style:italic; }

This should make what you want to do work, then you just need add any extra formatting to the powered by that you need.

[JWalker]

Thank you very much Carl, I did what you suggested to me, and it works as I want from it.

Thanks !