DiscussionPlugin Formatting

[Liam]

I love this plugin, I think it is a great addition to TW. However I
also really like my theme and I've noticed that the DiscussionPlugin
applies its own theme, including line spacing, text colour and
background colour. And for the life of me I can't find where to
change this so I can have my Theme back. Ideally I would like to have
the new tabs changed from gray to transparent (or the same colour as
my theme backgroud), remove the border, and change the text format
back.

Is this possible?

[PMario]

Hi Liam,
It's cool, that you are so enthusiastic about tweaking your TW.

But including some links, to stuff you mention, would make responding
to your questions much easier. Having a Minimal Test Case (MTC) you
link to, would even make it possible (for us) to see, what's going
on.

With missing links, we have to guess, ...

That said: Don't stop asking, but make it easy to respond ;)
-m

[Liam]

Sorry. What's the normal procedure? Do you normally make up a MTC
and upload to TSpot. I'll do this tomorrow and add the link. I've
got lot's of questions but I try and google the answers first. I
don't want to be a pain. Thanks for taking the time to help.

[PMario]

>What's the normal procedure?

We have to guess if it's tiddlytools DiscussionPlugin [1]. I'm pretty
sure it is, but there are many plugins out there. So who knows for
sure :)

Since Eric provides the best/most documentation [2] for his plugins,
your question may be a specific one.
IMO CSS questions, most of the time are very specific, so a testcase
helps a lot.

have fun!
-mario

[1] http://www.tiddlytools.com/#DiscussionPlugin
[2] http://www.tiddlytools.com/#DiscussionPluginInfo

[HansBKK]

On Saturday, February 18, 2012 2:53:39 PM UTC+7, Liam wrote:

And for the life of me I can't find where to change this so I can have my Theme back.

Obviously you need to understand some CSS, but Firebug is a great tool to reverse-engineer where the styling is coming from so you can override it via the same target classes/ids.

Styling set by the javascript code itself is trickier if you're not a js programmer. . .

[Liam]

> Obviously you need to understand some CSS,

> Styling set by the javascript code itself is trickier if you're not a js
> programmer. . .

If you grabbed some ordinary person off the street, sat them down in
front of TW and asked them to program, then your expectations would be
fairly low. I'm that guy off the street. I know next to nothing. My
knowledge extends as far as knowing just the names of some of these
languages. I'm way out of my my depth, all I can do is ask the most
intelligent questions I can and listen carefully to your answers, and
hope that I'm not annoying everyone.

Yes it is Eric's DiscussionPlugin, I almost exclusively get my plugins
from TiddlyTools. I made the mistake of assuming that this was the
primary source of plugins. I'll be more specific in the future.

I'll have a MTC ready for you shortly. And I'll have a good read up on
Firebug, reverse engineering is how I learn.

Thanks,
Liam.

[Liam]

Hi,

Here's the MTC:
http://discuss.tiddlyspot.com/

I've given some description in the [[Discussion Discussion]] tiddler.

Liam.

[Måns]

Hi Liam

>I know next to nothing. My knowledge extends as far as knowing just the names of some of these languages.  I'm way out of my my depth, all I can do is ask the most intelligent questions I can and listen carefully to your answers, and hope that I'm not annoying everyone.

I started playing with TW a couple of years ago. Like you I didn't
have any training in either HTML or javascript, however asking
questions on this forum helped me accomplish what I wanted..
This group is a fantastic ressource of different people using TW for
very different things - and I have personally enjoyed that some truely
gifted programmers helped me with some (sometimes terribly advanced)
scripts and explanations when I needed it,,

Learning TW (HTML, Css, Javascript and using different macros) is also
learning how to communicate in an open source sort-of way...
TW is open source - all scripts, plugins and custom made TWs are made
by individuals, who share their work with the world for free...
Imho this means that we (the users) pay back by spreading the word,
mention the author's names, link to correct archives and give support
to other users in the same open source spirit.

>I made the mistake of assuming that this was the primary source of plugins. I'll be more specific in the future.

Tiddlytools *is* the best/most extensive centralized source of TW-
plugins made or maintained by Eric Shulman, however *every* TW is a
potential repository - and there are a lot of great plugins-writers,
programmers and Css-wizards, who have put their work out on the web
for everyone to enjoy.

> I'll have a MTC ready for you shortly. And I'll have a good read up on Firebug, reverse engineering is how I learn.

An MTC is *the* greatest learningtool you'll ever get - because the
process of creating it, will help you understand how TW works - and
pinpoint the problem - many times you will even find the answers
you'll needed just by eliminating irrelevant things or starting from
scratch...

Another advantage is the fact that more people will be able to
understand what you want to accomplish and might chime in with a
possible solution for your specific problem...

Happy hacking :-)

Cheers Måns Mårtensson

[wolfgang]

These style don't have anything to do with any plugins. In the actual
Mocha style sheet:

http://discuss.tiddlyspot.com/#StyleSheet

..find the definitions starting with:

#sidebarTabs .tabContents {background:#fff;}

and ending with:

#sidebarTabs .tabUnselected:hover { border-bottom: none;padding-bottom:
3px;color:#4F4B45}

This defines the colors and appearance of the SideBarTabs in Mocha
theme.


While in the default StyleSheetColors you will find style definition
for tabs in the main display area, which are the one's you want to
override:

.tabSelected {color:[[ColorPalette::PrimaryDark]];
background:[[ColorPalette::TertiaryPale]];
border-left:1px solid [[ColorPalette::TertiaryLight]];
border-top:1px solid [[ColorPalette::TertiaryLight]];
border-right:1px solid [[ColorPalette::TertiaryLight]];
}
.tabUnselected {color:[[ColorPalette::Background]]; background:
[[ColorPalette::TertiaryMid]];}
.tabContents {color:[[ColorPalette::PrimaryDark]]; background:
[[ColorPalette::TertiaryPale]]; border:1px solid
[[ColorPalette::TertiaryLight]];}
.tabContents .button {border:0;}

..with those you'll find corresponding with in the Mocha StyleSheet.
For a start copy these in the Mocha StyleSheet and replace these
ColorPalette defined definitions with the ones you find for the
SideBarTabs.

[Måns]

Hi Liam

> Here's the MTC:http://discuss.tiddlyspot.com/
>
> I've given some description in the [[Discussion Discussion]] tiddler.

Great job :-) Thanks

To remove borders from tabcontents and get the background color in
there (all tabs in the TW) write:

.tabContents{
background:[[ColorPalette::Background]];border:none;
}

in your StyleSheet tiddler.

If you want it not to affect the tabs in the sidebar you can can
preceed it with #displayArea

#displayArea .tabContents{
background:[[ColorPalette::Background]];border:none;
}

I'm sure you can create a custom css class which will only affect this
tabset and not other tabsets inside it...
However i don't know how...

Checkout your shadowtiddler StyleSheetLayout - if you want to find
more parameters to change - (ie tab button borders etc). Copy/paste
them into your StyleSheet tiddler and make changes there - not in the
StyleSheetLayout tiddler!!

Cheers Måns Mårtensson

[Måns]

Aah - Sorry...

Wolfgang named the correct StyleSheet tiddler of reference here:
StyleSheetColors...

Thanks Wolfgang :-)

[Liam]

Thanks for the encouragement Måns.

Firstly I think I put you wrong by using the wrong term. I called the
area that I wanted to change the 'Tab', but I realise that the tab is
just the box at the top and not the whole area that the text sits on.
I think this area must be called the 'Message Area' or the 'Viewer'.
Anyway the parts I want to change are the Tabs and the "Message Area"
as a whole. I hope my screenshots in the MTC help clarify what I'm
trying to change.

So I've had an extensive play around in the StyleSheet and found some
of the areas that I want to change, and they are now changed in the
updated MTC. http://discuss.tiddlyspot.com/

But there is still the text and the remaining gray areas that I want
to change (shown with red arrows in the screenshots). To make sure I
hadn't overlooked anything in the StyleSheet I used the 'Find'
function in firefox to find every instance of "#" and if it
corresponded to a colour I changed that colour to green (33ff00). As
you can see in the screenshot the parts that didn't change to green
must be controlled elsewhere (I think). I had a brief poke around in
PageTemplate and StyleSheetLayout but nothing jumped out at me.

Any pointers?

[Måns]

Hi Liam

> But there is still the text and the remaining gray areas that I want
> to change (shown with red arrows in the screenshots).

----

>I had a brief poke around in PageTemplate and StyleSheetLayout but nothing jumped out at me.

The terms you are looking for are .tabSelected .tabUnselected
and .tabContents...

I tried this (Wolfgang's suggestion) in your StyleSheet - and it
seemed all right to me..:

/*{{{*/

.tabSelected {color:[[ColorPalette::PrimaryDark]];
background:[[ColorPalette::TertiaryPale]];
border-left:1px solid [[ColorPalette::TertiaryLight]];
border-top:1px solid [[ColorPalette::TertiaryLight]];
border-right:1px solid [[ColorPalette::TertiaryLight]];
}

.tabUnselected {color:[[ColorPalette::Background]]; background:
[[ColorPalette::TertiaryMid]];}
.tabContents {color:[[ColorPalette::PrimaryDark]]; background:

[[ColorPalette::Background]]; border:0px solid

[[ColorPalette::TertiaryLight]];}
.tabContents .button {border:0;}

/*}}}*/

Cheers Måns Mårtensson

[Liam]

> I tried this (Wolfgang's suggestion) in your StyleSheet - and it
> seemed all right to me..:

Yes, it's worked now for me too. (I don't know why I couldn't get it
to work before). Thanks Wolfgang!

My Theme is really coming along nicely, thanks to the help on this
forum. I'm also learning heaps by saving a backup then getting in and
making incremental changes to see what affects what.

(I've learned something else today. I wasn't understanding the
purpose, or function, of the ColorPalette but I think I understand
now. Correct me if I'm wrong: The ColorPalette is where the colours
are defined and the Theme Author defines his colours in the
ColorPalette, for two reasons that I can see; 1) it is easy to identfy
which colour is which, 2) if he wants to make a global change he only
needs to change the definition in the Palette and not every instance
in each tiddler.)

Cheers for responding to this post, I feel my question has been
answered!

[PMario]

On Feb 19, 3:41 pm, Liam <liam.holly.erick...@gmail.com> wrote:
> (I've learned something else today.  I wasn't understanding the
> purpose, or function, of the ColorPalette but I think I understand
> now.  Correct me if I'm wrong: The ColorPalette is where the colours
> are defined and the Theme Author defines his colours in the
> ColorPalette, for two reasons that I can see; 1) it is easy to identfy
> which colour is which, 2) if he wants to make a global change he only
> needs to change the definition in the Palette and not every instance
> in each tiddler.)

that's it.

> Cheers for responding to this post, I feel my question has been
> answered!

.. cool .. q:D

have fun!
-mario