Format Tagline Font

NevTec · 2020-04-16 12:37:10

Hello

I use the Bellefair font for my logo Piktour in my Home page Template for use on my Home page:

https://www.piktour.uk/home/

When I put a Tagline under it Backlight uses the same font although slightly smaller.

I don't want the same font in the Tagline, is there somewhere I can format it?

.....

NB. At the moment I use the Home pages Main Copy text to drop in the Tagline but I would like to use that Text below the Album.....as per the problem I'm having in my 'Galleries Main Copy Text not showing up' post:

http://community.theturninggate.net/vie … p?id=11547

.....

Thanks

rod barbee · 2020-04-16 13:05:41

Tag line font can likely be changed with custom css

NevTec · 2020-04-17 11:53:43

I've never used css but now's a good time to learn.

I see several css folders in the backend.....can you tell me which file needs to be edited so I can play around with it.

NevTec · 2020-04-17 12:27:17

It's OK I found your article on TTG Tips - How about text above and below a gallery?:

https://ttg-tips-and-tricks.barbeephoto … a-gallery/

I'll see if I can get my head around that first

Thanks

Last edited by NevTec (2020-04-17 12:28:39)

rod barbee · 2020-04-17 13:17:50

NevTec wrote:

I've never used css but now's a good time to learn.
I see several css folders in the backend.....can you tell me which file needs to be edited so I can play around with it.

No need to edit any existing files. I’d suggest creating a new custom css file: http://backlight.theturninggate.net/doc … tylesheets
Be sure to use a plain text or a code editor.

rod barbee · 2020-04-17 13:29:53

NevTec wrote:

It's OK I found your article on TTG Tips - How about text above and below a gallery?:
https://ttg-tips-and-tricks.barbeephoto … a-gallery/
I'll see if I can get my head around that first
Thanks

You can change the tag line font rather than having to use the page copy.
In your custom css:

span.site__tagline {
font-family: your-font;
}

If the font you want to use is not a standard font that is installed on most computers then you’ll also need to include the font on your site:
https://ttg-tips-and-tricks.barbeephoto … ight-site/

NevTec · 2020-04-19 12:39:39

I have tried your css in piktour.css and it has no effect on the tagline.

Tagline has been removed as it doesn't work at the moment.

rod barbee · 2020-04-19 13:21:07

If you set it back up and give us a link, we can take a look.
Syntax errors can happen, the font family name may not be correct, or there could be other issues. But we can’t help unless we have something to see.

NevTec · 2020-04-20 12:43:02

Hello Rod

piktour.css:

/**
* CHANGE TAGLINE FONT THROUGHOUT THE SITE

span.site__tagline {
font-family: arial;
font-style: italic;
font-size: 20px;
}

Setup on Home page now:

https://www.piktour.uk/home

Thanks

rod barbee · 2020-04-20 13:53:52

Currently, your site shows that it's using the custom-sample.css file.
(However, clicking on the link to it in the page source code goes to the Backlight login screen source code. Not sure why.)

Anyway, go back to your page template Advanced Setup and make sure you’re using the correct css file.

NevTec · 2020-04-21 12:23:25

OK correct css applied which has changed the font & font style but font weight and font size are ignored.

There must be something else overriding it.

rod barbee · 2020-04-21 13:45:49

Try this as the selector:

.masthead-primary .site__tagline

NevTec · 2020-04-21 13:57:16

Hello Rod

Thanks for the update.

That sorts the font out but stops the Las Vegas Slideshow

NevTec · 2020-04-21 14:08:23

After a few refreshes Las Vegas seems to be running now.

Is it possible to reduce the space between the Masthead Piktour logo and the Tagline?

rod barbee · 2020-04-21 22:42:02

you can probably move the "tagline" close enough by actually using the tagline instead of using the page copy area.
You can style the tagline with custom css:

.masthead-primary .site__tagline {
		font-family: arial;
	}

And the html you're using in the page copy is deprecated and shouldn't be used.
"align" is deprecated. The <font> tag is deprecated.
Instead, try inline styling:

<div style="text-align:center; font-family:arial;">
<h3>LATEST PHOTOGRAPHS</h3>
<p>Impressions of the Atacama - See Galleries > Impressions > Chile</p>
</div>

(though it looks like your main font is already set to be arial, so I don't think you need to add it)

Community @ The Turning Gate

#1 2020-04-16 12:37:10

Format Tagline Font

#2 2020-04-16 13:05:41

Re: Format Tagline Font

#3 2020-04-17 11:53:43

Re: Format Tagline Font

#4 2020-04-17 12:27:17

Re: Format Tagline Font

#5 2020-04-17 13:17:50

Re: Format Tagline Font

#6 2020-04-17 13:29:53

Re: Format Tagline Font

#7 2020-04-19 12:39:39

Re: Format Tagline Font

#8 2020-04-19 13:21:07

Re: Format Tagline Font

#9 2020-04-20 12:43:02

Re: Format Tagline Font

#10 2020-04-20 13:53:52

Re: Format Tagline Font

#11 2020-04-21 12:23:25

Re: Format Tagline Font

#12 2020-04-21 13:45:49

Re: Format Tagline Font

#13 2020-04-21 13:57:16

Re: Format Tagline Font

#14 2020-04-21 14:08:23

Re: Format Tagline Font

#15 2020-04-21 22:42:02

Re: Format Tagline Font

Board footer