Jump to content
TNG Community

Changing Background Color


Russ

Recommended Posts

Hello all,

I am new to TNG and am still designing and making some changes to my site. I am having trouble finding where I can change the background color of a Template from white. I am referring to the white standard background in all pages where one would view the date (e.g. descriptions, thumbnails etc) I have figured out how to change the table colors but can't find the background. I am looking in the genstyle.css.

Any help would be appreciated!

Thank you,

Russ

Link to comment
Share on other sites

Hello all,

I am new to TNG and am still designing and making some changes to my site. I am having trouble finding where I can change the background color of a Template from white. I am referring to the white standard background in all pages where one would view the date (e.g. descriptions, thumbnails etc) I have figured out how to change the table colors but can't find the background. I am looking in the genstyle.css.

Any help would be appreciated!

Thank you,

Russ

Hi Russ,

I assume you are talking about the background of the page itself, behind the tables, etc. I fiddled with mine for quite a while before I finally stumbled on the way to do it. That is set in topmenu.php or topmenu.html, which ever you are using. As always, be sure to make a backup of the original file before messing with it. Where it is located in the file depends on the template you are using. There should be a color setting for the background of the topmenu itself, and another for page background. Look for the color FFFFFF as a background color and start there.

Link to comment
Share on other sites

Hi Russ,

I assume you are talking about the background of the page itself, behind the tables, etc. I fiddled with mine for quite a while before I finally stumbled on the way to do it. That is set in topmenu.php or topmenu.html, which ever you are using. As always, be sure to make a backup of the original file before messing with it. Where it is located in the file depends on the template you are using. There should be a color setting for the background of the topmenu itself, and another for page background. Look for the color FFFFFF as a background color and start there.

Thanks Linda for the quick reply .. I will give it a shot!

Russ

Link to comment
Share on other sites

Russ,

You were working with the correct file when you mentioned genstyle.css. You want to change the entry below in highlighted in bold. #FFFFFF gives you a white background as noted in "describes page background color and all non-table text not governed by any other style." Change the color as you want. Be aware that your change may make the existing text color unreadable.

Also be aware that, whenever there is a TNG update that includes a new genstyle.css, you will have re-enter your changes. My two-bits here is to make a text file which lists all the changes you make to each TNG file.

The advice was good to back up any file Darrin provides before you begin to make changes. While changing a color will not get you into too much trouble, some changes newbies make will stop your website in its tracks. Been there; done that. It gives you the same sickening feeling as when your hard drive suddenly stops working.

--------------------------------------------------

genstyle.css

/* body: describes page background color and all non-table text not governed by any other style */

BODY {

background-color : #FFFFFF;

color : #000000;

font-family : Arial, Helvetica, sans-serif;

font-size: 12px;

Link to comment
Share on other sites

Russ,

You were working with the correct file when you mentioned genstyle.css. You want to change the entry below in highlighted in bold. #FFFFFF gives you a white background as noted in "describes page background color and all non-table text not governed by any other style." Change the color as you want. Be aware that your change may make the existing text color unreadable.

Also be aware that, whenever there is a TNG update that includes a new genstyle.css, you will have re-enter your changes. My two-bits here is to make a text file which lists all the changes you make to each TNG file.

The advice was good to back up any file Darrin provides before you begin to make changes. While changing a color will not get you into too much trouble, some changes newbies make will stop your website in its tracks. Been there; done that. It gives you the same sickening feeling as when your hard drive suddenly stops working.

--------------------------------------------------

genstyle.css

/* body: describes page background color and all non-table text not governed by any other style */

BODY {

background-color : #FFFFFF;

color : #000000;

font-family : Arial, Helvetica, sans-serif;

font-size: 12px;

Arnold,

Thanks for your reply, for some reason I did not see it until today.

I have still not been able to change the background color with either suggestion. I went back to the genstyle.css, and found where you said to change, no problem. However, the only colored background that changes from white to my new color is the printer friendly screen (when you click to print something and it takes out the header and footer).

I assume since the option is "non-table text not governed by any other style" that perhaps something is making this not change, somewhere else in some other setting.

Also ... changing the background color would work for me but what I REALLY want to do is add a backgroud to the main screens (behind the tables) ... the same area we are discussing a color change.

Any suggestions?

Thanks,

Russ

Link to comment
Share on other sites

Russ, check this out:

BODY {

background-color : #FFFFFF;

background-image : path/to/image.gif/jpg/png

color : #000000;

font-family : Arial, Helvetica, sans-serif;

font-size: 12px;

}

the background-image should overwrite any background-color

oh, one thing I had to do when testing the changes, whether it was color change or image, I had to clear my browsers' cache or the changes wouldn't show....don't know why....but thats what I had to do...

Link to comment
Share on other sites

Hi John,

I added that to the genstyle.css in the body section like this:

/* body: describes page background color and all non-table text not governed by any other style */

BODY {

background-color : #FFFFFF;

background-image : http://www.helderbergtallmans.com/background.jpg

color : #000000;

font-family : Arial, Helvetica, sans-serif;

font-size: 12px;

}

But no change .. I also cleared my cache and also no luck. Did I place the code you have me in the wrong place?

Thanks

Russ

Link to comment
Share on other sites

Hi John,

I added that to the genstyle.css in the body section like this:

/* body: describes page background color and all non-table text not governed by any other style */

BODY {

background-color : #FFFFFF;

background-image : http://www.helderbergtallmans.com/background.jpg

color : #000000;

font-family : Arial, Helvetica, sans-serif;

font-size: 12px;

}

But no change .. I also cleared my cache and also no luck. Did I place the code you have me in the wrong place?

Thanks

Russ

try it with just the path to the file, not the url, like /var/www/tng/images/image.jpg

I just checked your site, the image is showing up as the background.....

Russ it looks like you are on the right trail.. What browser do you use? If you use Firefox, mozilla has an add-on or extension for firefox called web-developer. This adds a toolbar to your firefox browser and has all sorts of info about the webpage you are viewing, like the css styles, image paths etc. very useful for editing themes....

Link to comment
Share on other sites

John,

Still no luck. Yes, I do use Firefox, and I tried also checking it with my IE at home, and also at work, and I don't see the backgroud ... just the white behind the tables.

Just so we are on the same page, I am referring to the main background behind the tables for instance on the photo's page, gravestones etc... I can see the top background in the header just fine ... it is the other I am trying to change.

Strange that it doesn't show up for me anywhere ... I'm not sure what the problem is. It seems to me I have done the changes correctly.

Russ

Link to comment
Share on other sites

John,

Still no luck. Yes, I do use Firefox, and I tried also checking it with my IE at home, and also at work, and I don't see the backgroud ... just the white behind the tables.

Just so we are on the same page, I am referring to the main background behind the tables for instance on the photo's page, gravestones etc... I can see the top background in the header just fine ... it is the other I am trying to change.

Strange that it doesn't show up for me anywhere ... I'm not sure what the problem is. It seems to me I have done the changes correctly.

Russ

try changing the .lightback class background color.....also try adding background-color to .normal. seems like one of those should be it....

Link to comment
Share on other sites

Hi John,

No luck there either ... I give ... I guess I will just have to leave the white background. Thanks for trying to help me though, I appreciate it.

Russ

Link to comment
Share on other sites

No luck there either ... I give ... I guess I will just have to leave the white background. Thanks for trying to help me though, I appreciate it.

I'll jump back in.

Below the equal signs are portions of genstyle.css files done by Darrin (in Italics) and me. You will note the colors he uses and what I use. If you go to our website and look at the following web pages, you will see how we use a light yellow (#FAFAD2) and light blue (#A6A6D2).

Search Results

Search for Names of Deceased Individuals

We have to know why you are not getting the same results we are getting. Once we determine that, then maybe you can enter a background and not just alter the background color. Soooooo, please let us know what you are actually entering in genstyle.css to change the background color. For now, at first, etc., we have to take small steps.

==========================

DL

/* body: describes page background color and all non-table text not governed by any other style */

BODY {

background-color : #FFFFFF;

AS

/* body: describes page background color and all non-table text not governed by any other style */

BODY {

background-color : #FAFAD2;

DL

/* fieldnameback: background color for column and row title sections */

.fieldnameback {

background-color: #333366;

AS

/* fieldnameback: background color for column and row title sections */

.fieldnameback {

background-color: #A6A6D2;

Link to comment
Share on other sites

BODY {

background-color : #FFFFFF;

As to CSS coding:

  • always specify the tag (BODY)
  • always enclose the specification in {}, so don't forget to close them
  • always finish off each parameter (background-color) with a ;

In case of the background image: off the top of my head, I think the correct syntax reads


BODY
   {background-image : url("path/to/image.gif/jpg/png");}

It is worth investing some time learning about CSS, as it allows you to do a hell of a lot with your layout, all concentrated in one file.

Link to comment
Share on other sites

Russ, maybe you should post your genstyle.css for us.

Russ, make sure your tags are closed with the } character and each item ends with a ;

example -

Body {

background-color: #FFFFFF;

}

Link to comment
Share on other sites

Ok Guys ...

I am pasting my genstyle.css in below. For the purpose of taking this in small steps, as suggested, I have reverted back to the genstyle.css that was in the template2 zip. The only things I have changed to this point for posting is the table background color (to a light tan) and the color for the column and row sections (a dark brown), which were no problem to change and appear fine.

Instead of changing the background to a jpg image at this point, (which I still want to do) I chose to add a color to see if that would work. I have added a yellowish color (#FDD415) to line 42. That does not appear for me as before, and is still the problem. I will let you folks look at it and see what you think.

As far as learning more about css. I totally agree and have some tutorials bookmarked. I get the basic jist of it. I have been making webpages since 1997 with an html editor, and have learned to understand a lot of html, but this is my first experience with css.

I am still working on my site before "announcing" it and have a lot more to do. I do have some other problems I need to work out but one thing at a time.

Thanks for your patience ... below is the genstyle.css as mentioned above, and here is an link to a page to view http://www.helderbergtallmans.com/browseheadstones.php

--------------------------------------------------------------------------------------------------------------------------

/* normal: most regular body text */

.normal {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

/* smfieldname: small text used in conjunction with .fieldname style text */

.smfieldname {

font-family: Arial, Helvetica, sans-serif;

font-size: 10px;

color: white;

}

/* fieldname: regular text within column or row title sections */

.fieldname {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

color: white;

}

/* header: heading text */

.header {

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: 21px;

color: #676037;

}

/* whiteheader: heading text used on dark backgrounds (usually fieldnameback) */

.whiteheader {

font-family: Arial, Helvetica, sans-serif;

color: #FFFFFF;

}

/* subhead: subheading text */

.subhead {

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

}

/* body: describes page background color and all non-table text not governed by any other style */

BODY {

background-color : #FDD415;

color : #000000;

font-family : Arial, Helvetica, sans-serif;

font-size: 12px;

}

/* link: normal links, active: links in use */

A:LINK, A:ACTIVE {

color : #676037;

}

/* visited: previously visited links */

A:VISITED {

color: #8B8776;

}

/* fieldnameback: background color for column and row title sections */

.fieldnameback {

background-color: #4A4320;

/*these 2 lines added in 5.0*/

border-right: 1px solid #777;

border-bottom: 1px solid #777;

}

/* databack: background color for data areas */

.databack {

background-color: #F1E9C1;

/*these 2 lines added in 5.0*/

border-right: 1px solid #bbb;

border-bottom: 1px solid #bbb;

}

.pboxname {

font-family: Arial, Helvetica, sans-serif;

}

/* pedigree box: dates font */

/* font-size should be in points */

.pboxdates {

font-family: Arial, Helvetica, sans-serif;

}

/* pedigree box information popups */

/* font-size should be in points */

.pboxpopup {

font-family: Arial, Helvetica, sans-serif;

margin-top: 0;

margin-bottom: 0;

}

/* Added in 3.0.4 */

UL {

margin-left: 5px;

margin-top: 0px;

margin-bottom: 0px;

padding-left: 1em;

}

/* Added in 4.0.0 */

/* For links on dark background */

a.lightlink:link, a.lightlink:visited {

font-family: Arial, Helvetica, sans-serif;

color: #FFFFFF;

text-decoration: none;

}

a.lightlink:hover, a.lightlink:active {

color: #FFCC33;

text-decoration: none;

}

/* For white-only links on dark background */

a.lightlink2:link, a.lightlink2:visited {

font-family: Arial, Helvetica, sans-serif;

color: #FFFFFF;

text-decoration: none;

}

a.lightlink2:hover, a.lightlink2:active {

color: #FFFFFF;

text-decoration: none;

}

.lightback {

background-color: #FFFFFF;

}

/* sideback: background color for side and top frames */

.sideback {

background-color: #676037;

}

/* mouseoverback: background color for admin menu items while active*/

.mouseoverback {

background-color: #C3B165;

/*these 2 lines added in 5.0*/

border-right: 1px solid #777;

border-bottom: 1px solid #777;

}

.whitesubhead {

font-family: Arial, Helvetica, sans-serif;

color: #FFFFFF;

font-size: 16px;

}

/* smaller: small body text */

.smaller {

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

}

/*added in 5.0.0*/

/*for active secondary tab link*/

a.lightlink3:link, a.lightlink3:visited, a.lightlink3:hover, a.lightlink2:active {

color: #FFCC33;

text-decoration: none;

}

/*for alignment on menu icons*/

.tngmenuicon {

vertical-align: -3px;

}

/*for descendancy chart*/

#descendantchart {

text-align: left;

}

#descendantchart li {

list-style-type: none;

white-space: nowrap;

}

#descendantchart ul {

margin-left: 0px;

}

#descendantchart ul.first {

margin: 0;

padding: 0;

}

Link to comment
Share on other sites

I am pasting my genstyle.css in below. For the purpose of taking this in small steps, as suggested, I have reverted back to the genstyle.css that was in the template2 zip.

Russ, have you modified anything in template2's index.php (or index.html, whichever you use for your site...

) file? I can't look at it right this moment, but it seems in a couple of the themes, you need to change the background-color call in that file also. I would have mentioned it earlier, but I was under the impression your were using the default template, which doesn't have a background-color call in it...

when you open index.php you'll see a line something like:

<table width="100%" background-color="#FFFFFF" etc, etc> This may occur twice in index.php. like I said I can't get to it right now due to work, but check that out....

Link to comment
Share on other sites

Russ, have you modified anything in template2's index.php (or index.html, whichever you use for your site...

) file?

Yes, I have changed the index.php for template 2. There I have specified two backgrounds for that page, one being the outer darker background, and one the inner lighter one. (one I called "back.jpg ... and the other is "background.gif") My main page is http://www.helderbergtallmans.com

It is the lighter inner background I am trying to make as my main background behind the tables throughout the rest of my site.

If you view the source to the index.php you can see each how I specified each background which work without a problem.

Perhaps something in my index.php needs to be different?

Link to comment
Share on other sites

Yes, I have changed the index.php for template 2. There I have specified two backgrounds for that page, one being the outer darker background, and one the inner lighter one. (one I called "back.jpg ... and the other is "background.gif") My main page is http://www.helderbergtallmans.com

It is the lighter inner background I am trying to make as my main background behind the tables throughout the rest of my site.

If you view the source to the index.php you can see each how I specified each background which work without a problem.

Perhaps something in my index.php needs to be different?

Russ, I am at a loss as to why your background isn't showing up....everything looks as it should, unless I'm totally overlooking something...maybe one of the other users here can have a look??? :?:

Link to comment
Share on other sites

John,

The only other thing I can think of is possibly something to to with my topmenu.html? I did alter that in the template2 as well. Mind having a look at that? I am pasting my Topmenu.html below. Thank you.

-------------------------------------------------------------------------------------------------------------------------

<?php global $text; ?>

<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0">

<style>

.topmenu {

font-family: Verdana,Arial, Helvetica, sans-serif;

font-size: 10px;

color: #000000;

text-decoration : none;

}

.topmenu:Link {text-decoration : none; color: #000000;}

.topmenu:Visited {text-decoration : none; color: #000000;}

.topmenu:Active {text-decoration : none;}

.topmenu:Hover {

color: #000000;

text-decoration : none;

}

</style>

<table cellspacing="0" cellpadding="0" bgcolor="#676037" width="100%" background="back.jpg">

<tr>

<td width="1%" background="HT/back.jpg">&nbsp;</td>

<td valign="top" width="12%" background="HT/back.jpg">

<img border="0" src="http://www.helderbergtallmans.com/headerphoto.gif" width="149" height="132"></td>

<td align="center" valign="top" width="67%" background="HT/back.jpg">

<table cellspacing="0" cellpadding="0" background="HT/back.jpg">

<tr><td align="center">

<img border="0" src="headertitle.gif" width="400" height="99"></td></tr>

<tr>

<td align="center" valign="bottom">

<font size="1" face="Verdana">

<a href="whatsnew.php">What's New</a></font><span class="topmenu"><font color="#000000" face="Verdana">

&nbsp;|&nbsp;

</font>

</span><nobr>

<font size="1" face="Verdana">

<a href="browsephotos.php?tnggallery=1&tree=1">

Photographs</a></font><span class="topmenu"><font color="#000000" face="Verdana">&nbsp;|&nbsp;

</font>

</span><font size="1" face="Verdana">

<a href="browsephotos.php?showdocs=1">

Documents</a></font><span class="topmenu"><font color="#000000" face="Verdana">

&nbsp;|&nbsp;

</font>

</span><font size="1" face="Verdana">

<a href="browseheadstones.php">

Gravestones</a></font><font color="#000000" face="Verdana"><span class="topmenu">

&nbsp;|&nbsp;

</span><a href="browsedocs.php"><font size="1">Histories</font></a><span class="topmenu">

&nbsp;|&nbsp;

</span><font size="1"><a href="diaries.php">Diaries</a></font></font></td>

</tr>

<tr>

<td align="center" valign="bottom">

<nobr>

<font face="Verdana" size="1">

<a href="headstones.php?country=United+States&tree=">

Cemeteries</a></font><font color="#000000" face="Verdana"><span class="topmenu">&nbsp;|&nbsp;

</span><font size="1"><a href="features.php">Features</a></font></font><span class="topmenu"><font color="#000000" face="Verdana">

&nbsp;|&nbsp;

</font>

</span><font size="1" face="Verdana">

<a href="surnames.php">Surnames</a></font></td>

</tr>

<tr>

<td align="center" valign="bottom">

<span class="topmenu">

<br>

&nbsp;</span></td>

</tr>

</table>

</td>

<td valign="top" align="right" width="20%" background="HT/back.jpg">

<table cellspacing="0" cellpadding="0">

<tr>

<td>

<font face="Arial,Helvetica,sans-serif" size="1" color="#FFFFFF">

<form action="search.php" method="get" name="topsearch">

<img src="spacer.gif" alt="" width="1" height="5" border="0"><br><img src="search-header.gif" alt="" width="67" height="25" border="0"><br>

</font>

<font face="Arial,Helvetica,sans-serif" size="1">

First/Given Name(s):<br>

</font>

<font face="Arial,Helvetica,sans-serif" size="1" color="#FFFFFF">

<input type="text" name="myfirstname" style="width: 100px; border-style: solid; border-width: 1px; height: 18px; font-size: 11px;" size="10"><font face="Arial,Helvetica,sans-serif" size="1"><br>

<img src="spacer.gif" alt="" width="1" height="3" border="0"><br>

</font>

</font>

<font face="Arial,Helvetica,sans-serif" size="1">

Last/Surname:

</font>

<font face="Arial,Helvetica,sans-serif" size="1" color="#FFFFFF">

<br><input type="text" name="mylastname" size="10" style="width: 100px; border-style: solid; border-width: 1px; height: 18px; font-size: 11px;"><br>

<input type="hidden" name="mybool" value="AND">

</font>

</td>

<td><br><br><input type="image" name="imgsubmit" src="button-header.jpg" align="right" width="55" height="54" border="0"></td>

</tr>

</table>

</td></form>

</tr>

<tr><td colspan="4" background="edge.gif" bgcolor="#FFFFFF"><img src="spacer.gif" alt="" width="1" height="15" border="0"></td></tr>

<tr><td colspan="4" bgcolor="#FFFFFF">

<table cellspacing="0" cellpadding="10" width="100%">

<tr>

<td width="100%">

<span class="normal">

<!-- end topmenu.html -->

Link to comment
Share on other sites

Russ, take the ht/back.jpg out of all the <td....>'s. just having it in the <table> ta the top should do it....Now if back.jpg is in the same folder as your tng files it should be ok. Whats's the HT/back.jpg? is that where the jpg is?

Link to comment
Share on other sites

Yes, The HT is a folder on my desktop. I have taken it out of the top menu.

Russ,

These other people know a lot more about this stuff than I do. Actually, I don't know much about it at all. :P But template 2 is what I use on my genealogy pages, and I had the same problem you are having. I could get the background image to show momentarily by adding it in genstyle.css, but it seems the topmenu then overwrote it.

As I said early on, I got it to work by changing it in topmenu. The original topmenu.php in template 2 ends like this:

 <tr><td colspan="4" bgcolor="#FFFFFF">
            <table cellspacing="0" cellpadding="10" width="100%">
                <tr>
                    <td>
                        <span class="normal">
I changed it to this:
 <tr><td colspan="4" background="/graphics/old_paper.jpg" bgcolor="#800000">
            <table cellspacing="0" cellpadding="10" width="100%">
                <tr>
                    <td>
                        <span class="normal">

...and it worked. Perhaps this is not the correct way? But it worked. And it adds the background to all pages that use topmenu.php

Linda

Link to comment
Share on other sites

Correct way or not .... IT WORKED! :)

Thanks Linda!

Russ

Great! I knew it had to be something as simple as a /

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...