Text sizing adjustments


#1

Looking to change the default text size and make it smaller, is there a conf file in ghost I can look for to adjust settings in that matter?

please be nice, I am new and searched the forum and could not find :slight_smile: I apologize if I did not search correctly…


#2

You can edit your theme css file to change the text size that appears on your website - the font sizes in Ghost Admin can’t be changed :slight_smile:


#3

thanks, can you recommend the best way to edit?

currently I am seeing text like this

I am in ~/content/themes/casper/assets/built$

looking at screen.css - after changing almost every font size I was able to find the ‘header’ section… but assume I am using a bad text editor, can you recommend a different one?

just to add to my ignorance, when I try to edit the files in the directory below everything is formatted and easier for me to read… but no impact on those files… after editing should I be updating the post or other?

~/content/themes/casper/assets/css


#4

You don’t need to touch that css file if you cant understand the code well. Just open the ghost admin panel then go to the Code Injection and put the css stylesheet there. It would be easier for you i think to override anything on theme


#5

Learn to use the Code Inspector in Chrome. Then it will make more sense.

To give you a good idea, this is how it looks like.

Cheers!


#6

I learned the file to change global text size is below.

~sitename/content/themes/casper/assets/built/screen.css

despite chrome saying it was in global it appears when I changed the font percentage here it had my desired effect, hopefully this helps someone else trying to do what I did.

on a side note, I am just trying out ghost and I absolutely love it. if I could change one thing it would be commenting to add info for noobs like myself.

It is not that I did not understand the code, for some reason the files here seem unformatted in comparison to the files within the ‘css’ folder… the ‘built’ folder files appear unformatted… I am not sure why but I tried emacs/pico/nano as editors and they all had the same result… might be something to look at.

lastly, I am not 100% satisfied with my solution, as I wanted to change the actual size, and in many areas I see references to font-size but the only one that helped appears to be the percentage rather than a specific body section… I would rather ahve changed the ‘2em’ or ‘1.5rem’ (as examples) to something smaller so I know exactly what I am doing rather thana global setting. but it accomplished what I wanted.

thanks again for all of your help!

thank you all for the assistance!


#7

That’s by design - the development workflow involves making changes to css/*, and running a script which uglifies the folder and drops it into built/


#8

Thanks! this is exactly what I was looking to learn.

my server was blocked from internet and yarn commands failing because it was reaching out to the link below… I am sure there are other links but it failed on this one.

http://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz: Request failed “503 Service Unavailable””.

after opening up internet access from the themes directory I was able to run these commands and make changes in the ‘human readable’ css files then compile into the ‘built’ directory.

side note: should I ahve two terminals open and have yarn dev running and then edit the files while it is running for it to auto-update?

or should I be running yarn dev after I complete? looking to learn the ‘best practice’ here or recommended from someone with experience.

Thank you again @vikaspotluri123


#9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.