Thank you @Télumire for writing this up. I am sure it will help a lot of
people.
On Saturday, August 28, 2021 at 12:37:37 AM UTC+2 Télumire wrote:
> Hi all,
>
> Here's an easy way to get the css path to an element :
>
> Open the inspect element tool : ctrl+shift+c (firefox/chrome) , then
> select the element you want to inspect
> You can also do a right-click>inspect
>
> The element will be highlighted in the dev tool pannel that shows up. Make
> sure this is the correct element (sometimes it can be nested inside the
> element inspected), then right click on the highlighted element > copy >
> copy selector or copy css path. This will give a selector css for the
> element.
>
> This doesnt always give you the selector you need, for example if you do
> that with chrome on the text area of a tiddler, in edit mode , you will get
> :
>
> body > textarea
>
> This is because the textarea is in an iframe, which is treated like a
> separate document by the browser. In this case, just select the iframe that
> contains the element and you' ll get this :
>
> body > div.tc-page-container-wrapper > div > div > div > section >
> div.tc-tiddler-frame.tc-tiddler-edit-frame.tc-tiddler-exists> span > span >
> div:nth-child(5) > div > iframe
>
> This rule is very specific and can be generalized with a bit of clean up :
>
> .tc-tiddler-edit-frame iframe
>
> Now if you look closely at the html, you'll see that the iframe actuall
> has several class(tc-edit-texteditor and tc-edit-texteditor-body), but
> for some reason chrome doesnt copy those. So if we correct this, we get :
>
> .tc-tiddler-edit-frame .tc-edit-texteditor.tc-edit-texteditor-body {..
> your rules css here ..}
>
> See https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector and
> https://developer.chrome.com/docs/devtools/css/ for more info on the dev
> tools, and https://developer.mozilla.org/en-US/docs/Web/CSS to learn more
> about CSS
> Le vendredi 27 août 2021 à 15:49:21 UTC+2, Stobot a écrit :
>
>> Sorry to highjack the thread a bit - hoping we solved your problem Sandip!
>>
>> @Birthe / strikke... - can I ask how you learned to navigate the class
>> hierarchy? I'm trying very hard how to learn this and am really struggling.
>> I recently started using the Inspect / F12 stuff, but It's not pointing me
>> to the right place. Is there a guide for this stuff somewhere? For example
>> when I "inspect" the edit area while in edit view I get this (below
>> screenshot) - how would I get that to your `tc-tiddler-frame
>> textarea.tc-edit-texteditor` answer?
>>
>> [image: Capture.PNG]
>>
>>
>> On Friday, August 27, 2021 at 9:35:10 AM UTC-4 [email protected]
>> wrote:
>>
>>> I do not know about the two column view. But for editing I am using
>>> following at the moment.
>>>
>>> Create a tiddler, give it a title and tag $:/tags/Stylesheet and the
>>> following content:
>>>
>>> tc-tiddler-frame textarea.tc-edit-texteditor {font-size: 125%;
>>> background: #485052; color: #48E16A;}
>>>
>>> This will certainly not be what you want, but you can insert your own
>>> color and size.
>>>
>>> On Friday, August 27, 2021 at 12:50:18 PM UTC+2 Sandip Deshmukh wrote:
>>>
>>>> I feel that as I switch from a single column view to a two column view,
>>>> the display font size reduces. I do not want that to happen. Any way to
>>>> achieve that?
>>>>
>>>> Secondly, the font that is used when I am editing a tiddler is
>>>> definitely smaller than the one used for displaying the tiddler. How do I
>>>> increase the font size when I am editing a tiddler?
>>>>
>>>> Lastly, is there a way to specify the font to use when displaying and
>>>> editing, say Devanagari text?
>>>>
>>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/40a24351-bf98-454f-ad67-275df761ea22n%40googlegroups.com.
