How to Reduce font size of tiddler title and the (default white) frame around the tiddlers?

[Surya]

Hello,

yes, I know, this question about reducing the font size of tiddler titles has been here several times.
But: I tested them all with no success at all.

I tested:

• Adding a new tiddler tagged with $:/tags/stylesheet and tested there- of course one test after another ;-) And I modified the number from very high to very big:
  
• .tc-title { font-size: 0.8em; }
• .title { font-size:85%; }
• .title { font-size: 16px }
• >>>All three didn't make any effect at all.
  

• 
  

Find the tiddler

$:/themes/tiddlywiki/vanilla/base (I think this holds the base styling for all themes)

And edit the following styling to be what you want

.tc-titlebar h2 { font-size: 1em; display: inline; }

>>>That didn't change the font size of the title but the layout of the sidebar- everything moved to the left...

• The only tip that made a little bit positiv effect was

I modified h2 to h6 in 

$:/core/ui/ViewTemplate/title

Now the space between the title and the text of the tiddler is too large.

>>>The same unwanted effect in my case.


So, how could I make the title smaller (not only the font of the title, but the whole line).




AND:
How can I reduce the (default white) frame around tiddlers?

Surya

[BurningTreeC]

Hi Surya,

for the tiddler-frame try this:

.tc-tiddler-frame {

    border: 2px solid #ff0000 !important;

}

this should give you a red border that's 2px wide

for the title I'd try:

.tc-tiddler-frame .tc-title h2 {

    font-size: 10px !important;

}

edit: try it with !important at the end so that it overrides the default styles, sometimes it does not

[BurningTreeC]

I changed it and this works

.tc-tiddler-frame h2.tc-title {

    font-size: 10px !important;

}

[BurningTreeC]

for no border:

.tc-tiddler-frame {

   border: 0px solid #ffffff !important;

}

you can put both in a new tiddler and tag it with $:/tags/Stylesheet

no need to edit the vanilla/base Stylesheet

Simon

[Surya]

Hi,

I wrote one tiddler for the title size and one for reducing the frame of the whole tiddler. And tagged both with $:/tags/Stylesheet.

For the title:
no, I'm really sorry, but both didn't make the title size smaller. Not at all...

And I also tried

.tc-tiddler-frame .tc-title h6 {

    font-size: 5px !important;

}

and

.tc-tiddler-frame h6.tc-title {

    font-size: 5px !important;

}


to see eventually more effect. But nothing....

For the frame:
I just added a thin red frame to the tiddlers, but didn't reduce the white frame.

[Surya]

Hi Simon,

for no border:

.tc-tiddler-frame {

   border: 0px solid #ffffff !important;

}

>>>Sorry, it didn't reduce the frame :-(

you can put both in a new tiddler and tag it with $:/tags/Stylesheet

>>>Do you mean, there is no need for two tiddlers, but putting both commands (for title AND for the frame) in ONE tiddler?

[BurningTreeC]

hm, let's see...

you could inspect the title with right-click on it --> inspect (untersuchen)

then something pops up and there should be a tab called elements

there you can see css styles that are currently applied

if you look a little bit around, you may find something that works. you can also edit the styles in that window to see what it changes. they don't get saved

[BurningTreeC]

ok, so you maybe want the space between the content and the border gone?

like:

.tc-tiddler-frame {

    padding: 5px 10px 10px 10px !important;

yes, that's how I do it :) 

[Surya]

Hi Simon,

ok, so you maybe want the space between the content and the border gone?

like:

.tc-tiddler-frame {

    padding: 5px 10px 10px 10px !important;

- zitierten Text einblenden -

yes, that's how I do it :)

>>>Yeahhh :-) That effects in the way I wanted :-)))
THANKS!!


I'll try now your advice with the right-click for the title size.

[Surya]

Okay,

now the frame-command doesn't work anymore...
Even not in the same wiki-copy without the changes I made.
???

Okay, for both (title & frame):

I looked around in this elements-thing and I think, I can find out, what to modify.

I think, I have to write then that what I found in a tiddler in order to get it saved in the wiki, right?
But:
What exactly do I have to copy? The right red marked in my picture? The left marked in my picture? Both?
And: How to copy the commands? I tried with inner HTML and with outer HTML, but with both I get an almost endless tiddler.....

[BurningTreeC]

Hi Surya,

your're doing it right, just don't give up  :)

on the screenshot you've marked the tiddler. there's a "+" on the left, click that. it opens the tiddler structure. more things appear and more "+" ... go search for the tiddler title and you'll see something like <span class="tc-title">TiddlerView TitleSize<span> 

always look for the class="..." that's what you can address with a Stylesheet Tiddler by writing .classname { something: value; }

you also have the smaller window on the right side that shows the styles that are currently applied to what is marked on the left side.

by inspecting these both things you can figure out what is currently applied and what you want to override with your own stylesheet.

in the right window you should be able to click on styles and to change them, to see what it changes in your wiki. this doesn't get saved, it's only applied currently. if you reload your wiki this is gone.

but if you put it in a stylesheet tiddler it will be saved.

by the structure that is shown on the left side you can also figure out how to address your elements directly without addressing other elements.

example: 

<div class="tc-tiddler-frame">

    <div class="tc-titlebar">

       <span class="tc-title">

        hello

      </span>

    </div>

</div>

then this addresses the tc-title class in this example (how you address it depends how this structure looks like): 

.tc-tiddler-frame .tc-title {

    something: value;

}

in this example, .tc-titlebar .tc-title { something: value; } would work, too.

[PMario]

On Monday, January 15, 2018 at 8:43:31 PM UTC+1, BurningTreeC wrote:

.tc-tiddler-frame {

    border: 2px solid #ff0000 !important;

}

Don't use !important ... It's toxic.

just my opinion
-m

[PMario]

Hi Surya,

It shuld be relatively simple. ... Except you already use different themes and stylesheets, that overwrite the default settings.

Do you use a 3rd party theme?

If you go to "Advanced Search": Filter tab and insert: [tag[$:/tags/Stylesheet]]

What does it show?

-m

[Surya]

Hi

@PMario:

Birthe was right, I'm quite worried about the size of my wikis. Because I read very often that the size becomes quite fast a problem. Somewhere I read, the boundary is at about 4MB for mobile devices. If that is wrong, please tell me. I need my wikis for my desktop AND for my Android devices (which are not the newest ones and not Highend).
Because of that I always think about what I really need and what not and delete (or not install) everything, I don't really need.

1. I think, themes will have a lot of things which I don't need.
2. I think, I'll won't find a perfect theme for me- having exactly that what I need.
3. Because of that, I'd like to write it for my own- only the things I want to have.
4. When BurningTree does it and it works in his wikis- so why not??
   

@Simon:
When I read your answer after my work, I thought "Hey, I almost never give up in my life! What is he talking about?? I am so near to my styling goal!"
Now, after several hours searching, trying and so on....

I'm quite near to give up for my side (for the styling wishes).

I tried at first with the frame.
Tried several times to find in the elements and to write it in the tiddler.
For a short time it worked (something combined, what you wrote here and something I found in the elements).
Then I modified it a little bit. The success was gone- forever ;-) I couldn't reproduce it.
Again I tried to find out, where the things are in the left panel and what to modify in the right panel.
Success on both sides :-)
But I couldn't find out, where it is exactly in the left panel. E.g. I found out that, when I click on <div class="tc-tiddler-title"></div> on the left and modify it on the right, it gives me the wanted result.
But writing that in a tiddler- no success. Searching for all the subitems of <div class="tc-tiddler-title"></div> (all the +)- I found nothing and always I didn't know WHERE I AM NOW??? There are so many subitems- I always got completely confused.
I am sorry.

Then I thought, okay, I just tell (you) here, the "top"-"adress" of the left panel like <div class="tc-tiddler-title"></div> and write, what I modified on the right.
And hope, maybe you're lovely and write the full command for my Stylesheet-Tiddler.
The red lines are from the left panel, the green ones are the related modifier of the right panel.

It is almost perfect now :-))) But: Now I cannot see anymore the rating stars from the rating plugin & the icons (inserted when the tiddler is tagged with a special tag) are a bit unvisible.
And I couldn't find out, how to resolve that- I resetted the modifiers from which I thought, they are responsible for that to the original value- no success.
Sorry (for me with my wishes and for you for your help), I give up.....

Surya

<div class="tc-sidebar-scrollable" style="overflow: auto;">
.tc-sidebar-scrollable {
    position: fixed;
    top: -35px;
    left: 965px;
    bottom: 0px;
    right: 0px;
    overflow: auto;
    margin: 0px 0px 0px -42px;
    padding: 41px 0px 28px 42px;
}

<h1 class="tc-site-title">
.tc-site-title, .tc-titlebar {
    font-size: 2.35em;
    line-height: 1.2em;
    color: #911115;
    margin: 0px 0px -10px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    font-weight: 300;
}

<div class="tc-tiddler-frame tc-tiddler-view-frame tc-tiddler-exists tc-tagged-%24%3A%2Ftags%2FStylesheet"></div> But this modifier should be for every tiddler in the whole wiki.
.tc-tiddler-frame {
    padding: 5px 5px 1px;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 1px;
        padding-left: 5px;
    width: 950px;
    border-radius: 2px;
}

<div class="tc-tiddler-title"></div>
body.tc-body {
    font-size: 10px;
    line-height: 11px;
    word-wrap: break-word;
    color: #333;
    fill: #333;
}

<div class="tc-tags-wrapper"></div>
.tc-tags-wrapper {
    margin: 4px 0px;
        margin-top: 4px;
        margin-right: 0px;
        margin-bottom: 14px;
        margin-left: 0px;
}

<span class="tc-tag-label tc-btn-invisible" style="background-color:; fill:#333333; color:#333333;" draggable="true"></span>
button.tc-tag-label, span.tc-tag-label {
    display: inline-block;
    padding: 0.16em 0.7em;
    font-size: 1.03em;
    font-weight: 400;
    line-height: 1.2em;
    color: #FFF;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #D5AD34;
    border-radius: 1em;
}

[Birthe C]

Hi Surya,

.tc-titlebar is the bar with tiddler title and tiddler controls. Above you first set that to a big size and later you ask for .tc-tiddler-title to be smaller. You have to decide what you want to make it sork.

Birthe

[Surya]

Hi,

well.... In german we say "wenn ich mich an einem Problem festgebissen habe"- I don't know how to say in englisch- maybe something like biten into a problem??

I don't give up.

Again I looked into it.
And found, that the

<h1 class="tc-site-title">
.tc-site-title, .tc-titlebar {
    font-size: 2.35em;
    line-height: 1.2em;
    color: #911115;
    margin: 0px 0px -10px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    font-weight: 300;
}

made the problem with the rating-stars & the icons.
This is the correct one:

<h1 class="tc-site-title">
.tc-site-title, .tc-titlebar {
    font-size: 2.35em;
    line-height: 1.2em;
    color: #911115;

    margin: 0px 0px -4px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: -4px;
        margin-left: 0px;
    font-weight: 300;
}

Maybe you / someone could tell me, how to write that all into a tiddler (or several tiddlers?)?


@Birthe:

 .tc-titlebar is the bar with tiddler title and tiddler controls. Above you first set that to a big size and later you ask for .tc-tiddler-title to be smaller. You have to decide what you want to make it sork.

 >>>Even if would know what to do with your information (where to edit what) I still don't know, how to write all that into a tiddler, so that it is saved.
:-(
Surya

[Birthe C]

Hi Surya,

Try this..it worked in my tiddlywiki.

.tc-tiddler-frame {
    padding-top:10px;
    border:2px solid red;
}


.tc-tiddler-title {
    font-size:10px;
}

Birthe

[Surya]

Hi Birthe,

It works :-) And saved :-)
I don't know why, but I had to write the frame two times ( and modified tow my wishes)

.tc-tiddler-frame {
    padding-top:5px;
    border:2px solid lightgreen;

}


.tc-tiddler-frame {
    padding: 5px 5px 1px;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 1px;
        padding-left: 5px;

    border:2px solid lightgreen;
}


.tc-tiddler-title {
    font-size:10px;
}


This is how it works now :-)))

THANKS !!

......

And who knows about the rest??


(@Birthe:
At the moment I modify my ToDo-Lists with background-colours, so that it is better visible when popping up, where is what :-)
I am a bit proud of it ;-)

[Birthe C]

Hi Surya,

This helped me, maybe you will like it too https://groups.google.com/d/msg/tiddlywiki/6wRRqZeOZ6Q/PzRbtnmeFQAJ

Birthe

[Surya]

Hello :-))))

Do you know, how proud I am now???

I made everything I wanted :-)))) YES


With the help of Birthes answer:

and with just a happy coincidence (or fortuity?) I found it out.

I always copy & paste what commands are posted here and I copy & paste, what I wrote before or what is written anywhere else. To find out the difference or to find out a pattern or just find out anything.

Because of that I had the .tc-tiddler-frame two times, like this:

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

.tc-tiddler-frame {
    padding: 5px 5px 1px;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 1px;

        padding-left: 10px;
    border:2px solid darkgreen;
}

And then it worked.
Before I had only

.tc-tiddler-frame {
    padding: 5px 5px 1px;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 1px;

        padding-left: 10px;
    border:2px solid darkgreen;
}

and it didn't work.


And I saw, that there was written nothing from the left panel (in the elements). Nothing like <div class="tc-tiddler-title"></div>.
I thought, okay, maybe it is more simple, than I thought before. Just try always to write the command from the right panel, but two times.

I tried that with my other wishes I have written before. But it didn't work.
I looked again at the tiddler-frame command, what worked.
And I guessed a pattern- ... and that guess was the right one :-)

The pattern is:
In the 1. I have to write only this thing I changed (blue marked), nothing else.
In the 2. I have to write the whole chapter, but also nothing else.

So, if I want to change the frame on the top and the bottom (but not on the left & right) and add a green frame to it:


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

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

This is in one tiddler tagged with $:/tags/StyleSheet.

And I wrote all my other wishes for page & tiddler styling in this one tiddler.


Maybe this description will help some other newbies :-)

So, thanks a lot to Birthe and all other helpers!
I'll come back with questions immediately ;-)
But I don't have so much questions anymore :-)
Surya

[TonyM]

Surya,

Congrats, You are now "on a roll", a "tiddlywiki roll"

Welcome to the club

Tony

[Surya]

WHAT???
A bread roll?
For the next breakfast?

ha ha ha ha

no, please wait, I have to be baken a bit longer