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/06323c7c-9bf9-444d-a449-303909f6ab43n%40googlegroups.com.
