astroweb

Developing the Southampton astronomy department website.

 Contributing

Ideally, fork the repository and clone that forked repository to your desktop. When you're ready to submit your code for use, click on Pull Requests->New Pull Request.

You can also submit straight to the repo if you're an owner, or just download the zipped up files.

css information

Most of the relevant css code is found in css/style.css. This is where most of the section ids and classes are defined.

• header defines the banner across the top

• about defines the style for the main "about us" section on the front page

• news_and_tweets defines the style for the section covering the twitter panel and latest news

• counter and the associated classes defines the four panel counters for H-index, coffee machine etc. I haven't been able to get the animation working yet

• The "testimonial" section describes the "Selected Publications" portion of the home page

• team section has a load of currently unused classes that can be used to create an icon for a staff member or student

There are also the usual bunch of headers (h1 etc).

The navbars and footers are all contained within css/bootstrap.css. I don't know what most of that file is.

css/animate.css contains a lot of css code ripped from Poshak's template. Again, I haven't got it to work but it should be used to get animations of the counters and slider working.

css/slit_slider.css contains some css for the original slider Poshak had on the site. I can't get this to work yet, so have a go.

Adding Headers

The method of loading the header through javascript (see below) will no longer be used as it compromises the load times of the document. Therefore can you copy the header/html file content into each of the pages please.

Please us the header.html file to change the header/banner. This is a universal template so at the start of new pages use this javascript I have written to implement the header:

<script src="https://github.com/astro-soton/astroweb/raw/master/js/jquery.1.11.1.js"></script>
<script>
$(function(){
  $("#header").load("header.html");
});
</script>
<script>
$(document).ready(function() {
    $('body').hide();
    $(window).load(function(){
        $('body').show();
    });
});
</script>
<title>Home | Soton Astro</title>
<div id="header"></div>