Work at SourceForge, help us to make it a better place! We have an immediate need for a Support Technician in our San Francisco or Denver office.

Close

Header logo & font changes

Help
2011-10-04
2012-07-13
  • dariusz.jozwik
    dariusz.jozwik
    2011-10-04

    Hi,

    1. Is there a way to change the size of the logo area? I would like to include a wider image in the header but only a part of it is being shown.

    2. Where in the source code can I find lines responsible for fonts in upper and left navbar? I wanted to make them smaller than the article text.

    Thanks a lot for answering these questions,
    Dariusz Jozwik

     
    • Is there a way to change the size of the logo area? I would like to include a wider image in the header but only a part of it is being shown.

      Yes, this is possible by editing template.css. Open template.css and go to line 31. You can then make the logo area larger as follows:

      #header h1 a {
          display: block;
          height: 58px;
          width: 300px;
      }
      

      Notice that I added "width: 300px;" which makes the area wider.

      Where in the source code can I find lines responsible for fonts in upper and left navbar? I wanted to make them smaller than the article text.

      You already gave the right answer below.

       
      Last edit: Serrano Pereira 2011-11-07
    • And if you want to move the site name (in the header) more to the right, you need to edit main.css line 85. Just set "text-indent: 1.7em;" to a higher value to move it more to the right.

       
  • dariusz.jozwik
    dariusz.jozwik
    2011-10-06

    Okey, I've managed to make the font smaller - edited template.css and changed font-size to x-small in "#header" ul a and "#nav".
    Still having problems with logo area though.

    And another question - I wanted to make left navbar to have fixed width - which file should I look into?

     
    Last edit: dariusz.jozwik 2011-10-06
    • And another question - I wanted to make left navbar to have fixed width - which file should I look into?

      This is not a very good idea, as it will mess up the layout. This is due to the way the layout was designed. The width of the left nav is set to 20% and the width of the content is set to 78%. If you change the width of the navbar, and give the content a fixed width as well, it will only display right on some screens (which is not what you want).

      But if you want to try anyway, you can set a fixed with in basetemplate.css line 26:

      #side {
          float: left;
          width: 20%;
          margin-bottom: 1em;
      }
      

      Replace "width: 20%;" by "width: 300px;" or whatever width you want. The width of the main content is set on line 32.

       
      • dariusz.jozwik
        dariusz.jozwik
        2011-11-16

        Thanks. I've checked the fixed width solution and it doesn't look great, just like You said it would. So I've just lowered 20% to 10% and it works fine.

        Once again - thanks for the answers and for all your hard work you put into designing this skin.

         
        • Don't give me all the credit though; the original skin was not my work. I just made some modifications to make it work with the latest MediaWiki. ;)

           

  • Anonymous
    2011-10-17

    Yes, is there anyway you could tell me how to make the logo wider? I have a logo that's 322 x 53 pixels and it appears to be too wide and gets cut off considerably on its width. I really would like to use this skin as our old Cavendish skin needs to be updated and we'd like to continue to use our old logo. Thanks in advance.

     
    • Check my replies above.

       

  • Anonymous
    2012-06-05

    Love the format but what all would I need to look at to change the content to a black based skin?

    Thanks,
    Jonathan
    jonathan.g.wilson@gmail.com