Jump to content
TNG Community
idogenealogy

Why won't CSS "class" work in Notes?

Recommended Posts

idogenealogy

I want to use a <div class="forme">Yada Yada Yada</div> within Notes of an individual or anywhere Notes are used.

I created the class in mytngstyle.css ...
.forme {color: crimson; font-style: italic;}  ---- THIS DID NOT WORK.

.forme {color: crimson !important; font-style: italic !important;} - DID NOT WORK EITHER.

I can get an inline style to work [ <span style="color:crimson;"><em>Yada Yada Yada</em></span> ]
BTW -- <span class="forme"> ... DOES NOT WORK EITHER.

I have a lot of work to do -- I want to use Notes as intended BUT also as a way for me to "notate" why I need to do for that person, etc. Having a class forme will allow me to do that. And don't want to use inline styles to make it happen.

Help! and thanks in advance.

~ Lynda

 

Share this post


Link to post
Share on other sites
Robin Richmond

<div> and <span> tags with classes and styles worked for me, both through TNG data entry and Gedcom Import. 

What entities are you attaching notes to?

How are you entering or loading the notes?

Try  creating a different class in the main genstyle.css file and see what happens.

Also in your browser's code inspector, look at the text that is supposed to be formatted and see what it says about the style class.

- Robin

 

 

Share this post


Link to post
Share on other sites
DenverDave

Try clearing the browser cache and reloading the page after making CSS changes.

Share this post


Link to post
Share on other sites
idogenealogy

SOLVED The CSS should have been ---- div.forme {color:crimson; font-style: italic;}

It's in mytngstyle.css

Thanks Robin for pointing me to genstyle.css which had coding for a div.icon a
That was the clue I needed. And this could be used anywhere.

Thank you everyone else. I've been working with CSS since it's version 1 days but having been retired now for over 10 years, I am rusty.

Thank you EVERYONE! ~ Lynda

Share this post


Link to post
Share on other sites
Katryne

Thanks Lynda for this tip.

Share this post


Link to post
Share on other sites
Robin Richmond

That's curious. I can't argue with your success, but am I missing a difference between the rule that works and the one that doesn't other than "div." at the front?

"div.forme" simply means "divs with the class forme" as opposed to "all elements with the class forme". So I would not not expect the "div." prefix to make a difference anything unless another rule applies directly to those <div> elements. For example, the rule, if you have one rule for .forme  and another rule for div.forme, then the first one will apply to <span class='forme'> and second one would apply to div.form.

In this overly-complex example, with the attached screenshot and this HTML/CSS code, even though the definition div.x precedes the definition of div and .x,  span tags of class='x' are a different color from div tags with class='x' because the style rule for div.x is more specific than either div or .x

<style>
div.x {color:orange;}
section, div {margin-left:2em;}
section {color:green;}
.x {color:blue;}
div {color:brown;}
section div {color:cyan;}
section>div {color:red;}
li div{color:purple;}

</style>
</head>
<body id="content" target="robin">
<h4>Heading; no specified class</h4>
Open text
<div>Plain div=>brown</div>
<span class='x'>Span.x == .x => blue</span>
<div class='x'>Div.x => orange</div>
<section>
Section => green
  <div>Section>div => red 
    <span class='x'>Section>div>span.x == .x =>blue</span>
    <div>Section>div>div == Section div =>cyan</div>
	<span class='x'>Section.div.span.x == .x >blue<span>
    <div class='x'>Section.div.div.x == Div.x =>Orange</div>
  </div>
  <div class=x>Section>div.x = div.x => Orange</div>
</section> 
Open text
<ol>
<li>List item 1 <div>ol>list>div == li div =>purple</div></li>
<li>List item 2 <div class='x'>ol>li>div.x == div.x =>orange</div></li>
</ol>

 

Also, Just for my own sake, I would still like to know whether you defined your markup in a TNG data-entry screen or loaded it from a Gedcom file, and what kind of TNG object it was applied to. If you could supply a hyperlink to a page that displays such a note, I would appreciate it.

image.png

Share this post


Link to post
Share on other sites
RickM
On 11/18/2022 at 10:38 AM, Robin Richmond said:

That's curious. I can't argue with your success, but am I missing a difference between the rule that works and the one that doesn't other than "div." at the front?

I'm late to this party I know and I know I have promised others some help yet..
@idogenealogy

I wonder are you making these changes on your Wordpress site or your TNG underdev site?? If under your WP site it is possible though unlikely that the class has been defined somewhere else and you have to be more specific in how you address it for TNG. If under the TNG Dev site maybe you have defined it in mytngstyle.css file elsewhere??

Could you recreate this for me so I can have a look.. CSS really intrigues me..

Share this post


Link to post
Share on other sites
idogenealogy

Reply to RickM ...

Sorry RickM -- life outside of genealogy gets unbelievably busy when the months of November & December hit. I've been working with WordPress since 2006 on my idogenealogy.info site as well as several others. However, THE GOAL IS TO ONLY HAVE THE TNG SITE. Everything under http://idogenealogy.info will be moved into my TNG site. It's not that I don't like WordPress -- I do. But the cost of yearly templates is driving me "out" of WordPress. Add in the updates for WP itself, plugins, etc. At this stage in my life, I'm trying to simplify. 

I also believe that TNG is the way for me to "give" all the work I've done for the last 25 years to my children and grandchildren when I'm gone. 

SO in answer to your question, "...are you making these changes on your Wordpress site or your TNG underdev site??"
THE ANSWER IS ONLY UNDER THE TNG SITE, https://idogenealogy.info/tng/

Could I re-create it for you? Not really as I have already "fixed" the ones I had used span style

I agree that CSS is fascinating. I've been working with it since version 1. Have attended sessions with Eric Meyer and it does have its quirks (to some of us who didn't develop this great tool). For instance, not being able to start a class with a number (such as 4me had to be fourme or forme) I don't know if that is still true today. But I still avoid doing it ... just in case. 

RESEARCH on why it has to be div.class instead of just .class:

 

Share this post


Link to post
Share on other sites
idogenealogy

Reply to Robin ...

Your Question: "... like to know whether you defined your markup in a TNG data-entry screen or loaded it from a Gedcom file, and what kind of TNG object it was applied to."
The text content came from a GEDCOM file.
The TNG object is NOTES under an individual.
AND "...a hyperlink to a page that displays such a note..."

Well, it was working and now it's not. I figure I've expended enough time on this ... 
I wanted to use it for THINGS-TO-DO and FURTHER-RESEARCH. The red italics would just assist me in seeing it. I'll figure out another way to do it that doesn't involve CSS. 

Thanks for trying to help me. ~ Lynda

 

Share this post


Link to post
Share on other sites
Katryne

Lynda,

Maybe the notes with the things to-do are confidential, only for you. If it is the case, Michel Kirsch made a mod called Confidential notes color. The confidential notes can be colored the way you wish via the mod. It was made to distinguish private notes from public ones. Could it be of any use to you ?

https://tng.lythgoes.net/wiki/index.php/Confidential_Notes_Color

Share this post


Link to post
Share on other sites
Robin Richmond

Hi. So I gather that a page that on which you are trying to dispay a note is not online.  In case you aren't familiar with them, I'll note that popular web browsers have "Inspectors" that let you see exactly which CSS rules apply to specific elements on your page. It even tells you which rules apply directly to that element, and which are inherited by the element.  You can also fiddle with style rules -  disable specific style attributes, change colors & fonts, add borders, and even change the HTML. (Doing this is referred to as "Inspecting the DOM" or "Browsing the DOM", but you don't need to know much about the DOM to use the inspector. See below.)

Anyway, when I find that a page element does not took the way I expect, I use the inspector.  I thought that I had started a TNG wiki article on browser inspectors, but I now see that I didn't.  There are a lot of browser inspector help pages on web, but I must say that I'm not sure that I ever found a good one. Unfortunately, most of the help pages I've seen focus on navigating through all of the feature of one browser's inspector. If all you need to do is figure out the effect of styles, then you don't care about those other features.

Regarding div.class - what you said is true, but wasn't directed at the point at hand. salient to the point at hand.  Let me describe it this way:

(BTW, I have a habit of explaining things that don't need to be explained, so I expect many people to skip over much of what I write.)'

If you want a person's name by itself to be bold and brown, but you want a paragraph about a person to be, say, outlined in brown, you might define these rules:
div.person {border:thin solid brown;}
span.person {color:brown; font-weight-bold;}

So, when a person is mentioned within a pargraph, you might say
<p>Piscataway was settled in the 1660s.  One of the original settlers was <span class='person'>Hopewell Hull</span>...

But then when you write a paragraph about a person, you might say
<p class='person'>Hopewell Hull was the first of Rev. Joseph Hull's children to be born in America - in Weymouth, Plymouth Colony, in 1636...

Given the two style rules above, if you apply class='person' to  a hyperlink, nothing will happen. But if you have a style rule such as
.person {font-family:verdana;}
then <a class='person'>, <p class='person'>, and <span class='person'> will all use the Verdana font.

But, if you define
.person {color:green;}
then <a>,  <div>, and everything else except <span> will be green, but the more specific rule
span.person {color:brown;}
will override the rule covers all other elements.

So, looking back at the earlier messages in this thread, I didn't see anything that would prohibit the rule .forme {color:crimson; font-style: italic;} from applying to <div> tags.  But clearly, something clearly got in the way. I just didn't see it.

- Robin
----------------------------------------------------------

p.s. The least you need to know about DOM inspectors: (Remember that habit I mentioned?)

  1. Right click on the text or block you are interested in, and select "inspector"
  2. It will show you a hierarchical representation of the HTML and (usually) focus on the HTML element you clicked on.
  3. And, on the side, you'll see a list of the styles that apply to that element, along with the specific lines within specific stylesheets where that rule is defined.
  4. You'll see a hierarchical representation of the page and panel that lists style rules that apply to the current elementthe styles that apply to that
  5. From there. you check and uncheck boxes next to specific attributes, click within the HTML to look at another elment (and note that the elemnt will be highlighted within your web page)
  6. You can also double-click or click and hit F2 or right click and select edit, etc to change the HTML; change the rules etc.
  7. Importantly, you are only changing the the representation of the HTML within the browser at this moment. You are not hanging the source code. As soon as you refresh the page, all of your changes will disappear.
  8. Finally, the inspector and/or each of its panels can be moved around; even opened in another window. The icons that cause that to happen may different (and in different places) in different browsers, but all of the browsers pretty much do the same thing.

Here's a screen shot from a TNG page:
image.png

 

Share this post


Link to post
Share on other sites
idogenealogy

This is awesome Robin! Why weren't you around when I *had* to figure this stuff out? 

I decided to install the mod suggested by Katryne ... https://tng.lythgoes.net/wiki/index.php/Confidential_Notes_Color
Pretty much, the mod does what I wanted to do ... but don't be surprised if I use some of what you explained Robin. 

Many thanks to all.

 

Share this post


Link to post
Share on other sites
Robin Richmond

p.s. The TNG community is great to work with, but it's all online, and I miss live teaching, training, and show-and-tells. I also love welcoming newcomers to, well, whatever. So I would be more than happy to do a live video show-and-tell or have a video discussion with one or several people about any number of topics, including CSS, TNG notes of various types, Mods, the mod manager, etc. Also Family Tree Maker Gedcom Import (that may be my specialty; see the Gedcom Converter mod)

Please feel free to contact within this thread or privately if you are at all interested. I want to say something along these lines on the TNG email discussion list, but doing so in a more public forum like that would necessarily lead to a discussion of topics, other presenters or discussion leaders, some kind of schedule or agenda, etc. and I'm too disorganized to deal with that. :-(

- Robin

Share this post


Link to post
Share on other sites
Robin Richmond

Where was I?

I know that you were being rhetorical, and kind, but there is a meaningful answer - and Katryne, I'd love your take on this.

I (usually) watch the TNGusers2 email list because messages are pushed out to me. I simply don't have (or at least don't take) the time to visit tng.community and proactively search for topics in which I might be interested - even though I know that I can really help with some topics. It just doesn't work for me.  And I'm not the only potentially-helpful person for whom that is true. The ability to add arbitrary images and attachments to tng.community postings, to subscribe to specific topics, and to pick up on threads later are wonderful.  It's also good to limit the traffic on TNGusers2.  But, really, TNGusers2 doesn't get all that much traffic in the first place, and you can subscribe to the daily digest.  So I tend to recommend TNGusers2 as a way to get more help than you would on tng.community. Oh - and Darrin follows TNGusers2 but never looks at tng.community.

The ideal way to ask for help may be to start a topic on tng.community, post a link to that tng.community topic on TNGusers2, and ask people to respond in tng.community rather than in TNGusers2.

Another part of the answer, just incidentally, is that I was out of commission for a long time until Darrin invited me back in a few weeks ago for the TNGv14 upgrade process. Still, if you asked questions on tng.community, I probably wouldn't have seen them anyway.

- Robin

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×