Jump to content

Five: targeting the banner image text overlay style in css

Recommended Posts

Hi thereI've loaded in some custom fonts to my site via css. The style I wish to use this font in is the text that overlays on the banner images at the top of each page in the template called Five.I understand that the other styles have names such as h1, h2 etc etc.

What is the style name for the text overlay on banners called in the css?

Thank you

Link to comment
  • Replies 8
  • Views 4.1k
  • Created
  • Last Reply

I use rules like the following for that purpose:


#page-title {width: 290px; background-color: #d92414;
     padding-left: 10px; padding-right: 10px; margin-right: 0 !important;}

#page-description p {background-color: #025928; padding-left: 5px; padding-right: 5px;}

In my case I'm just after some background to make the text more readable.

Link to comment

For people who don't use your template to help, you need to give the url to your site.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

This is what I have used to try to get the Notera font to be the font used for the banner headers that overlay on the banner images. It's all in Design > Custom CSS. It's not working so far but hopefully just needs a small tweak to get it to work...

@font-face {font-family: 'Notera'; src: url('//static1.squarespace.com/static/55b4a361e4b085d388b66c34/t/56565d14e4b022a250f38f73/1448500500816/Notera.otf'), url('//static1.squarespace.com/static/55b4a361e4b085d388b66c34/t/56565d44e4b022a250f390a8/1448500548748/Notera.ttf'), url('//static1.squarespace.com/static/55b4a361e4b085d388b66c34/t/565b94cee4b0c6e18e4cca94/1448842446649/Notera.woff'); font-weight: 400;}

h1.page-title{ font-family: 'Notera'; font-weight: 400; }

Link to comment

Copy and paste into Design > Custom CSS:


#page-title {  font-family: "My Custom Font";}

Substitute the name of your custom font for the text My Custom Font. Font names with spaces in them must be enclosed in quotes; names that are a single word need not be. I believe font names are case sensitive.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.