How do I change the color of the Offline Background.

GK User
Fri Feb 24, 2012 10:06 am
Hello,

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

GK User
Fri Feb 24, 2012 10:37 am
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...
User avatar
Platinum Boarder

GK User
Fri Feb 24, 2012 5:03 pm
normanUK wrote: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...



:D Thank you, it worked. You folks are awesome.
User avatar
Platinum Boarder

GK User
Fri Feb 24, 2012 5:42 pm
leaseline1 wrote:
normanUK wrote: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...



:D 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.
User avatar
Platinum Boarder

GK User
Sat Feb 25, 2012 1:05 am
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...
User avatar
Platinum Boarder

GK User
Sat Feb 25, 2012 1:19 am
normanUK wrote: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.
User avatar
Platinum Boarder

GK User
Sat Feb 25, 2012 1:31 am
leaseline1 wrote:
normanUK wrote: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.
User avatar
Platinum Boarder

GK User
Sat Feb 25, 2012 9:40 am
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...
User avatar
Platinum Boarder

GK User
Sat Feb 25, 2012 10:13 am
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.

Image

3. Click on "@font-face Kit"

Image

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

Image

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.

Image

13. Final Results.

Image

See you around...
User avatar
Platinum Boarder

GK User
Sat Feb 25, 2012 4:33 pm
normanUK wrote: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.

Image

3. Click on "@font-face Kit"

Image

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

Image

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.

Image

13. Final Results.

Image

See you around...





:woohoo: Thank you Norman, everything worked....... :)
User avatar
Platinum Boarder

GK User
Sun Feb 26, 2012 12:20 pm
No problem at all,

See you around...
User avatar
Platinum Boarder


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.