How to edit the styling (tiddler-frame in view-mode) of only certain tiddlers?

[Surya]

Hi,

I edited now the styling of the tiddlers in view mode and the styling of the page with a tiddler tagged $:/tags/StyleSheet.
For the tiddler-frame I did it with:

.tc-tiddler-frame { padding-top: 5px; padding-right: 5px; padding-bottom: 1px; padding-left: 10px; border:2px solid darkgreen; }

.tc-tiddler-frame {
    padding: 5px 5px 1px 10px;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 1px;
        padding-left: 10px;
    border:2px solid darkgreen;
}

But I couldn't find out how to edit the style for only certain tiddlers.
I tried, what is written in https://groups.google.com/d/msg/tiddlywiki/6wRRqZeOZ6Q/PzRbtnmeFQAJ
But it didn't make any effect.

I want to edit only the style of the tiddler-frame, but like I said, only for certain tiddlers.
These tiddlers are lists, which are now (with my actual frame-styling) shown on the very very left side of the tiddler. That doesn't look nice and is not so comfortable in using.
I'd like to have a bit space on the left side of the list.
So how to edit the left side of the tiddler-frame for these certain tiddlers?

Who can help?
Surya

[Mark S.]

I think Riz's method still works, but the page view template has changed, so how you stitch your changes in will make a difference.

Here's what I did.

Change $:/core/ui/ViewTemplate to look like this:

\define frame-classes()
tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$
\end
\define folded-state()
$:/state/folded/$(currentTiddler)$
\end
<$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$set name="customstylevar" value={{!!customstylefield}}><$tiddler tiddler=<<currentTiddler>>><div data-style=<<customstylevar>> class=<<frame-classes>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
</div>
</$tiddler></$set></$set></$set>
$:/core/ui/ViewTemplate

Make a new stylesheet tiddler ($:/tags/Stylesheet) with contents:

[data-style="customframe"]  {

{ padding-top: 5px; padding-right: 5px; padding-bottom: 1px; padding-left: 10px; border:2px solid darkgreen; }

        }

[data-style="customframe"]   {

    padding: 5px 5px 1px 10px;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 1px;
        padding-left: 10px;
    border:2px solid darkgreen;
}

In the tiddlers you want treated this way, make a field "customstylefield" and populate it with "customframe" (but without the quotes).

It appears to work. OH, since you're messing with the page view template, be sure to make a backup before trying any of this. Note that this kind of change may interfere with future upgrades.

HTH

-- Mark

[Surya]

Hi Mark,

that works, thanks :-)

But...:

Above every tiddler is now the link to  $:/core/ui/ViewTemplate.
?Maybe I have just to delete the last (I formatted it bold) in

\define frame-classes()
tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$
\end
\define folded-state()
$:/state/folded/$(currentTiddler)$
\end
<$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$set name="customstylevar" value={{!!customstylefield}}><$tiddler tiddler=<<currentTiddler>>><div data-style=<<customstylevar>> class=<<frame-classes>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
</div>
</$tiddler></$set></$set></$set>
$:/core/ui/ViewTemplate

The other But... is:
On my tablet it doesn't show the change. It is synchronised, everything is the same. I think, it is because of the different screen size?
Maybe it is better to edit not the frame, but the look of the tiddler-body (the left side of the body)?

[Surya]

And I tried it with padding-left: 10px up to padding-left: 150px
-no change...


[Birthe C]

Hi Surya,

When you use your tablet you pass sidebar breakpoint and the view is changed (Tiddler-frame smaller). I think you are right you will have to change .tc-tiddler-body

you want some padding-left:10px; (or something)

BUT you only  want it for some tiddlers not all. I think you must use tags to make the difference (you have used that before, I know)

Birthe

[Mark S.]

Oh yeah, delete that -- cut/paste error.

On Wednesday, January 17, 2018 at 2:36:52 PM UTC-8, Surya wrote:

Hi Mark,

$:/core/ui/ViewTemplate

[Mark S.]

On Wednesday, January 17, 2018 at 2:36:52 PM UTC-8, Surya wrote:

Hi Mark,

The other But... is:
On my tablet it doesn't show the change. It is synchronised, everything is the same. I think, it is because of the different screen size?
Maybe it is better to edit not the frame, but the look of the tiddler-body (the left side of the body)?

Are you sure the synchronize is working? Trying it on a tablet, and the green border is definitely there. The padding effects might be too subtle to observe easily. 

Looking at the code I posted too fast, I see that the first set :

[data-style="customframe"]  {

{ padding-top: 5px; padding-right: 5px; padding-bottom: 1px; padding-left: 10px; border:2px solid darkgreen; }

        }

Should probably be:

[data-style="customframe"]  {

 padding-top: 5px; padding-right: 5px; padding-bottom: 1px; padding-left: 10px; border:2px solid darkgreen;

        }

Not sure why you're defining padding 2 different ways.

Have fun,

-- Mark

[Surya]

Hi,

@Mark:

Oh yeah, delete that -- cut/paste error.

On Wednesday, January 17, 2018 at 2:36:52 PM UTC-8, Surya wrote:Hi Mark,

$:/core/ui/ViewTemplate

>>>I deleted, and it doesn't show anymore :-)


I edited it like you wrote

Looking at the code I posted too fast, I see that the first set :

[data-style="customframe"]  {

{ padding-top: 5px; padding-right: 5px; padding-bottom: 1px; padding-left: 10px; border:2px solid darkgreen; }

        }

Should probably be:

[data-style="customframe"]  {

 padding-top: 5px; padding-right: 5px; padding-bottom: 1px; padding-left: 10px; border:2px solid darkgreen;

        }

>>>The style for that certain tiddlers is gone (is back to the default style I build).
Edited it again back to the first version -still the default style I build.
I still can't build it up again like it was before.

That's really strange.

The synchronisation is great working! The whole style is the same on my tablet, all new tiddlers are there. Everything is the same- except the (left-frame)-styling for that certain tiddler.
But, that is now also past, because like I wrote, that certain styling is now not anymore working on the desktop too.



@Birthe:

When you use your tablet you pass sidebar breakpoint and the view is changed (Tiddler-frame smaller).

 >>>Ahhh, I guessed that. Fine, that I guessed it right :-)

I think you are right you will have to change .tc-tiddler-body

>>>I had a look into that (with the right click >elements). But I didn't find anything, how to edit that, that there is a white space is build.

I think you must use tags to make the difference (you have used that before, I know)

How to write then the command?

Offtopic: Thanks for the links in your mail :-)
Something there gave me an idea, I already build up successfully :-)
And I got some great hints there for a question I will ask here later :-)

Good night soon... Surya

[Surya]

Hi Mark,

now the styling for the certain tiddler is working again :-)

Strange behaviour....

I will now sleep and look later in my tablet and with which command I did it now...

Funny...

[Birthe C]

Hi Surya,

.tc-tagged-yourtag .tc-tiddler-body {padding-left:10px;}

yourtag is of course the name of the tag, you want to use.

Also Pmario made a video https://www.youtube.com/watch?v=Jva7Azqu0hs

Birthe