Google fonts
Permalink
Hi there, I have used your theme to create the sitehttp://braypropertymanagement.co.nz/...
I have made a couple of modifications but have some questions bwlow I was hoping you could help with:
1. Google fonts
My client wants to change the header font from Belegrano to Cinzel.
I have seen in typography.css there is reference to Belegrano and have simply changed this out with Cinzel, is this the correct way to do this? (I can t find the code <link href='http://fonts.googleapis.com/css?family=Belegranol' rel='stylesheet' type='text/css'> in the other documents to alter font family).
.c5wrap h1 {
/* customize_h1 */ font: normal normal 36px Cinzel; /* customize_h1 */
/* customize_h1 */ color:#000; /* customize_h1 */
margin-bottom: 20px;}
The Cinzel font is displaying on my system, tested in Firefox and IE, though clients fonts are default as Times Roman. Screenshots attached.
2. Sidebar width
He also wants to edit the width of the sidebar, I have changed:
.c5wrap .sidebar {
width: 300px }
but it doesn't seem to alter width. Is there somewhere else in the style.css that I can amend the width value?
I hope these are simple questions to answer! Thank you in advance!
Tina
I have made a couple of modifications but have some questions bwlow I was hoping you could help with:
1. Google fonts
My client wants to change the header font from Belegrano to Cinzel.
I have seen in typography.css there is reference to Belegrano and have simply changed this out with Cinzel, is this the correct way to do this? (I can t find the code <link href='http://fonts.googleapis.com/css?family=Belegranol' rel='stylesheet' type='text/css'> in the other documents to alter font family).
.c5wrap h1 {
/* customize_h1 */ font: normal normal 36px Cinzel; /* customize_h1 */
/* customize_h1 */ color:#000; /* customize_h1 */
margin-bottom: 20px;}
The Cinzel font is displaying on my system, tested in Firefox and IE, though clients fonts are default as Times Roman. Screenshots attached.
2. Sidebar width
He also wants to edit the width of the sidebar, I have changed:
.c5wrap .sidebar {
width: 300px }
but it doesn't seem to alter width. Is there somewhere else in the style.css that I can amend the width value?
I hope these are simple questions to answer! Thank you in advance!
Tina
Sorry, also should note I have installed Cinzel on my system when proofing site design for client preview, so perhaps is why it displays at my end...
Hi Tina,
Yes, you are correct, you need to change all instances of the old font to the new in typography.css, and again as you rightly pointed out you will need to add the font reference into the header, so this link:
<link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'>
will need to go in the following location:
/packages/theme_elegancia_onyx/themes/theme_elegancia_onyx/inc/header.php
In header.php on line 15 you should see the reference to Belgarno, just swap that out for your new font, you will also need to do this for sub_header.php too, as the sub pages use a different header.
You are correct about the font showing up on your machine too, if its installed locally it will work like any other font. I would also suggest clearing your/clients concrete5 and browser cache after you make the changes as Concrete5 caches quite aggressively.
Hope that helps
Regards
David
Yes, you are correct, you need to change all instances of the old font to the new in typography.css, and again as you rightly pointed out you will need to add the font reference into the header, so this link:
<link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'>
will need to go in the following location:
/packages/theme_elegancia_onyx/themes/theme_elegancia_onyx/inc/header.php
In header.php on line 15 you should see the reference to Belgarno, just swap that out for your new font, you will also need to do this for sub_header.php too, as the sub pages use a different header.
You are correct about the font showing up on your machine too, if its installed locally it will work like any other font. I would also suggest clearing your/clients concrete5 and browser cache after you make the changes as Concrete5 caches quite aggressively.
Hope that helps
Regards
David
Thanks David
I did this and had it all working, though client also wanted a google font for the main body that he has since decided against. I changed the code in typography.css back to arial and it still displayed the google font. I cleared the cache in both C5 and my browser, also tested in another browser, still not luck. So I went to Dashboard > Pages and Themes > 'My Theme' > Customise and tried changing there. No luck. So I pressed the reset button (in Customise theme) and despite Belgrano no longer being in the header.php or subheader.php or typography.css it has defaulted to Belgrano!
For your reference I have attached the relevant files.
I am really stumped, it seems like it should be straightforward but is being overridden by the customize option.
Thank you in advance!
Tina
I did this and had it all working, though client also wanted a google font for the main body that he has since decided against. I changed the code in typography.css back to arial and it still displayed the google font. I cleared the cache in both C5 and my browser, also tested in another browser, still not luck. So I went to Dashboard > Pages and Themes > 'My Theme' > Customise and tried changing there. No luck. So I pressed the reset button (in Customise theme) and despite Belgrano no longer being in the header.php or subheader.php or typography.css it has defaulted to Belgrano!
For your reference I have attached the relevant files.
I am really stumped, it seems like it should be straightforward but is being overridden by the customize option.
Thank you in advance!
Tina
Hi Tina,
I have just had a look at the site, and its displaying the main body font as Ariel to me, but as you said its still showing Belgrano for headings, my guess is that this is still cached, I know you said you cleared both your browser cache and C5 cache, but I would still be inclined to believe this is a cache issue, C5 caches very aggressively and its plenty difficult to shake it off.
I usually disable the cache while i'm developing, if you go to:
dashboard > systems & settings > opimization > cache and speed settings
if you turn the basic cache and the full page cache off, and also set the timer to clear the cache something like every 1 minute or so, that should stop C5 cacheing so brutally.
If you are still continue to have an issue please send me over some FTP details and some site login details in a PM and I will take a closer look for you.
Regards
David
I have just had a look at the site, and its displaying the main body font as Ariel to me, but as you said its still showing Belgrano for headings, my guess is that this is still cached, I know you said you cleared both your browser cache and C5 cache, but I would still be inclined to believe this is a cache issue, C5 caches very aggressively and its plenty difficult to shake it off.
I usually disable the cache while i'm developing, if you go to:
dashboard > systems & settings > opimization > cache and speed settings
if you turn the basic cache and the full page cache off, and also set the timer to clear the cache something like every 1 minute or so, that should stop C5 cacheing so brutally.
If you are still continue to have an issue please send me over some FTP details and some site login details in a PM and I will take a closer look for you.
Regards
David
Thanks David
I will PM you as my cache settings were already all off, though I have changed cache time as per your suggestion.
Thanks for taking a look, I expect is a pain but I appreciate your support :)
Tina
I will PM you as my cache settings were already all off, though I have changed cache time as per your suggestion.
Thanks for taking a look, I expect is a pain but I appreciate your support :)
Tina
Hi Tina,
I have been on the site and had a poke around, I could see in the actual files that the font names had been changed fine, so I went to customise and reset the theme, and bingo it swapped over to your new font straight away, is it possible that after clicking reset you forgot to click save? its an easy mistake to make as the preview window shows the changed state but reverts if save isn't hit.
I did notice that you changed the text colour, and obviously that has reverted back to the original color, I didn't want to alter it again, in case I didn't get the correct shade, so sorry about that, it shouldn't take long to change back though.
I had a look at the promo area, and tbh it looks fine to me (screenshot attached), I use Chrome on a Mac, so it may be a cross browser thing, if you let me know what you are using browser wise I can check it out, if you have a screenshot of the kooky behaviour that would be great too.
Regards
David
I have been on the site and had a poke around, I could see in the actual files that the font names had been changed fine, so I went to customise and reset the theme, and bingo it swapped over to your new font straight away, is it possible that after clicking reset you forgot to click save? its an easy mistake to make as the preview window shows the changed state but reverts if save isn't hit.
I did notice that you changed the text colour, and obviously that has reverted back to the original color, I didn't want to alter it again, in case I didn't get the correct shade, so sorry about that, it shouldn't take long to change back though.
I had a look at the promo area, and tbh it looks fine to me (screenshot attached), I use Chrome on a Mac, so it may be a cross browser thing, if you let me know what you are using browser wise I can check it out, if you have a screenshot of the kooky behaviour that would be great too.
Regards
David
Regarding the sidebar, adjusting the line in the style:
should adjust the width, it will however eventually collide with the main content area, and push below the main content so you will also need to adjust that area too, the css is together in the stylesheet style.css as below, on line 99:
Regards
David
.c5wrap .sidebar { width: 300px; }
should adjust the width, it will however eventually collide with the main content area, and push below the main content so you will also need to adjust that area too, the css is together in the stylesheet style.css as below, on line 99:
.c5wrap .main_inner { width: 600px; float: left; } .c5wrap .sidebar { width: 300px; }
Regards
David