WYSIFA Forum

[melanie]

How do I make different fonts in one section, for example- in the header, when I'm making a Master Page - as in Greg Tutor example? thanks,melanie

[agsone]

Assuming you've followed the tutorial to the extent that you have an external stylesheet you can open the Cascades editor, click on the "New Style Rule" button (top left) and create a "style applied to all elements of class". Call it something informative (e.g. .otherfont - make sure that period stays in there at the start) and then go to the Text tab and set things accordingly.

Now back in the main editor you can place your cursor in the element you want to change within the section (e.g. a paragraph), right click on the corresponding tag in the status bar at the bottom (e.g. <p>), select Advanced Properties and use the Attributes drop down (class) and corresponding Value (otherfont) to apply your newly created class.

[melanie]

Yes, that worked. Thank you.
In the meantime, I also did Greg's Linked Stylesheets tutorial. I'm confused as to how that method ties in with the Master Page. They seem to overlap and yet do things a bit different and do some different things. How do they relate to each other?

[agsone]

Greg can provide the definitive answer but I think the Master Page tutorial is meant to follow and build on the Linked Stylesheets one with a certain amount of repetition / reinforcement (always a good idea in my opinion). If you did them the other way around you may have discovered the quick-but-not-very-educational technique before the longer-but-easier-to-follow one.

If there is any obvious contradiction or an area of confusion Greg is always keen on, and responds to, feedback.

[gregtutor]

Hi Melanie,

Sorry for the confusion.

The External Stylesheets Tutorial is there to introduce people to the idea of having a single stylesheet that applies to ALL pages on a site (and shows you that it really works!). It is a demonstration to prove a point. This obviously demands that you have content right at the beginning to show you how CSS helps style content.

The main function of the Master Page tutorial is to produce a master page that you can customise and build your own "real world" page design. No page content - we just build the design. It also needs to introduce some additional features of CSS not covered in the External Stylesheets exercise at the same time.

I assume users will want to customise the master page in a number of ways to put their stamp on it before they use it for real. (There are various ideas given in "Customising the Master Page" section.)

I encourage people to get my master page design working, then to add customisations and, finally, once they are ready to use it for real, to EXPORT the stylesheet.

Then, and only then, do you start making copies of the master page and start populating the pages with real content (as distinct from background images and company logos and copyright notices that are to appear on all pages). Once at the stage of adding real content, then you can start styling it. That's when the things you learnt in the External Stylesheets exercise come into play.

I suspect that it is the fact that I don't ask you to export it right at the beginning that is confusing you. The only reason for not exporting it at the beginning is because, if people email me with questions about problems they are having, all they need to do is send me the one master page file. At this stage we are dealing with the structural elements of the page (header, menu, content, footer, etc), so the content styling that hasn't even come into play yet.

I do stress at the end of the master page tutorial that it must be exported before using the master page on a real site.

Hope that makes some sense.

[melanie]

I set up a master page and then tried using it to build an index and another page. When i uploaded it with Filzilla, it didn't seem to keep the format of the masterpage. I made some of the containers different colors so I could see what was going on. Some of the photos weren't picked up either but they are all in the same Images folder, which I also uploaded.

On the 'main' section, I couldn't seem to start the first line at the top.
I like the idea of making one change and having it change in all the pages but still I had to insert some of the photos.
my site is mainedar.org/chapter/marydillingham
and second page is mainedar.org/chapter/marydillingham/chartermembers.html
(why doesn't it open without the .html extension?)
I will be happy to email you the masterpage if it would help.

thanks for your help.
melanie

[wink0r]

The stylesheet does not appear to be in the directory. This would be another file that you would need to upload.

The first address goes to the index.html file in the directory, so the actual address is: mainedar.org/chapter/marydillingham/index.html. The browser looks for an index.html file if there is no file specified.

[melanie]

Ok, I uploaded the Masterpage thinking it was the stylesheet. So now I've uploaded the stylesheet. When I change the Masterpage, it doesn't change the stylesheet too? I thought when I changed one, it changed on every page.

two of four my pictures come up on the index page but two different ones come up on my chartermember page. Why is that?

Then, how can I line up my Maine flag with the US flag on the left? I want them to flank the two sides of the heading lines. They are like unruly children when I try to move them around!
thanks again,
melanie

[gregtutor]

Ok, I uploaded the Masterpage thinking it was the stylesheet. So now I've uploaded the stylesheet. When I change the Masterpage, it doesn't change the stylesheet too? I thought when I changed one, it changed on every page.

You appear to be confused about the difference between a "page" and a "stylesheet". The page (html file) contains the content of the page (the words and pictures). The stylesheet (css file) tells you how the content is to be displayed.

Changing the content on one page does not change the content on other pages. Changing the stylesheet while editing any page, will change the appearance (style) of the content on all other pages.

two of four my pictures come up on the index page but two different ones come up on my chartermember page. Why is that?

Because those pages have different content! (Though, actually, I'm not seeing that many images!)

Then, how can I line up my Maine flag with the US flag on the left? I want them to flank the two sides of the heading lines. They are like unruly children when I try to move them around!

I'm not seeing that either! On the chartermembers page they neatly flank the heading and continue to do so whatever my window size.

One problem you have with the stylesheet is that it doesn't display in FireFox. This is because you have not added the .css file extension to the name. Internet Explorer will accept the stylesheet when it is called "masterpagestylesheet" but to work in FireFox it needs to be called "masterpagestylesheet.css" and properly linked from the page.

[melanie]

You are right, I am very confused. I changed the name of my style sheet to masterstylesheet.css (adding the extension) Guess that didn't work either because now when I open the files in Kompozer all my styling is gone. How can I tell it to find the new file? Or do I need to start all over?

The two pages I see on IE have not changed.

In the meantime, I will download Firefox so I can check it there as well. Netscape doesn't show the styling either.

melanie

[gregtutor]

You are right, I am very confused. I changed the name of my style sheet to masterstylesheet.css (adding the extension) Guess that didn't work either because now when I open the files in Kompozer all my styling is gone. How can I tell it to find the new file? Or do I need to start all over?

I guess you went to "My Documents" and exited the file name manually. It's probably easiest to open the html file in Notepad and search for the line:

<link rel="stylesheet" href="masterstylesheet" type="text/css">

and just add the .css in that line. Save the file then return to KompoZer. Once re-loaded it will appear OK. If it is already loaded, then use FILE > REVERT (CTRL-R) to reload it.

The two pages I see on IE have not changed.

TO be expected.

In the meantime, I will download Firefox so I can check it there as well. Netscape doesn't show the styling either.

Netscape and Firefox are both built on much the same rendering engine, as is KompoZer, so they should all show much the same result.

[melanie]

It looks better now, thank you.
How do I make the horizontal menu look better? is there a way to fill in both lines so the gray and black aren't showing?

[gregtutor]

How do I make the horizontal menu look better? is there a way to fill in both lines so the gray and black aren't showing?

Where do I start? The trouble is that you have really so hacked and corrupted the original master page design with "drag-select-toolbar button" styling techniques that it might be better to start from scratch.

Your code looks like this:

Code: Select all

<div id="hmenu">
<ul>
<li>
<div>Home</div>
</li>
<li style="width: 134px;"><a href="#" target="_top">Charter
Members</a></li>

<li><a href="#">History</a></li>
<li style="width: 114px;"><a href="#">Opportunity Farm</a></li>
<li><a href="#">Membership</a></li>
<li><div><a href="#">Our Patriots</a></div></li>
<li style="width: 175px;"><div><a href="#">National Society DAR</a></div></li>
<li style="width: 188px;"><div><a href="#">Maine State DAR</a></div></li>
</ul>
</div>


when it should look like this:

Code: Select all

<div id="hmenu">
<ul>
<li>Home</li>
<li><a href="#">Charter Members</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Opportunity Farm</a></li>
<li><a href="#">Membership</a></li>
<li><a href="#">Our Patriots</a></li>
<li><a href="#">National Society DAR</a></li>
<li><a href="#">Maine State DAR</a></li>
</ul>
</div>


There's no quick way, through the WYSIWYG interface, to tell you how to change this, so you might be better to open Notepad again, and paste in my version replacing your bloated code. Then we can start on the business of teaching you how to use that stylesheet.

I haven't checked out your version yet, but hopefully it is pretty close to to the original master page version and we will start by changing it to the "Expanding Buttons" version.

Then you will have a more fundamental design issue to resolve. How do you get all those buttons to fit on one line, given the width of the line that you have settled on. Obviously you have tried making the button text smaller, but that plan has made the tet so small it's almost illegible. Think about that for the next 15 hours (I'll be back after I've had my sleep and been to work!)

You could do worse than spend the time working through the External Stylesheet tutorial on my site and the Master Page tutorial will give you the answer to your question "content what is this container for?". There's a few other points that you seem to have missed in them, so I'll expect lots of questions on them.

Oh, another thing you can sort out while I'm away. Open your preferred image editor and resize all the images used on the site so they can be displayed "actual size". You should not get your visitor's browser to attempt to do a re-size job.

[melanie]

Then you will have a more fundamental design issue to resolve. How do you get all those buttons to fit on one line, given the width of the line that you have settled on. Obviously you have tried making the button text smaller, but that plan has made the tet so small it's almost illegible. Think about that for the next 15 hours (I'll be back after I've had my sleep and been to work!)

I thought two lines would look better than having them thick and thin on one line.

[melanie]

You could do worse than spend the time working through the External Stylesheet tutorial on my site and the Master Page tutorial will give you the answer to your question "content what is this container for?". There's a few other points that you seem to have missed in them, so I'll expect lots of questions on them.

Ok, I'll start all over and do the tutorial again. sigh,sigh