Highlight in bold the dates in the Recent tab

[Xabriña]

Hi all.

How can I make it so that in the Recent tab the dates in which the tiddlers are ordered appear highlighted in bold???

Thanks in advance.

[Thomas Elmiger]

Hi Xabriña,

Nice idea! I put this in a tiddler tagged $:/tags/Stylesheet

/* Recent tab */

.tc-sidebar-lists .tc-timeline {
   font-weight: bold;
}

Happy styling!

Thomas

[Xabriña]

Thank you, Thomas. I have created a tiddler calling it My styles. Inside I have put the code that you have told me and in the type of Tiddler I selected text / css and as a label I have put $: / tags / Stylesheet. But it has not worked for me, I think I have to be doing something wrong ...

[Thomas Elmiger]

Do you have spaces in the tag name? That would not work. You can copy from my post above and should see the text without spaces in the tag pill when you are done.

The tiddler type is optional, I usually leave it blank.

[Xabriña]

Yes, it was that. If I wanted to apply an underline to the dates just how could I do it? In this variation I have done, both the bold typeface and the color are put correctly, but the underline applies it to the whole table of contents. Is there any way that it only applies to dates ??? This is the code that I have used:

!!! /* ''Recent tab'' */

.tc-sidebar-lists .tc-timeline {
 text-decoration: underline; font-weight: bold; color: red;
}

Thank you!!!

[TonyM]

Thomas,

You so often seem to know the correct css to alter, do you have a reference work or a lookup process you can share, eg inspect or search in tiddlers?

Thanks

Tony

[Thomas Elmiger]

Tony and Xabriña,

My Workflow is this:

1. Use Firefox dev tools to inspect the HTML and CSS (via right click > Inspect element).

On the Rules panel on the right you can see existing CSS definitions that influence the style of an element. If there are any specific for the element, we will have to overrule them, if not we can create one (as in Xabriñas first case).

2 (optional): Go to the Stylesheet Manager in my project Bricks: https://tid.li/tw5/test/bricks.html#Stylesheet%20Manager

There is a nice search for existing definitions, to check if I have already some optimisations there. The stylesheets there are based on the original TW styles, just split up and reorganised in different tiddlers. From that work I have learnt a lot about TW styling.

@Xabriña – The solution I came up with for your second question about how to target the links only is:

.tc-sidebar-lists .tc-timeline a.tc-tiddlylink {
   text-decoration: underline;
   color: black;
}

In my test configuration .tc-sidebar-lists .tc-timeline a worked, but as there is already a definition for a.class ( .tc-sidebar-lists a.tc-tiddlylink ) I am not sure if this depends from which styles are loaded first. Google "CSS specificity" if you want to know more than me ;–)

Greetings from a CSS amateur,

Thomas

[Xabriña]

Hello again.

I think I explained wrong what I wanted to do.

What I'm trying to do is change the date (color and underline) in which the tiddlers are ordered in the "Recent" tab but not the links to the tiddlers.

It may be something more difficult to do than I thought.

I've been taking a look at the coding of the page but I find it difficult to follow the topic. My knowledge of CSS and HTML are very limited ...

Thank you.

[Thomas Elmiger]

Hi Xabriña

Your explanation was fine, but I did not (want to) understand. Usually underlined text is a link, that's like a law for me. 

So if you absolutely want to do it the other way around, then you can remove the style from the link again like this:

.tc-sidebar-lists .tc-timeline a.tc-tiddlylink {

   text-decoration: none;
}

I would advise against it, but it is doable. 

And: there are courses for HTML and CSS on e.g. edx.org, I would personally recommend the ones by the W3C. 

;–)

Thomas