Jump to content


Photo
- - - - -

how to specify different font within header


  • Please log in to reply
7 replies to this topic

#1 tiltcreative

tiltcreative

    Advanced Member

  • Members

  • 63 posts
  • LocationCanada
  • Country: Country Flag

Posted 07 October 2013 - 05:51 PM

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!



#2 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 07 October 2013 - 07:12 PM

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>



#3 tiltcreative

tiltcreative

    Advanced Member

  • Members

  • 63 posts
  • LocationCanada
  • Country: Country Flag

Posted 07 October 2013 - 07:17 PM

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.



#4 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 07 October 2013 - 07:39 PM

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.pageline...l-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?



#5 tiltcreative

tiltcreative

    Advanced Member

  • Members

  • 63 posts
  • LocationCanada
  • Country: Country Flag

Posted 07 October 2013 - 11:40 PM

That looks pretty useful, thanks!



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 08 October 2013 - 12:50 AM

Please let us know if you need additional assistance.



#7 tiltcreative

tiltcreative

    Advanced Member

  • Members

  • 63 posts
  • LocationCanada
  • Country: Country Flag

Posted 17 October 2013 - 11:42 PM

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!



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 16247 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 October 2013 - 09:08 AM

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>