Navigation bar on top and footer dimensions

  • Hi to all!


    I fear that my pretensions are rather small, just equivalent to my possibilities and my time spared for technical works with my new web site. I'm already happy with the theme of Pagekit, which helped me to publish some content so easily and quite neat.


    Could you help a only little versed homepage designer in two concrete items?

    1. I want to change the vertical dimension of the navigation bar in the top.

    2. I'D like to do the same with the footer bar, and change it's background color from black to white, like the navigation bar in the top.


    Thanks in advance!

    greylaser

  • I have tried on my theme which is a clone of Pagekit's theme one.


    In Site > Settings > Code > Footer you can add the style you want.


    I tried this code :

    Code
    1. <style>
    2. .tm-footer{
    3. backcolor: red;
    4. }
    5. </style>

    And so the footer became red !


    You can also use the SPQR's Assets extension which also works fine.


    You need to search in your theme the id or the class that you must use.

  • Thank you very much, SPQRInc and f1evm!


    The following code works very well with me:

    Code
    1. <style> .tm-footer{background-color: #ffffff;} </style>


    I just use theme-one and will modify it, where needed. For my purposes, it serves well.


    Thanks to the developers of Pagekit! :) For, by mistake, I deleted the theme-one folder on the web site with Filezilla.

    When removing the second installed theme, Pagekit restored the theme theme-one automatically, including all my changes!

  • May I ask for further help, this time to let me change the dimensions of the navigation bar on top and of the footer bar? I'd like to have the navigation only a little bit higher, and design the footer heighth identical to the navigation bar.


    I do not understand how to find the files or settings for these changes. There is a file "theme.css", containing a lot of definitions, but I'm not sure if I'm allowed to change it, and I will never find the width/heighth for my two sections ...

  • I can help you tomorrow as I am not on my mac at the moment.


    But it is very important that you do not edit the theme.css or other files that are coming with your theme as they will be overwritten if there's an update coming.


    You can do such stuff if you are forking a existing theme and write your own one (but in this case you would have to merge updates manually to your source, so I would not really recommend this for the "little" changes you are planning :) ).



    You can overwrite the theme's css using Site > Settings > Code or you just use my asset-extension (this is more complex, but also more powerful ;) ).


    As I said: I can help you out tomorrow, but maybe the other ones have a solution in the meantime :)

  • In the same manner as the color, you can change the padding (top and left).


    Try this :


    20px is the size of the padding top and bottom. You can put any value you want.


    But be carrefull, the size of the navbar or the footer will depends on their contents.


    You will probably need to write different values for navbar and footer, if you want to get the same size.



    And as said SPQRInc , you must not overwrite the original theme.

    Clone it if you want, or use the Site > Settings > Code or the Assets extension.

  • Thank you very much for your generous and effective help, and for your warnings, SPQRInc and f1evm!


    Now I have tinkered a while, proceeding by trial and error. ;) Look, what made it for me finally:


    Site -> Settings -> Code -> Header:

    Code
    1. <style>
    2. .tm-navbar {background-color: #FFFFFF;
    3. padding-top: 2px; padding-bottom: 2px;}</style>


    Site -> Settings -> Code -> Footer:

    Code
    1. <style>.tm-footer {background-color: #FFFFFF;
    2. border-top: 1px solid #E5E5E5;
    3. padding-top: 2px; padding-bottom: 2px;}
    4. span {font-size: 80%; color: #888888;}
    5. </style>


    Site -> Pages -> Widgets -> "Powered by Pagekit" widget:

    Code
    1. <p><span>Powered by </span>
    2. <a href="https://pagekit.com"><span>Pagekit</span></a><span>,
    3. designed by grey</span>
    4. </p>