Adding a banner in Sagittarius-A

Random stuff about serendipity. Discussion, Questions, Paraphernalia.
Post Reply
wellaserrano
Posts: 2
Joined: Sun Sep 28, 2014 7:09 pm

Adding a banner in Sagittarius-A

Post by wellaserrano » Sun Sep 28, 2014 7:37 pm

Hi, I am still a beginner to CSS and would like to ask some help regarding adding a banner in Sagittarius-A. I have already checked the CSS for this theme and I did not find a banner section there.

But can we still add a custom banner in Sagittarius-A? If yes, how do I do it?

Thanks,
Wella

User avatar
yellowled
Regular
Posts: 7017
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Adding a banner in Sagittarius-A

Post by yellowled » Sun Sep 28, 2014 9:14 pm

wellaserrano wrote:But can we still add a custom banner in Sagittarius-A? If yes, how do I do it?
Disclaimer: I don't know the theme very well, but judging from a demo site, this should work.

1. Find a suitable banner image. I assume by banner you mean some kind of photo which is way wider than it is high. Sag-A has a flexible width, so you'll want to pick and image that can accommodate for that. The min-width is 740px, the max-width is 90em, which (usually) translates to 1440px. So you'll want to look for a banner which is 1440px wide, but has the main visual components in the left half (e.g. the stuff in the right half of the image could be hidden if necessary). It should be a jpg image to save size.
2. Add that image to your theme folder, e.g. as /templates/Sagittarius-A/img/banner.jpg
3. i would suggest adding the banner as a background image to #header, but you'll have to fiddle with it a little to accommodate for the proper height (this is where a link to your actual page would've been helpful). I guess the max height for the banner would be 168px, otherwise you'll have your banner below the three subcolumns – then again, you might not even use the newspaper mode …

Well, anyway, add this to your style.css

Code: Select all

#header {
    background: url('{TEMPLATE_PATH}img/banner.jpg') 0 0 no-repeat;
}
Don't forget to save.
4. Start tweaking. You might want to change the colors for the h1 and h2 or hide them altogether, you might want to remove those borders in the header or change the navigation. Maybe you have already changed those.
5. Be aware that these changes to style.css would be overwritten if you update Sag-A (which is unlikely, but could still happen). Keep backups of the theme's files you changes.

If you have further questions, go ahead – but if possible, provide a link to your site. :)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

wellaserrano
Posts: 2
Joined: Sun Sep 28, 2014 7:09 pm

Re: Adding a banner in Sagittarius-A

Post by wellaserrano » Mon Sep 29, 2014 3:58 pm

Thank you so much for the help YL. It helped me a lot there even though I am no expert to editing css files. I just followed your instructions and was able to add my banner though as you have said it will just become a background for the header but it's fine.

Here's the site I am working on http://www.adage-media.com/.

Another problem I found though not related to adding a banner, is that my pages seem to not show its own webpage. When I go to the page links, it is still showing my homepage even if I'm already in my Contact Us, About Us, etc., page links. Do you have any idea what's the problem here? Is this a glitch of Sagittarius-A?

Thanks again for the help. :)

Regards,
Wella

User avatar
yellowled
Regular
Posts: 7017
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Adding a banner in Sagittarius-A

Post by yellowled » Mon Sep 29, 2014 5:47 pm

wellaserrano wrote:When I go to the page links, it is still showing my homepage even if I'm already in my Contact Us, About Us, etc., page links. Do you have any idea what's the problem here? Is this a glitch of Sagittarius-A?
I doubt that because the links in the static page sidebar plugin (“Page Links” in your sidebar) don't work, either. All other links (to the archives, to individual entries etc.) work as well.

I assume you have the event plugin Static Pages installed (as well as the Contact form event plugin) and have actually created those pages?

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Post Reply