Removing tiddler frame

100 views
Skip to first unread message

elar...@gmail.com

unread,
Feb 5, 2018, 1:54:09 PM2/5/18
to TiddlyWiki
In order to teach myself more about CSS, I've been working on an image-focused, personal project in TiddlyWiki5 to catalog my collection of card decks.

I've managed to use a combination of CSS and the Palette settings to customize the wiki theme, but I cannot completely remove the tiddler frame.  I've managed to remove most of the frame, but a very thin line still shows up between tiddlers and on the right-hand side.  In order to isolate which element is responsible for generating the frame, I used the "inspect" viewer.

Here's the weird thing: When I'm viewing the "inspect" panels, the frames utterly disappear and the wiki appears as I want it to appear.  As soon as I close "inspect", the frames are back.  None of the following CSS settings have worked:

/* To remove tiddler frame */

.tc-page-container {
  border: rgba(255, 255, 255, 0);
}

.tc-page-view-classic {
  border: rgba(255, 255, 255, 0);
}

.tc-tiddler-frame {
  border: none;  [Also tried making it transparent, no go]
  padding: 10px;
  margin: 0px;
}

.tc-story-river {
   border: rgba(255, 255, 255, 0);
}

div.tc-sidebar-scrollable {
   border: rgba(255, 255, 255, 0);
}

.tc-dropzone  {
   border: rgba(255, 255, 255, 0);
}

.story-backdrop {
  border: rgba(255, 255, 255, 0);
}

I originally thought, "hey, it's so small and barely visible, why make it into a big issue?" But now that I can't seem to figure out how to change it, it's become a major problem for me to solve.  I searched the TW Google Group forum and found a couple instances of frame manipulation, but they didn't fix it.  

coda coder

unread,
Feb 5, 2018, 1:57:39 PM2/5/18
to TiddlyWiki
Is the "Seamless" theme not what you're looking for?

elar...@gmail.com

unread,
Feb 5, 2018, 2:02:26 PM2/5/18
to TiddlyWiki
Sorry, I should have clarified - I want to figure out how to do it manually, as a learning exercise.  I could download a theme, but I want to know how and why it works.

coda coder

unread,
Feb 5, 2018, 2:18:57 PM2/5/18
to TiddlyWiki
Okay, so, a quick click around in the inspector reveals...

Turn off borders and box-shadows (and the prefixed versions) in all tc-tiddler-frame rules.

Is that what you want?

elar...@gmail.com

unread,
Feb 5, 2018, 2:31:42 PM2/5/18
to TiddlyWiki
I forgot about the box-shadows...smh.  Yes, I'm new at using CSS and the inspector and just realized after this that I can tick items off in the inspector.  Thank you so much - "box-shadows: none;" worked like a charm!  

coda coder

unread,
Feb 5, 2018, 2:45:01 PM2/5/18
to TiddlyWiki
That's fine. Glad we nailed it. :)
Reply all
Reply to author
Forward
0 new messages