Problems with "Choose highlight color for text"

HTML Source, Tables, CSS, JavaScript, and Embed/Object.

Moderators: BobCP, agsone, Neil Parks, gregtutor, Lem3

Problems with "Choose highlight color for text"

Postby drLPS4 on Sat Mar 31, 2012 8:36 pm

I like to use the highlight color for text. But I find that things I write after that remains highlighted.

Is there a trick or setting one uses to "unhighlight" the text once the heading for a paragraph has been highlighted?
TIA
drLPS4
 
Posts: 6
Joined: Thu Mar 29, 2012 6:26 pm
Country: United States (us)

Re: Problems with "Choose highlight color for text"

Postby gregtutor on Sat Mar 31, 2012 10:49 pm

It's a little difficult to know, from your description, exactly what is happening in your case. It's generally better to let us see the patient, by uploading a sample page demonstrating the problem and posting the URL here.

Seeing the code that KompoZer produces is a great help in analysing what you are doing and advising you on what you should be doing.
Last edited by gregtutor on Sun Apr 01, 2012 5:50 pm, edited 1 time in total.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3787
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Problems with "Choose highlight color for text"

Postby drLPS4 on Sun Apr 01, 2012 1:02 pm

I've created this small page to demonstrate my problem:
http://www.capitalbaseballleague.com/sample-page.html

I like the way it looks on the top line (actually would prefer to just highlight the words and not the blank space to their left and right).

But more importantly I want everything that comes after the headline to be back to normal, i.e. unhighlighted.

Thanks for looking at this for me.

Regards,
Larry Smith
drLPS4
 
Posts: 6
Joined: Thu Mar 29, 2012 6:26 pm
Country: United States (us)

Re: Problems with "Choose highlight color for text"

Postby wink0r on Sun Apr 01, 2012 5:31 pm

A good place to start would be to read through the material gregtutor offers. Just click the link in his signature.
wink0r
 
Posts: 2595
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Re: Problems with "Choose highlight color for text"

Postby gregtutor on Sun Apr 01, 2012 6:43 pm

Mmmm... As wink0r says, my site should help.

The problem would appear to be is that you are doing things very visually, and not considering the underlying the underlying structure of the page, i.e. the HTML tags that you are inserting in your document and how you want each one to appear.

Currently your code looks like this:
Code: Select all
<body style="background-color: rgb(255, 204, 153); color: rgb(0, 0, 0);" alink="#000088" link="#0000FF" vlink="#FF0000">
  <div style="text-align: center; color: rgb(0, 0, 153); background-color: rgb(255, 255, 204);">
    <h2><big><big>THIS IS A SAMPLE PAGE</big></big></h2><br>

    <div style="text-align: left;">
      I've highlited the header but don't know what has to be done to unhighlite this sentence I am writing and to return to unhighlighted text.
    </div>
  </div>
</body>
This says you want the body of the page to have black content on a pinkish background and also sets various colours for links.

That is then over-ridden with by adding a container (<div> tag) that changes both the foreground and background colours, and asks that text is centred.

You then set a heading within this, but instead of styling it at the size you want, you clicked on the text size buttons. This introduces code that it invalid when using the default DOCTYPE of HTML4.01 STRICT. You should remove that code and use the techniques suggested on my site. If you really want a line break following the heading, it would be better to style the heading to have a larger than default bottom margin.

Next you set some body text within another generic container. The correct markup for this text is as a paragraph. A <div> should only be used where the structure of the content is such that either for clarity, or because of the complexity of the styling, that there are not enough tags in the code on which to hang the appropriate styling instructions. Because you placed this tag within the container where you set the text to be centred, this container will have centred text as well. You then have to over-ride this by styling it to be left aligned.

As a guiding principle, always place your content in appropriate semantic tags. Don't select content by dragging across it with your mouse. Instead use the tags visible on the status line.

Do take a look at my page on The Box Model to find out how the underlying structure of a page works.
You may also need to know about accurate cursor placement. (Make sure you switch to the right page for the version of KompoZer that you are using), but you'd also be strongly advised to work through the pages on External Stylesheets and Building a Master Page

Oh, yes, if you just meant that you want the white background to run behind only the letters of your heading, then you need to set the width of the heading block to restrict it to the width of the text within the heading. The heading block can then be set with auto-equalised margins to centre it and be given styling to set the size of the text. The default margin will mean the line break tag is not required.

You should end up with code something like this:
Code: Select all
<body style="background-color: rgb(255, 204, 153);">
  <h2 style="text-align: center; color: rgb(0, 0, 153); background-color: rgb(255, 255, 204); width: 12.5em; margin-left: auto; margin-right: auto; font-size: 3em;">THIS IS A SAMPLE PAGE</h2>

  <p>I've highlited the header but don't know what has to be done to unhighlite this sentence I am writing and to return to unhighlighted text.</p>

Finally, as you'll discover from my site, you should really place all the styling code in an external stylesheet, so it can be re-used to style every other page on the site and so you can change the appearance of the whole site just by changing the styling on one page.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3787
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Problems with "Choose highlight color for text"

Postby drLPS4 on Mon Apr 02, 2012 6:25 pm

Greg-
First let me profusely thank you for taking the time to write me such an elaborate answer. I will be looking at your site and your examples.

That being said - and perhaps this is simplistic - I started using NVU/Kompozer for the simple reason that I did not know HTML code and knew even less about style sheets and all that stuff. For my purposes, a content based website for the 19 other members of a table game baseball league, a WYSIWYG editor usually meets our needs.

With a WYSIWYG editor like Kompozer I could do just about everything I needed to do without having to go to the "view source" tab. It was just this highlite color for text thing that seemed illogical. You can turn it on with just clicking on that tiny icon just to the left of the make-text-smaller button yet apparently you can't turn it off.

So I will look into your suggestions but can't understand why a program allows you to turn on a kind of format and then doesn't provide a way to turn it back off.
drLPS4
 
Posts: 6
Joined: Thu Mar 29, 2012 6:26 pm
Country: United States (us)

Re: Problems with "Choose highlight color for text"

Postby agsone on Mon Apr 02, 2012 7:02 pm

drLPS4 wrote:So I will look into your suggestions but can't understand why a program allows you to turn on a kind of format and then doesn't provide a way to turn it back off.

Actually it does, it just depends on what you highlight in the first place. Understanding what part of the page you've highlighted is an element of getting to grips with the problem and what Greg and Wink0r were driving at. The issue you've hit is that you have set up highlighting for essentially the whole document (by placing some styles on the <body> tag - which is all content, and some other styles on a <div> tag which contains all the current content - although in principle you could have content outside that div).

However in the context of a simple page for a few people (as opposed to getting something together for a large audience and search engines) there are perhaps simpler workarounds that you can try out.

I think where you are starting to go wrong (and what Greg was driving at with the "visual" reference) is that you are styling things as you go along. This creates problems as the proportion of document you capture with just tiny variations in mouse position can vary dramatically. It is much better to:
1) start off with some content (and dummy content generated by just hammering at the keyboard, inserting spaces and hitting return a few times is fine);
2) highlight parts of that and convert into heading and paragraphs as required (and it's better to use paragraphs for blocks of text rather than divs or - much worse - leaving it as the default body text); then
3) style the paragraphs and headings afterwards.

With identifiable bits of content in a slightly larger document its much easier to select the correct thing that you want to style. That's a million miles from an optimal approach to generating ideal web content but it will give you something that looks more presentable in the short term.

Once you've done that, you'll find perfectionist tendencies kicking in and you'll want to move to internal then external style sheets, but that can wait for later.
agsone
Moderator
 
Posts: 1376
Joined: Mon May 21, 2007 7:33 pm
Location: Connecticut, USA
Country: Scotland (sp)

Re: Problems with "Choose highlight color for text"

Postby wink0r on Mon Apr 02, 2012 8:03 pm

The material on Greg's site is oriented toward doing everything that you wish to do in the normal/design view without digging in to the source view or the underlying code.

A web page (html/css) is a set of instructions telling a browser how to render the page. You do need to be able to communicate clearly to the browser how you want things done, but KompoZer will take care of the code necessary to accomplish the task.
wink0r
 
Posts: 2595
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Re: Problems with "Choose highlight color for text"

Postby gregtutor on Mon Apr 02, 2012 8:20 pm

drLPS4 wrote:Greg-
First let me profusely thank you for taking the time to write me such an elaborate answer. I will be looking at your site and your examples.
You'll be able to relax when you get there. You'll find that everything can be done through KompoZer's Menus, Toolbars and dialogues, without once leaving NORMAL view! I confess that in later stages of the tutorials I do start quoting code, but only because it is so much shorter to write things that way, and by that stage, the "student" should know where to find the facilities called for via the program's dialogues - and that is still what I expect them to use.
That being said - and perhaps this is simplistic - I started using NVU/Kompozer for the simple reason that I did not know HTML code and knew even less about style sheets and all that stuff. For my purposes, a content based website for the 19 other members of a table game baseball league, a WYSIWYG editor usually meets our needs.
Had I realised your audience was so small I might have given an answer more like agsone's. I also made the mistake of doing a dr-john. (I sometimes tease another of our regulars, by pointing out that he always gives source code answers to people who thought they'd found a WYSWYG editor.) Apologies for that!
With a WYSIWYG editor like Kompozer I could do just about everything I needed to do without having to go to the "view source" tab. It was just this highlite color for text thing that seemed illogical. You can turn it on with just clicking on that tiny icon just to the left of the make-text-smaller button yet apparently you can't turn it off.
As agsone points out, it depends entirely on how you go about selecting the content. But I have also just discovered more. The best I can say is that the highlight tool behaves in a most counter-intuitive way and most probably be ranked as bugged. When I wrote my answer I wasn't even aware of that button. As you'll see from my site, it's one of those I dispensed with years ago and had forgotten even existed. Having seen what you have been working with I have considerably more sympathy with your complaint. It's still a puzzle on how/why you generated all those generic containers, but that's by the way now...
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3787
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Problems with "Choose highlight color for text"

Postby wink0r on Mon Apr 02, 2012 9:24 pm

If I was ever aware that the 'highlight text' icon was there I had forgotten it long ago. I did try it out and it did exactly as I expected that it should. I typed 'Test Text should be highlighted, but not the rest.' into the view window. I then selected the text 'Test Text' and highlighted it successfully. KompoZer created a set of <span> tags around the text and inserted the desired styling. Note: the highlighting needs to be done after the text is complete. If you highlight just the words you want highlighted without additional text after these words you will have to use Greg's method to get the cursor outside the span tag, but if you have already typed additional text you can move to the end of the line and continue adding content, and only the text that you selected will be highlighted.
Last edited by wink0r on Mon Apr 02, 2012 9:28 pm, edited 3 times in total.
wink0r
 
Posts: 2595
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Re: Problems with "Choose highlight color for text"

Postby drLPS4 on Mon Apr 02, 2012 10:13 pm

These last couple of replies are ringing a lot truer to me.
The easiest one to follow will be the one where I write my paragraph and THEN highlight the text I want highlighted.
I'll try that first but then I'll start looking into Greg's site and seeing if I can make improvements. Even a small audience deserves my best effort.
Thank you all.
drLPS4
 
Posts: 6
Joined: Thu Mar 29, 2012 6:26 pm
Country: United States (us)

Re: Problems with "Choose highlight color for text"

Postby gregtutor on Mon Apr 02, 2012 11:00 pm

Hi wink0r,

My issue was with what, if any, difference there is between the foreground/background button and the companion highlight button. And how the "f/b button" appears to change function.

Example #1:
1. Open KompoZer.
2. Use the f/b button to select a light background colour
(the colour is applied to the whole page. Check the code and not only has it added code for the background colour but foreground and links colours too!)

Example #2:
1. Open KompoZer
2. Type some text leaving the cursor flashing at the end of the text
3. Hit CTRL-A to select all text
4. Use the f/b button to select a light background colour
(The colour is applied to the whole page. Check the code and not only has it added code for the background colour but foreground and links colours too!)

Example #3
1. Open KompoZer
2. Select a heading tag from the dropdown list
3. Type some text leaving the cursor flashing at the end of the text
4. Use the f/b button to select a light background colour
(The colour is applied to the heading. Check the code and not only has it added code for the heading background but has also applied foreground and links colours to the <body> tag too!)

Example #4
1. Open KompoZer
2. Select a heading tag from the dropdown list
3. Type a line of text leaving the cursor flashing at the end of the text
4. Use the highlight button to select a light background colour
(No colour is applied anywhere)

Example #5
1. Open KompoZer
2. Select a heading tag from the dropdown list
3. Type some text leaving the cursor flashing at the end of the text
4. Hit CTRL-A to select all the text
5. Use the highlight button to select a light background colour
(The colour is applied to the heading tag, but this means the colour fills the whole width of the body.)

Example #6
1. Open KompoZer
2. Select a heading tag from the dropdown list
3. Type a line of text leaving the cursor flashing at the end of the text
4. Hit SHIFT-HOME to select all the text
5. Use the highlight button to select a light background colour
(A span tag is added to the code within the heading. The background colour is applied to the span, NOT the heading, so is limited to the typed text only.)

To an experienced user of KompoZer, there may be nothing to be surprised about in these differences, but I confess that even I was taken by surprise by the difference in effect of CTRL-A and SHIFT-HOME in examples #5 and #6. I am not in the least surprised that someone new to the program becomes confused and feels there is no easy way to reverse highlighting once applied!

Moral: Avoid using any toolbar button that is involved in applying styling. They will only bring about frustration and confusion. Instead learn about CSS and stylesheets without delay!

@ drLPS4: You won't be any better off using any other WYSIWYG editor that is designed to hide the underlying code from you and sold as "No knowlege of code needed". These people lie! In the end, if you don't come to terms with the code KompoZer or other programs generate for you, eventually, you will face an insuperable problem with getting your site to work in all browsers, or getting it to do what you want at all.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3787
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)


Return to Advanced Design Q & A


Who is online

Users browsing this forum: No registered users and 1 guest