• 0

how to specify different font within header

Question

Posted · Report post

I am doing a page with names and titles. I'd like to use the h3 header for the name but have the title appear right underneath in a different font and size. I have added a new style called '.smaller' which adjusts the size, but I am not sure how to make the font appear in the regular text style, as opposed to the h3 style. How would I do this without specifying a specific font, so it uses whatever I've selected in the fonts panel?

 

I have set it up in html like this, so I just need to change the .smaller style:

 

 

<h3 >Person's name
<strong class="smaller">Chairman and Director</strong></h3>

 

thanks for your help!

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

Hi tiltcreative - If you make a small change to your code as follows I believe you'll achieve the look you're going for:

 

<h3>Person's name</h3>

<strong>Chairman and Director</strong>

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks, I did that first but there's too much space in between, so I wanted to get them closer together without changing the spacing of the h3 throughout.

 

Could you tell me how to specify the default font styles though, without specifying specific fonts?  I've asked before but couldn't find it.  As I understand there is one font selector for the headers and another for the body text. it was something like 'default1 and default 2' which would then use the font that was each set of text.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi tiltcreative - If it's the margin that's getting you down, check out the .zmb class which you could use like this to remove the bottom margin:

 

<h3 class="zmb">Person's name</h3>

<strong>Chairman and Director</strong>

 

More information at http://docs.pagelines.com/tutorials/html-css-utilities.

 

I'm not sure I understand your second question. You can specify font sizes, colors and weight via the DMS visual editor under Global Options. Beyond that, can you give us a little more info about what you're looking to accomplish?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That looks pretty useful, thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Please let us know if you need additional assistance.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I am curious how you add these little classes to a title in wordpress, do you just put the <small>  </small> right into the title section?

 

thanks again!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If I understand what you're trying to do, then what I would do is add a Page title to the title area of the Page editor in Wordpress, then hide the Page title from displaying. Then in the actual editor, use HTML to add the pages title. For example:

<div class="page-header">
<h1>Title <small>Subtext Blah Blah Blah Blah!</small></h1>
</div>

If you want to use a specific font for the subtext (again not entirely sure what it is you're trying to achieve, so just guessing). What you will need to do is create a custom class, for that class assign a custom font. apply that class to your code for example.

 

.custom-font { font-family : ; }

 

Then apply that class to your code for example.

 

<div class="page-header">
<h1>Title <span class="custom-font"><small>Subtext Blah Blah Blah Blah!</small></span></h1>
</div>

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