Jump to content
TNG Community
IanG

Template 15 configure header help needed

Recommended Posts

IanG

Hi,

I'm looking for help with the header for my TNG site. https://gotts.one-name.net/tng/index.php using template 15, TNG 12.1 .

At present the title is on the left and site image on the right.

I have a wordpress blog https://gotts.one-name.net/blog/  where they are they other way round. I also have an html website with a similar fonts and colours: https://gotts.one-name.net/

I would like to make the three sites look similar, so is it possible for the TNG header to be as follows:

  • coat of arms site image on the hard left
  • Title in the middle or towards right
  • Title font to be Arial 14 or 16 and definitely not Helvetica Serif!

Thanks very much in anticipation.

 

Share this post


Link to post
Share on other sites
IanG

I have since managed to switch the site image and Header (or is the parameter Title'?) with this copied from genstyle.css into mytngstyle.css  and adjusting the width:

/* title changing style*/

.title-area {

    float:right;

    width:1078px;  }

.site-header .widget-area {

    float:left;

    text-align:left;

    width:50px;  }

But can I change the site header name font from Helvetica (I presume)?? I have tried changing these from genstyle and removing Helvetica from the list:

.normal {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

/* body: describes page background color and all non-table text not governed by any other style */
body {
    background-color : #FFFFFF;
    color : #000000;
    font-family : 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 12px;
    -webkit-print-color-adjust:exact;
}

Also renaming the serif fonts in TNG\fonts temporarily to see if that works.

Every time, clearing the cache.

Any more ideas on changing the font to Arial and a smaller size?

Share this post


Link to post
Share on other sites
cfj
On 4/15/2019 at 10:28 AM, IanG said:

I would like to make the three sites look similar, so is it possible for the TNG header to be as follows:

  • coat of arms site image on the hard left
  • Title in the middle or towards right
  • Title font to be Arial 14 or 16 and definitely not Helvetica Serif!

I'm not sure if this will help  you!Screenshot_2019-04-18 Home Page.pngScreenshot_2019-04-18 Home Page.png

.title-area {
	.font-droid-sans 
		font-family: 'Droid Sans', sans-serif!important;
	float:right!important;
	width:400px;
}
.site-title {
	font-size:20px!important;
	line-height:1;
	margin-bottom:0;
	margin-top:2px;
}
.site-header .widget-area {
	float:left!important;
	text-align:left!important;
	width:728px;
}

 

Share this post


Link to post
Share on other sites
IanG

Hi cfj,

Thanks for these suggestions. 

I had managed to swap the site header and title to the other sides, but when I add your code for changing the size it lets the items swap back! 

The font doesn't change either. 

You have these two places in genstyle as well where I have replaced helvetica or Arial with Droid Sans:

/* normal: most regular body text IG from Genstyle, swaps helvetica, Arial for Droid Sans

*/
.normal {
    font-family: 'Droid Sans',sans-serif;
    font-size: 12px;
}
/* body: describes page background color and all non-table text not governed by any other style ex Genstyle removed helvetica*/
body {
    background-color : #FFFFFF;
    color : #000000;
    font-family : 'Open Sans', 'Droid Sans', sans-serif;
    font-size: 12px;
    -webkit-print-color-adjust:exact;
}

also tried adding this to the site title but this doesn't affect it at all.

 .site-title {
    .font-droid-sans 
        font-family: 'Droid Sans', sans-serif!important;    
    font-size:30px!important;

I can live with the size but would really like to change the font, but where on earth is that being set to helvetica???!! Current view is this:

Ianhttps://gotts.one-name.net/tng/index.php

Ian

Share this post


Link to post
Share on other sites
cfj
2 hours ago, IanG said:

also tried adding this to the site title but this doesn't affect it at all.

 .site-title {
    .font-droid-sans 

The font family are not available from Google fonts

See if you can find another font-family you like from Google and then import Google Web fonts url.

Regarding the class .site-title try to add this code:

h1 { font-size: 30px!important; float:right!important;}

 

Share this post


Link to post
Share on other sites
IanG

Hi cfj

Tried replacing arial/helvetica/droid with 'Roboto' in the css font family as directed by Googlefonts.   It doesn't change the font, just swaps the arms and text round the other way again and change the font size!  It didn't seem to need importing anywhere if it goes in the css. If I need to import it in html which file do I have to put that in?

Ian

header.jpg

Share this post


Link to post
Share on other sites
cfj

Hi Ian

Have you imported Google web fonts url?

I tried with a different fonts as an example:

Code from your site:

@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');


.normal {
font-family: 'Kaushan Script', cursive;!important;
	font-size: 12px;
}
/* body: describes page background color and all non-table text not governed by any other style ex Genstyle removed helvetica*/
body {
	background-color : #FFFFFF;
	color : #000000;
font-family: 'Kaushan Script', cursive;
	font-size: 12px;
	-webkit-print-color-adjust:exact;
}

/* header: heading text */
/* ig change to size and colour only to 18 and name to title, but doesn't work*/
.header {
	/*next line added in 6.1.0*/
	margin-top: 0px;
	padding: 0px;
	font-size: 18px;
	font-weight: bold;
	color: #545900;
	line-height: 18px;
}

.plainheader {
	margin-top: 0px;
	font-size: 22px;
	font-weight: bold;
}
/* title changing style
-------------IG-changed 19-4 6.54am--added .font droid line-------*/
.mmaintitle, .site-title, .site-title a{font-family: 'Kaushan Script', cursive;!important;}
h1.site-title {font-family: 'Kaushan Script', cursive;!important; font-size: 30px!important; float:right!important;}
.title-area {
float:right!important;
    width:1078px;  }

Screenshot of the page:

 

Screenshot_2019-04-20 Home Page.png

Share this post


Link to post
Share on other sites
IanG

Hi cfj,

Finally got to work. Not sure what happened along the way but the colours disappeared, so I guess the colors section must have got corrupted. This is what I ended up with, the font being sans-serif Roboto and the text left justified in its container, which makes it look more centralised.

https://gotts.one-name.net/tng/index.php

/* */
.mmaintitle, .site-title, .site-title a{font-family: 'Roboto', sans-serif;!important;}
h1.site-title {font-family: 'Open Sans','Roboto', sans-serif;!important;
font-size: 40px!important;}

 

Thanks for your help with this. I don't know if you can answer two more things I have been struggling with or whether you want me to put up a new question: 

1 The Search box text top right colour does not get set in TNG Coloring Book, and I can't find anywhere that appears to do it. Any thoughts?

2 I have been trying to link to a pdf file from text box 3. Should these be in tng/documents or in the template15/media?  It is behnind the word 'Master' at the bottom, and it just says 404 not found. This is the code I have used: <p>This link has the Reference numbers for Gottses in trees. It has a cutoff date of 1920, so for any later dates please contact me.</p><a href=" https://gotts.one-name.net/TNG/documents/Gotts_Names_v30.pdf"> Master </a>

 

Thanks

Ian

Share this post


Link to post
Share on other sites
Brett

Ian

I use 2 side by side windows on occasions. The below is how your site displayed when opened in a width adjusted window. The Title disappeared and is not viewable anywhere on the page.

image.png

 

Share this post


Link to post
Share on other sites
cfj
4 hours ago, Brett said:

The Title disappeared and is not viewable anywhere on the page.

Oops, forgot responsive design, sorry.

Ian, can you try this:

/*Responsive design at the bottom of mytngstyle */
@media only screen and (max-width: 768px) {
h1.site-title {font-size:40px!important;margin-top:100px!Important; }

Play with the code a little bit.

I would recommend  Firefox Web Developer - A great tool to change the css files online and see how it effects your site.

12 hours ago, IanG said:

The Search box text top right colour does not get set in TNG Coloring Book, and I can't find anywhere that appears to do it. Any thoughts?

/*Search box text top right colour*/
.search-menu-item {
color:blue!important;}/*Color black, gray, ligthblue, etc*/

 

12 hours ago, IanG said:

I have been trying to link to a pdf file from text box 3. Should these be in tng/documents or in the template15/media?

You should have all your documents in the folder tng/documents or anywhere else, but not your template folder. You maybe later want to change your theme.

The link to your file works, but you don't have the right path to the file. Your link was set to TNG.

Here are the right path:

<a href=" https://gotts.one-name.net/tng/documents/Gotts_Names_v30.pdf"> Master </a>	

 

Share this post


Link to post
Share on other sites
IanG

Hi cfj,

Thanks for these. mobile mod needed another } but that seems to work now, at least putting it into a tile format for the phone. Glad you remembered that one otherwise I could have been feeling it was all there only to find it was rough on phones! 

/*Responsive design at the bottom cfj mytngstyle to show well on phones- added extra { */
@media only screen and (max-width: 768px) {
    h1.site-title {font-size:40px!important;margin-top:100px!Important;
    }
}

Search colour is great now, with the blue # code for the rest of the top menu.

Lastly, thanks for the info on the href format. I have found that you can just relate it to the TNG root folder, so this works: 

<a href="documents/Gotts_Names_v30.pdf"> MASTER Listshorttitle </a>

How stable that is might be another matter. At least I can get on and sort out the words and links on the Home page.

 

Thanks very much for all your help.

Rgds

Ian

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

×