Jump to content

Archived

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

nandorj78

Changing fonts

Recommended Posts

nandorj78

How would I change font styles (type, color, face...) for post titles only using PL5?

Share this post


Link to post
Share on other sites
batman

Hi nandorj78

Please, you can add this CSS rule to your child theme (for example in magazine title)

.pl-sn-magazine .pl-mag-post-pad .mag-info .title {
margin-top: .8em;
font-size: 1.2em;
font-weight: 800;
line-height: 0em;
letter-spacing: -0.05em;
color: red;
font-family: arial;
font-style: oblique;
}

You take a look to the image

http://screencast.com/t/pyK5scnFH63s

Saludos 
Carlos

 


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
nandorj78

Ok, I did what you said and some weird things happened.

The font for featured post titles did not change and the other posts changed; however they look weird. Check: 

 

weirdfont.JPG

Share this post


Link to post
Share on other sites
chrisayers

To make a neat bootstrap loops section try this:

  1. Go To Settings Advanced . Paste this in your additional head tags.  
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  2. Now you have bootstrap again.
  3. Next put a loops shortcode on a page and publish it.
  4. Go to front side and edit loops making it read width like you like.
  5. Next in the loops shortcodes area in editor. Paste this code replacing their shortcodes.

    <div class="well">
    <div class="media">
    <div class="pull-left">
    [loops_media size="aspect-thumb"]
    </div>
    <div class="media-body">
    <h4 class="media-heading">[loops_title]</h4>
    <p class="text-right">By [loops_author]</p>
    <p>[loops_excerpt length="40"]</p>
    [loops_link]
    <ul class="list-inline list-unstyled">
    <li><span><i class="glyphicon glyphicon-calendar"></i> [loops_date] </span></li>

    </ul>
    </div>
    </div>

  6. Save changes and refresh your page. That will turn your loops page into what is really close to post pins.
  7. Take the well div out of top. Now it wont be grey.

This is a very simple explanation of how to build what you want with loops, css, and bootstrap.

Share this post


Link to post
Share on other sites
nandorj78

I knew it would get complicated hehehe 

Let's say I want one font for H2 and a different one for the rest of the site.

The procedure to have different fonts in one site is always like this?

Or just to differentiate H1 and H2 fonts? 

Share this post


Link to post
Share on other sites
chrisayers

As a general rule of thumb all H tags are generally the same color/font. You will have to go back to a mixture of mine and Batmans help to make each one different.

Share this post


Link to post
Share on other sites
nandorj78

Great help, as always. I think I managed to do what I wanted :)

 

Thank you!

Share this post


Link to post
Share on other sites
chrisayers
11 minutes ago, batman said:

Hi chrisayers+

Excellent you website ! !

http://worldwebscapes.com

Regards 
Carlos

Thanks Batman. Just like any web guy. My site is generally not my best cause I never have time to update it.

Share this post


Link to post
Share on other sites
batman
Quote

Thanks Batman. Just like any web guy. My site is generally not my best cause I never have time to update it.

In my country we tell

"Blacksmith home ....
wooden knife"

hahahaha

Regards chrisayers+

 


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I'm using the following typography configuration in Pagelines Settings:
      <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
      font-family: 'Open Sans', sans-serif;
      But Lato is still being loaded according to Google Page Speed. Do you know how I can prevent Lato from being loaded if I'm not using it?
      Thanks
      Michael
    • nandorj78
      By nandorj78+
      I got an error when activating the 'signup' PageLines plugin
      Plugin could not be activated because it triggered a fatal error. Parse error: syntax error, unexpected T_STRING in /home2/fernand7/public_html/brucefans/wp-content/plugins/pl-plugin-signup/pl-plugin-signup.php on line 204  
    • David Shelton
      By David Shelton+
      I use Adobe's Fonts.com for specific branded fonts for our site, and it's working nicely on Chrome and Firefox. However, the fonts all default in Safari. Is there anything I need to look at?
      http://madeintheshadeblindsfranchising.com
    • nandorj78
      By nandorj78+
      My site was activated, but today I changed its url (it was on a test environment and now it's got a domain) and then my account was disconnected. I connected it again but it says I'm using the free version. Is it some kind of bug or I really need to spend another activation key?
    • JudithKlinger
      By JudithKlinger+
      I'm currently staging a site: http://www.staging1.w-edigest.org/?page_id=84&preview=true
      I couldn't get the fonts to 'take' on the Site Settings > Typography page and then found this message in the Google developer view: Font from origin 'http://www.w-edigest.org' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.staging1.w-edigest.org' is therefore not allowed access.
      How & where do I fix this? 
       
      Thank you! 
×