Change Body Font Size

TBC · 2018-03-29 03:52:33

I know there is a global way to change the default size of the body font. I have my own css, and I tried changing the size in the Body portion of it with no success. Also, the site does not display the ghost background I would prefer:

Code in css:

body {
background-image: http://www.BCphotoadventures.com/Images … eghost.gif;
background-attachment: fixed;
font-family: Verdana, Helvetica, sans-serif;
font-size: 10pt;
color: #002730;
}

Where have I once again gone astray?

Many thanks, as always,

Daniel Leu · 2018-03-29 04:38:28

TBC wrote:

I know there is a global way to change the default size of the body font. I have my own css, and I tried changing the size in the Body portion of it with no success. Also, the site does not display the ghost background I would prefer:
Code in css:
body {
background-image: http://www.BCphotoadventures.com/Images … eghost.gif;
background-attachment: fixed;
font-family: Verdana, Helvetica, sans-serif;
font-size: 10pt;
color: #002730;
}
Where have I once again gone astray?
Many thanks, as always,

The format for background image is

body {
   background-image: url("paper.gif");
   background-color: #cccccc;
}

Regarding the font size, I would recommend to change it in Backlight. I don't know the text element you would like to change with 'body font'. There are many places on your site that have an increased specificity and therefore your body font size doesn't apply.

rod barbee · 2018-03-29 05:04:35

adding to what Daniel said, the image you're referencing is very small (62 x 57px)

and looking at the pangolin style sheet, the controlling font-size looks like it's set in the html element selector.
you can view the entire applied style sheet by looking at the page source code and clicking on the link in the stylesheet link line.

<link rel="stylesheet" type="text/css" media="all" href="http://pangolin.barbeephoto.com/backlight/publisher/resource.php?template=6&extension=css&name=style" />

Search on font-size you eventually come to this:

html {
	font-size: 16px;
	text-rendering: optimizelegibility;
	-ms-touch-action: manipulation;
	    touch-action: manipulation; /* remove 300ms delay in some browsers */
}

but as Daniel also said, there are areas with more specific css, though I think many of the font-sizes are set by rem and changing the overall font-size at the html element will make changes down the line to things like headings, table text, form text, nav items, as well as other things that use rem for setting sizes.

If you want to change just the basic copy text, then maybe look in to selectors like .the__copy

TBC · 2018-03-29 09:46:28

Thanks to both of you, Daniel and Rod...

Daniel, I changed the code for the background, but as Rod pointed out, the base image is quite small...

rod barbee wrote:

adding to what Daniel said, the image you're referencing is very small (62 x 57px)

Yes, but as with the regtular background, it is meant to be tiled.

Through some hit and miss, I did succeed with the font size -- challenging, since I am used to pt not rem. No matter, I won that round, albeit in a round-about way. I could not find exactly the css in exactly which that pesky (to me) code that you so nice noted resides:

html {
font-size: 16px;
text-rendering: optimizelegibility;
-ms-touch-action: manipulation;
touch-action: manipulation; /* remove 300ms delay in some browsers */
}

Sorry to be such a dunce. Having started out in straight HTML, graduating to php and Dreamweaver long before Adobe gobbled it up, this inspector stuff flummoxes me, although I taught myself html and web design through View Source.

Take care,

Last edited by TBC (2018-03-29 09:47:24)

rod barbee · 2018-03-29 10:28:23

could not find exactly the css in exactly which that pesky (to me) code that you so nice noted resides

That code is in the main style sheet. You can see it by clicking that link I mentioned above.
I’ve copied it and pasted into my text editor and saved it as a .css file. This way I can consult and search it whenever I wish.
Then just use your text editor's search or find function.

this inspector stuff flummoxes me

I've written a couple of tutorials on using the inspector:

http://ttg-tips-and-tricks.barbeephoto. … selectors/

http://ttg-tips-and-tricks.barbeephoto. … ustom-css/

I can also highly recommend CSS: The Missing Manual by David McFarland (just for learning css)

TBC · 2018-03-29 19:48:31

Thanks, Rod. Actually, I have been using css for years. I've been looking for code to make the background tile in the Page Copy area and am not succeeding. I ahve also e-mailed you privately.

Take care,

rod barbee · 2018-03-29 20:55:43

Try background-repeat: repeat;
https://www.w3schools.com/cssref/pr_bac … repeat.asp

Community @ The Turning Gate

#1 2018-03-29 03:52:33

Change Body Font Size

#2 2018-03-29 04:38:28

Re: Change Body Font Size

#3 2018-03-29 05:04:35

Re: Change Body Font Size

#4 2018-03-29 09:46:28

Re: Change Body Font Size

#5 2018-03-29 10:28:23

Re: Change Body Font Size

#6 2018-03-29 19:48:31

Re: Change Body Font Size

#7 2018-03-29 20:55:43

Re: Change Body Font Size

Board footer