I'd like to give some post special <body class="...&

Mekk · Post by **Mekk** » Sat Dec 06, 2008 6:52 pm

It would be nice if I could somehow (maybe via extended entry properties) set the special CSS class for some entry. I'd like to use this via <body class="..."> (and don't give a body a class if it is not set).

I use my own custom theme, so I can write anything on this side (in fact, I already did <body id="37">). But I am not sure how to assign such a class via GUI and how to access it from theme.

Rationale? Custom CSS layout for specific posts. Like this one:

http://blog.mekk.waw.pl/archives/22-Wha ... or-me.html

(where I omit sidebars - used in the remaining articles on my blog - to get wider content)

Currently I achieve this layout by hardcoding id in CSS, but class would be far more aestethical and manageable.

Post by **garvinhicking** » Sat Dec 06, 2008 10:24 pm

Hi!

Sure you can via index.tpl. What do you want in your <body> class exactly?

You could go to the <body> place in the template and make it like:

Code: Select all

<body  {if $view == 'entry'}class="blablaclass"{/if}>

this will then only get set when displaying a single entry.

Regards,
Garvin

Post by **Don Chambers** » Sat Dec 06, 2008 11:15 pm

Here is a way you could make a stylesheet for each entry if you wanted to take it to that extreme.

First, create an extended property field. Lets assume you call that "EntryCSS" (no parenthesis). This will hold the path to the stylesheet.

Next, in your template's index.tpl file, after your other stylesheet(s) have loaded in the document <head>, add this:

Code: Select all

{foreach from=$entries item="dategroup"}
    {foreach from=$dategroup.entries item="entry"}
        {if $entry.properties.ep_EntryCSS}
            <link rel="stylesheet" type="text/css" href="{$entry.properties.ep_EntryCSS}" />
        {/if}
    {/foreach}
{/foreach}

Now, for any entry, you can have a unique stylesheet loading in addition to the normal stylesheet(s)... you can even upload your stylesheets into a folder in your media library, and use the media selector button next to the extended property field to insert it into your entry if you wanted.

You could also add Garvin's code so this text is only performed on a detailed view:

Code: Select all

{if $view =='entry'}
    {foreach from=$entries item="dategroup"}
        {foreach from=$dategroup.entries item="entry"}
            {if $entry.properties.ep_EntryCSS}
                <link rel="stylesheet" type="text/css" href="{$entry.properties.ep_EntryCSS}" />
            {/if}
        {/foreach}
    {/foreach}
{/if}

Mekk · Post by **Mekk** » Sun Dec 07, 2008 11:16 am

I was a bit unclear. What I want is to: prepare theme and stylesheet once, and then while writing some articles set specific extended property to achieve special behaviour.

Specific use case: whenever I include big picture, I'd add "wide_entry" class used in CSS to give wider content to the article.

Don's suggestions are close to what I want to achieve, I will take a look.
I did not know that I can write sth like

{$entry.properties.ep_EntryCSS}

to access the custom property. Thanks

Post by **Don Chambers** » Sun Dec 07, 2008 3:14 pm

OK - well, try this then.

If your images are inserted directly into your entries using the media manager, it will look something like this:

Code: Select all

<!-- s9ymdb:99 --><img class="serendipity_image_left" width="320" height="280" style="float: left; border: 0px; padding-left: 5px; padding-right: 5px;" src="/uploads/photo.jpg" alt="" />

Simply add your own class to the <img class="....."> after it has been inserted by the media manager. For example, if your class was "big_photo":

Code: Select all

<!-- s9ymdb:99 --><img class="serendipity_image_left big_photo" width="234" height="60" style="float: left; border: 0px; padding-left: 5px; padding-right: 5px;" src="/s9y_news/uploads/IAB-234x60-halfbanner.gif" alt="" />

In this example, the image has 2 classes - serendipty_image_left and big photo. This method does not require any extended property fields at all.... the class .big_photo can always exist in your stylesheet and will be used anytime you specify it.

Mekk · Post by **Mekk** » Sun Dec 07, 2008 7:19 pm

Styling images does not help when I use column layout with fixed or limited content width.

For the sake of completness: I achieved what I wanted. Here is what I did:

1) inside extended entry properties plugin configuration I added custom field named "BodyClass"

2) in my index.tpl I replaced <body> with:

{if $entry_id}
{if $entry.properties.ep_BodyClass}
<body id="entry_{$entry_id}" class="{$entry.properties.ep_BodyClass}">
{else}
<body id="entry_{$entry_id}">
{/if}
{else}
<body>
{/if}

3) In my CSS file I introduced styling for specific entry variants. At the moment I have one such variant, called mk_wide, which I use for entries containing wide graphics or for other reasons worth being shown in a special way, in the future I can add a few more (maybe sth for very short posts, for example)

Styling as such is just

.mk_wide #content {
...
}

and so on. I am also able to add

#entry_74 #content {
}

if necessary, but I don't expect to use it that frequently.

4) now, when I edit the post containing wide graphics, I just set
BodyClass property to mk_wide and don't need to do anything else.

Thanks for your help.

I'd like to give some post special <body class="...&

I'd like to give some post special <body class="...&

Re: I'd like to give some post special <body class="