Forums

Changing Fonts in Add-ons 5.7

Permalink
Hi,

How I can chage Font types in diferent blocks, for example, page list block, or autonav block? I can see that is posible to change color, size and other properties, but I don't have option to change to other Font type.

Is posible to change Font types for individuals add-ons?

Thanks,
 
siton replied on at Permalink Reply
siton
99% of the times the font of the block (Page List output for example) is the font from the "theme level". H1-6, p, ul, li and so on will use the CSS text setting from "theme level" (or browser deafult font if you dont set any font in your theme).

In other words : In "page-list" or "autoNav" you dont have any css style setting the font (view.css or view.php: external/inline/Internal style sheet).

If you want to set specific font learn in google/youtube about "font-face" and "font-family"
(combine of loading asset and/or use system fonts + and selectors)
Entire site:
html {
    font:  "Helvetica Neue";
}
Or very specific:
ul li .wow p a {
    font:  "Helvetica Neue";
}

Learn about:
- Font-Family:http://www.w3schools.com/cssref/pr_font_font-family.asp...
- FontFace :https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face...
Look also at "google fonts".

Code examples:
http://codepen.io/machal/pen/aLeGg...
http://codepen.io/sercaneraslan/pen/nHvlC...

"TUTURIAL" (Again! its better to set global font in "theme level")
Add this style inside "custom template " page list : view.php (or : view.css)
<style>
p.test {
  font-family: 'DroidSerif', sans-serif;
  display: inline-block;
  padding: 1em;
  margin: 1em;
  background: #b3e888;
  font-size: 2em;
}
@font-face {
  font-family: 'DroidSerif';
  src: url('http://www.vzhurudolu.cz/data/assets/droid-serif/droidserif-webfont.eot'); 
}   
</style>
<p class="test">Hello new font</p>

Output "hello new font" in "DroidSerif" font
gmurillo replied on at Permalink Reply
Thanks for your answer.

Bad News, I don't believe that is imposible to change the Font of individuals parts of the site.

:(

Regards,
siton replied on at Permalink Reply
siton
Why not?
gmurillo replied on at Permalink Reply
Because you said:

"In other words : In "page-list" or "autoNav" you dont have any css style setting the font (view.css or view.php: external/inline/Internal style sheet). "

Then for do changes, is necesary to do a copy of desired block, ie, a new block? And change the fonts with the method that you explain.

Then I understand, for the future I lost any upgrades to this blocks?

Regards,
siton replied on at Permalink Reply
siton
BIG NOOOOOOOOOO!! You work on "application" folder (duplicate "empty" structure of "/concrete". So any time you can update your site without lost your changes).

Look at the docs. you can create "custom template" (inside "application") and change only the view (The design, style, markup and so on) add css/js (In the future you can add this "custom template" to package but for now "copy & paste" if you want this template in more than one site).

See the links. Search on google or C5 docs for more docs

https://www.youtube.com/watch?v=yjqkZiwcNNE...

https://www.youtube.com/watch?v=xI8dUNAc6fU...

http://c5hub.com/learning/create-your-own-concrete5-block-custom-te...

Advanced example + video:
http://documentation.concrete5.org/developers/working-with-blocks/w...

If you work with elemental use this (read the description):
https://www.concrete5.org/marketplace/themes/cloneamental...
gmurillo replied on at Permalink Reply
Thanks for your patience. :) I will see the videos and try to do the changes. Regards!
ob7dev replied on at Permalink Reply
ob7dev
Without touching any code you could override CSS styles for a page by adding an HTML block and the pasting in the CSS code, just make sure you wrap the css in a <style> tag.
gmurillo replied on at Permalink Reply
It Works for the specific block of HTML with the ccs included, but not affect any other block in the page.
Gondwana replied on at Permalink Reply
Gondwana
This surprises me. I'm wondering whether there's some CSS class specificity issues coming into play. Try finding out what's over-riding your CSS using a browser's developer tools.