How do I change the color of the Offline Background.

Hello,

I wanted to know how to change the background color of the offine page, please see attachment.

Find File: \templates\gk_penguinmail\css\system\offline.css
Find Line: 10 which is below

Code: Select all

fieldset { width: 522px; border:none; padding:0; margin:0 auto; }


Add before that line following css and change color to your requirements.

Code: Select all

body { background:#777; }


So final code looks as below

Code: Select all

# Website: http://www.gavick.com
# Support: [email protected]
*/
body { background:#777; }
fieldset { width: 522px; border:none; padding:0; margin:0 auto; }


See you around...

Find File: \templates\gk_penguinmail\css\system\offline.css
Find Line: 10 which is below

Code: Select all

fieldset { width: 522px; border:none; padding:0; margin:0 auto; }


Add before that line following css and change color to your requirements.

Code: Select all

body { background:#777; }


So final code looks as below

Code: Select all

# Website: http://www.gavick.com
# Support: [email protected]
*/
body { background:#777; }
fieldset { width: 522px; border:none; padding:0; margin:0 auto; }


See you around...

Thank you, it worked. You folks are awesome.

Find File: \templates\gk_penguinmail\css\system\offline.css
Find Line: 10 which is below

Code: Select all

fieldset { width: 522px; border:none; padding:0; margin:0 auto; }


Add before that line following css and change color to your requirements.

Code: Select all

body { background:#777; }


So final code looks as below

Code: Select all

# Website: http://www.gavick.com
# Support: [email protected]
*/
body { background:#777; }
fieldset { width: 522px; border:none; padding:0; margin:0 auto; }


See you around...

Thank you, it worked. You folks are awesome.

Oh one more question, how do I create a block/area underneath the footer and footer nav area. See attachment.

This would require changes in template files in php codes. If you are ok with this i ll post a solution tomorrow morning.

See you around...

This would require changes in template files in php codes. If you are ok with this i ll post a solution tomorrow morning.

See you around...

Thats ok with me, I will for your response in the morning. Also while you are at it please see if you can tell me how to upload a Sqiurrell font kit for the templates-see attachment.

This would require changes in template files in php codes. If you are ok with this i ll post a solution tomorrow morning.

See you around...

Thats ok with me, I will wait for your response in the morning. Also while you are at it please see if you can tell me how to upload a Sqiurrell font kit for the templates-see attachment.

For adding background color please use following in override.css, change color to your requirements.

Code: Select all

#gkFooter { background: #000; }


For adding second module in the middle between footer nav and copyrights please follow below modification. Please write these mods to a text file so you can apply them again in case you update your template.

1. Adding code in to php file.
Find File : \templates\gk_penguinmail\layouts\blocks\footer.php
Find Lines: 9 to 13 which is below

Code: Select all

   <?php if($this->modules('footer_nav')) : ?>
   <div id="gkFooterNav">
      <jdoc:include type="modules" name="footer_nav" style="<?php echo $this->module_styles['footer_nav']; ?>" />
   </div>
   <?php endif; ?>


Replace with below

Code: Select all

   <?php if($this->modules('footer_nav')) : ?>
   <div id="gkFooterNav">
      <jdoc:include type="modules" name="footer_nav" style="<?php echo $this->module_styles['footer_nav']; ?>" />
   </div>
   <?php endif; ?>
   <?php if($this->modules('footer2')) : ?>
   <div id="gkFooter2">
      <jdoc:include type="modules" name="footer2" style="<?php echo $this->module_styles['footer2']; ?>" />
   </div>
   <?php endif; ?>


2. Adding new position in to xml file.
Find File: \templates\gk_penguinmail\templateDetails.xml
Find Line: 67 which is below

Code: Select all

      <position>footer_nav</position>


Replace with below

Code: Select all

      <position>footer_nav</position>
      <position>footer2</position>


3. Adding new position in to gk library.
Find File: \templates\gk_penguinmail\lib\framework\gk.const.php
Find Line: 23 which is below

Code: Select all

   'footer_nav' => 'none',


Replace with below

Code: Select all

   'footer_nav' => 'none',
   'footer2' => 'none',


4. Adding following css in your override.css

Code: Select all

#gkFooter2 { float: left; margin-top: 0; }


Now Footer2 position is selectable from modules page when adding new modules or editing existing ones.

See you around...

For adding Squirrel fonts please follow below steps.

1. Browse to http://www.fontsquirrel.com to get a font kit. For this example i will be using TitilliumText font. Link is http://www.fontsquirrel.com/fonts/TitilliumText

2. This font has following styles. This is important as we can't load all styles at once as we cannot make a selection via template settings. So we will need to delete all but one and use that one in our template & example.



3. Click on "@font-face Kit"



4. Click on "Download@font-face Kit"



5. Save the file in your computer.


6. Extract the contents of the file. In our example i have a folder called "TitilliumText-fontfacekit".


7. Rename the folder "TitilliumText" getting rid of "-fontfacekit".


8. Find "stylesheet.css" inside the folder and open it with your favorite editor.

9. You will see codes similar to below. As our style had 6 different styles there are 6 blocks of similar codes inside this css file. So we will be only using one of these styles as described in Step 2. So please delete rest of the css blocks. So my stylesheet.css ends up as below. Save and close the file.

Code: Select all

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 25, 2012 03:42:46 AM America/New_York */

@font-face {
    font-family: 'TitilliumText';
    src: url('TitilliumText22L005-webfont.eot');
    src: url('TitilliumText22L005-webfont.eot?#iefix') format('embedded-opentype'),
         url('TitilliumText22L005-webfont.woff') format('woff'),
         url('TitilliumText22L005-webfont.ttf') format('truetype'),
         url('TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg');
    font-weight: normal;
    font-style: normal;

}


10. So my selected style uses "TitilliumText22L005" named files in this folder. So i delete the rest and only keep following files.

Code: Select all

demo.html
SIL Open Font License 1.1.txt
stylesheet.css
TitilliumText22L005-webfont.eot
TitilliumText22L005-webfont.svg
TitilliumText22L005-webfont.ttf
TitilliumText22L005-webfont.woff


11. Now our folder is ready to be copied to our template folder.

So copy "\TitilliumText\" folder in to "\templates\gk_penguinmail\fonts\" so final result is "\templates\gk_penguinmail\fonts\TitilliumText"

12. Now our font is ready to be selected from template settings > Fonts tab.



13. Final Results.



See you around...

For adding Squirrel fonts please follow below steps.

1. Browse to http://www.fontsquirrel.com to get a font kit. For this example i will be using TitilliumText font. Link is http://www.fontsquirrel.com/fonts/TitilliumText

2. This font has following styles. This is important as we can't load all styles at once as we cannot make a selection via template settings. So we will need to delete all but one and use that one in our template & example.



3. Click on "@font-face Kit"



4. Click on "Download@font-face Kit"



5. Save the file in your computer.


6. Extract the contents of the file. In our example i have a folder called "TitilliumText-fontfacekit".


7. Rename the folder "TitilliumText" getting rid of "-fontfacekit".


8. Find "stylesheet.css" inside the folder and open it with your favorite editor.

9. You will see codes similar to below. As our style had 6 different styles there are 6 blocks of similar codes inside this css file. So we will be only using one of these styles as described in Step 2. So please delete rest of the css blocks. So my stylesheet.css ends up as below. Save and close the file.

Code: Select all

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 25, 2012 03:42:46 AM America/New_York */

@font-face {
    font-family: 'TitilliumText';
    src: url('TitilliumText22L005-webfont.eot');
    src: url('TitilliumText22L005-webfont.eot?#iefix') format('embedded-opentype'),
         url('TitilliumText22L005-webfont.woff') format('woff'),
         url('TitilliumText22L005-webfont.ttf') format('truetype'),
         url('TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg');
    font-weight: normal;
    font-style: normal;

}


10. So my selected style uses "TitilliumText22L005" named files in this folder. So i delete the rest and only keep following files.

Code: Select all

demo.html
SIL Open Font License 1.1.txt
stylesheet.css
TitilliumText22L005-webfont.eot
TitilliumText22L005-webfont.svg
TitilliumText22L005-webfont.ttf
TitilliumText22L005-webfont.woff


11. Now our folder is ready to be copied to our template folder.

So copy "\TitilliumText\" folder in to "\templates\gk_penguinmail\fonts\" so final result is "\templates\gk_penguinmail\fonts\TitilliumText"

12. Now our font is ready to be selected from template settings > Fonts tab.



13. Final Results.



See you around...

Thank you Norman, everything worked.......

No problem at all,

See you around...