CSS help

167 views
Skip to first unread message

Rika Sukenik

unread,
Mar 31, 2021, 7:11:54 PM3/31/21
to TiddlyWiki
I'm using the Public Sidebar plugin (http://publicsidebar.tiddlyspot.com/) which is fantastic, but I can't get the margins right. 

Can someone please so kindly take a look at my website and help with the margins? I'd also like to fix the issue with text expanding past the screen. Much appreciated!!

Here's the code I currently have:
<$set name="loc" value=<<location 'hostname'>>>
<$list filter="[<loc>]+[prefix[www.rikasukenik.com]]">
<style>
.tc-sidebar-scrollable{visibility:visible;}
.tc-page-controls {display:none;}
.tc-sidebar-lists{visibility:hidden; display:inline; height: 100px;}
.tc-search{visibility:visible;}
.tc-search-results{visibility:visible;}
.public {visibility:visible;}

</style>
</$list>
</$set> 

Joshua Fontany

unread,
Mar 31, 2021, 9:20:47 PM3/31/21
to TiddlyWiki
Hi Rika,

First, I would move the style tag into its own CSS tiddler (you are currently actually generating a <style> tag for EVERY result of your $list filter).

Copy just the internal CSS (not the <style> tags) into a tiddler (any title is fine), and tag it with $:/tags/Stylesheet. When TW refreshes (instantly upon tiddler save), it places all CSS with that tag in the page header.

(There are ways to make the CSS dynamic with wiki-text, but that should be explored later.)

Then, once, you have the List and the CSS in separate tiddlers, you can edit each seperately, and use the browser's Dev Tools to target your CSS updates.

Best,
Joshua F

Mat

unread,
Apr 1, 2021, 1:04:11 AM4/1/21
to TiddlyWiki
Hi rika. That's an old creation I had forgotten about, happy to see someone use it.
I don't have time today but will take a look in these coming days.

But you should probably not(!) listen to Joshua in this particular case! ;-) @Joshua- I don't remember details at this moment but the reason for putting the styleblock in the listwidget is to use it conditionally. Note that the listwidget only outputs one thing so it is just binary. ...Or maybe your description here is some other clever solution for triggering the styles based on url, that I don't understand?

<:-)

Rika Sukenik

unread,
Apr 1, 2021, 8:08:25 PM4/1/21
to tiddl...@googlegroups.com
Joshua and Mat, thanks for your feedback! I'm not a developer, just a tinkerer. Public sidebar was the first plugin I found that allowed me to hide page controls and other settings that just confused people who read my tiddlywiki. It's strange for someone to think (even though not actually do!) that they can make edits to my website. Mat, thanks for putting the plugin out there! 

I have noticed that it's hard to target specific elements. I'll think some more about Joshua's feedback. 

Joshua - if you have time to respond to Mat, that would be super helpful. Like I said, I'm not a developer, so getting some more guidance on how best to style the Public menu bar will be immensely helpful and save me a lot of time!

Best,
Rika Sukenik 


--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/-8VyVkwsmHI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/32825b75-e635-4a17-9db6-cc130e9df1c8n%40googlegroups.com.

Mohammad Rahmani

unread,
Apr 2, 2021, 3:43:34 AM4/2/21
to tiddl...@googlegroups.com
Rika,
 Have you tried the Utility plugin? It has author/reader mode. You can open the model windows when you can set reader mode and many controls will hide then!

ctrl+alt+a brings you the modal window to activate reader/autor mode.
ctrl+s save wiki

Best wishes
Mohammad


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 tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CALSoQA3qMd5f%3Dp41yUDg0bdZ9dEx%3DAWkwAZYUp9cRXpFumE%2BJg%40mail.gmail.com.

Rika Sukenik

unread,
Apr 5, 2021, 5:58:20 PM4/5/21
to TiddlyWiki
Thanks, Mohammad. I didn't know about the Utility plugin. I like Reader mode a lot! I'll have to explore the other features too. Thanks for the tip!

Mat

unread,
Apr 6, 2021, 3:47:45 AM4/6/21
to TiddlyWiki
@rika

So, I'm looking into this now. What exactly is it you need help with - because you did change some things from your initial post here. On your site, I note that the left edge of the search field is cut off... but then you did set .tc-search to margin-left:-42px so that is to be expected. If you just want a less wide search field, you could instead try with: 

input[type="search"].tc-popup-handle {width: 100px;}

<:-)

On Thursday, April 1, 2021 at 1:11:54 AM UTC+2 rika.s...@gmail.com wrote:

Mohammad Rahmani

unread,
Apr 6, 2021, 4:44:11 AM4/6/21
to tiddl...@googlegroups.com
On Tue, Apr 6, 2021 at 2:28 AM Rika Sukenik <rika.s...@gmail.com> wrote:
Thanks, Mohammad. I didn't know about the Utility plugin. I like Reader mode a lot! I'll have to explore the other features too. Thanks for the tip!

Hi Rika,
 Glad you like it. Utility plugin has a lot of features! You can customize the reader mode as you like!
 So you need to play with it and later on you should be able to hack as you like!

Best wishes
Mohammad


Reply all
Reply to author
Forward
0 new messages