Last updated May 8, 2012. Created on June 7, 2011.
Edited by meurs, arshadcn, shamio, silverwing. Log in to edit this page.

The Andromeda theme is a slick and clean Drupal 7 theme.

  1. Features
  2. Demo
  3. Download
  4. Installation
  5. Regions
  6. Drop down menu
  7. Slideshow
  8. Grid System
  9. Sidebar: Highlighted Blocks
  10. Blog
  11. Highlight Region
  12. IE Support
  13. Sidebar Visibility
  14. Follow Links
  15. How to fix issues

Features

  • 1-column and 2-columns layout
  • Drop down menus
  • Support for slideshow and highlight (tagline, mission, ...etc) region
  • Blog page support
  • Easy-grid system
  • Awesome support ;)

Demo

  1. http://jackmichael.co.uk/

Download

Project page : http://drupal.org/project/andromeda

Installation

  1. Download the theme at http://drupal.org/project/andromeda.
  2. Extract to sites/all/themes such that andromeda theme folder is at sites/all/themes/andromeda
  3. Go to http://example.com/admin/appearance and click on Enable and set default under the andromeda theme thumbnail. Your theme will now be active.
  4. Next, go to http://example.com/admin/structure/block to configure your blocks.
  5. You can drag and drop blocks in the different regions of the theme

Regions

The Andromeda theme has 5 regions :

  1. Header : For drop down menus
  2. Banner : For slideshow
  3. Highlight : For site mission, tagline..etc
  4. Content : For main content blocks
  5. Sidebar : For sidebar blocks
  6. Footer : For footer blocks

Drop down Menus

Andromeda makes use of Nice Menus for drop down.

To enable drop down menus :

  1. Download and install the Nice Menus module.
  2. Once installed, go to Structure -> Blocks
  3. Find Nice menu 1 (Nice menu) and click on configure
  4. Give the menu a name eg. Main navigation
  5. Under Menu parent, select the menu you want to show. Most of the time, you want to choose Main Menu
  6. Select "down" under menu style
  7. Under Region settings, select header for Andromeda theme
  8. Save
  9. You should now see a clean drop down menu in your site header

Slideshow

Version 7.x-1.x-dev

If you're having issues with the slideshow, see #1185670: Slideshow only shows first image.

The slideshow makes use the the Nivo slider jQuery plugin. But you don't need to install that, it's included in the theme files.
Creating a slideshow is easy. Add the following codes to a block and place the block in the banner region.

<div id="slider">
<a href=link/to/page1><img src="path/to/your/images1.jpg" /></a>
<a href=link/to/page2><img src="path/to/your/image2.jpg" /></a>
<a href=link/to/page3><img src="path/to/your/image3.jpg" /></a>
</div>

The "path/to..." is path to the image files on the server, relative tou your drupal root (where index.php is). It is not the url of the image.

Make sure you select "Full HTML" when saving the block.

Version 7.x-2.x-dev

See http://drupal.org/node/1330866

Tips

The standard size for images is 940x400px. If different, fix the offset with css. But if your pictures are too small, it'll look strange.

To add captions to your slideshow images, include the title attribute in the <img> tag. It will turn into a nice caption automatically. Override the css in css/nivo-slider.css if you are not satisfied with the default output.

Highlight

This region works with the h1 and h2 tag. Here's some sample code :

<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt u.</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt u.</h2>

Drag and drop the block in the highlight region.

Grid System

The Andromeda theme adds a simple grid system to create column layout.

A basic grid system looks like this :

<div class="grid-parent">
    <div class="grid-child grid-WIDTH grid-space-POSITION">
    </div>
</div>

WIDTH is the width of the child element. It can take 25, 50 and 75 values.

POSITION is the position of the space for the block. Eg. If space is needed on the left, use grid-space-left to add a 3.5% space on the left. Values that can be used : top, right, bottom, and left.

Here's sample codes to create the 4-col grid on the demo homepage :

<div class="grid-parent">
    <div class="grid-child grid-25 grid-space-right">
        <h2>Headline 1</h2>
        <p><img src="path/to/image"></p>
        <!-- Your content here -->
        <h3><a href="add/link/here">Read More!</a></h3>
    </div>
    <div class="grid-child grid-25 grid-space-right">
        <h2>Headline 2</h2>
        <p><img src="path/to/image"></p>
        <!-- Your content here -->
        <h3><a href=add/link/here>Read More!</a></h3>
    </div>
    <div class="grid-child grid-25 grid-space-right">
        <h2>Headline 3</h2>
        <p><img src="path/to/image"></p>
<!-- Your content here -->
        <h3><a href=add/link/here>Read More!</a></h3>
    </div>
    <div class="grid-child grid-25">
        <h2>Headline 4</h2>
        <p><img src="path/to/image"></p>
        <!-- Your content here -->
        <h3><a href=add/link/here>Read More!</a></h3>
    </div>
</div>

You can alter the grid system. I.e. for a 2 column grid use the following code:

<div class="grid-parent">
    <div class="grid-child grid-50 grid-space-right">
        <h2>Headline 1</h2>
        <p><img src="path/to/image"></p>
        <!-- Your content here -->
        <h3><a href="add/link/here">Read More!</a></h3>
    </div>
    <div class="grid-child grid-50">
        <h2>Headline 2</h2>
        <p><img src="path/to/image"></p>
        <!-- Your content here -->
        <h3><a href=add/link/here>Read More!</a></h3>
    </div>
</div>

Hightlighted Blocks

To create blocks like the Twitter block on the blog page :

  1. Download and install the Block Class module
  2. Create the block as you would normally
  3. Add the block-highlighted class to the block.

Blog

To create a blog like the one in the blog [Currently not available | 404] demo (with the picture above the headline):

  1. goto Home >> Administration >> Structure >> Content types >> Blog entry
  2. under MANAGE FIELDS you have to add a new field named field_blog_picture
  3. now switch to MANAGE DISPLAY and select "Teaser"
  4. move the field you just have created from hidden above the Body
  5. as LABEL you have to select "Above". The format remains "Image"
  6. hit save and you are done.

You now can upload a picture for every blog entry and it will be displayed above the headline.

IE Support

Please note that this theme has not been tested on IE yet. If you're running this on IE and having issues, let us know. And no, we'll never support IE6.

Sidebar Visibility

You can set sidebar visibility for each page under admin/appearance/settings/andromeda.

Type the path of the pages where you want to hide the sidebar. It works the same way block visibility settings work.

Follow links

The theme has support for follow (social) links. You can enable these links in the search block as shown in the demo.

  1. Install the Follow module.
  2. Visit the Follow configuration page to add your links. (http://example.com/admin/config/services/follow)
  3. Go to the theme settings page and check "Show follow links in search block".
  4. That's it. Save the settings and the links should now show in the search block.

How to solve issues

Please see Lullabot's How To Solve All Your Problems.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

ikitonet’s picture

first of all sorry for my english.
... I followed the instructions and i think something it's wrong, I always get more "points" in the slideshow than pictures I put on it. I can't understand why If I put 3 pictures (jpg) in the html code I get 5 "positions" in the slideshow.

I configured the Follow block and i cant see it, only see in admin area.

Edit: Sorry, i cant delete this... I think this is no better place for errors :S

arshadcn’s picture

Please use the issue queue : http://drupal.org/project/issues/andromeda.

Thanks

Arshad Chummun
blog | twitter

rojesaga’s picture

I have the same issue. The problem was the configuration of the CKEditor.

If you use it try this.
GO - Home - Administration - Configuration - Content authoring
Edit the Imput format "Full HTML"
On the CUSTOM FORMAT OPTIONS
Uncheck - Break line before closing tag

The problem is that the CKEdit was putting a "
" at the end of each line.

Go to edit the slideshow block and delete the "
" that the CKEditor or your WYSIWYG module put it.

jgsantos’s picture

Hi I just wanted to thank you for this documentation ! Awesome job !

João Guilherme

btmullins’s picture

I just finished my first Andromeda based site, and had some compatibility issues with the Slideshow module. To alleviate this I was able to whip up a slideshow replacement using a custom content type hosting an image, with the image style used with the Andromeda slideshow module and Views with the Views Slideshow module.

If anyone has any questions feel free to contact me at my main site http://moonbooks.net via the contact us button.

My Andromeda based site is located at Moon Books Radio Theater

Manuel .’s picture

Hi,

just say thanks for Andromeda, and to help a bit in documenting:

Reading the handbook it seem that Nivo libraries are included with the theme, but this is not true for 7.x-2.x-dev: they have to be downloaded from here (the free download, on the left): http://nivo.dev7studios.com/pricing/

Best,

Manuel

Vikis1mil’s picture

Hello guys, i have a problem with the menu. E.G., my home page set up fien, all goes good, but when u press on any menu buttn, for example profile or kontakt, menu is total mess.
I ahev tried everything that i could come up with, but do not know what iswrong.

can anyone have a look, at www.bendt-risom.dk to see what i am talking about. www - bendt-risom - dk

THX

Vikis1mil’s picture

Has anyone worked out what to do with the menu.

pvrancken’s picture

you probably forgot to install the nice menus module, see the 9 steps at the chapter "Drop down menus"

Naod’s picture

Yes just follow the steps put in the documentation!

Regards,
Naod

sajeev14’s picture

I know this is probably the easiest thing to do. Can someone post steps to create blocks like the Twitter block on the blog page. Help is very much appreciated. :)

Sajeev

arshadcn’s picture

sajeev14’s picture

I have installed the Block class as instructed. I just want to know what the css code is to add the black box. Thanks again, You guys are Awesome.

Sajeev

pvrancken’s picture

make sure the block class module is installed and enter the css class "block-highlighted" on the text line above the block title

sajeev14’s picture

Thanks it worked. You guys are Awesome !!

Sajeev

Naod’s picture

I have tested it and found it really nice!!!

Thank so much

Regards,
Naod

sajeev14’s picture

Thank you so much for sharing this theme. :)

Sajeev

sashkernel’s picture

This is a great theme, very simple to configure since documentation is quite detailed.
Any ETA for the stable version?

sashkernel’s picture

Is there an easy way to increase the main content area width? without significant impact on the layout of the entire site?
It's currently 600, but I'd want to make it a bit wider. Let's say 700px.

Guess, I have to play around with both main content region and sidebar width. Is there anything else that'd need attention in this theme?

sashkernel’s picture

I've finaly finished customizations on my site. Loving it :). May still do some styling for sidebar, but it's already in production.
www.scallagrims.com

Now, despite it being loading quickly on hand held devices, I'd love to get mobile version of it. Could anyone sugges best practices to get a mobile version of it?

dRaz’s picture

Hi sash,

Mine renders really well on the iPad/phone.

The only way i could think to improve would be to build a specific app which we will be doing should the website do well.

If you come up with a different method then please share :)

Good luck.

Chatterbank - Earn rewards for sharing the things you enjoy - Launching 2nd January 2012 - FREE membership.

sashkernel’s picture

Mine is fast as well. Loads within 15-20 seconds on my BB depending on the number of pictures in the content promoted to the front page.

As for mobile version, I'd say the positioning of items is also critical.
I've done only basic theming, like editing CSS, so let me ask you this: What I should do in order to have a clone of andromeda theme on my site and to have drupal see it as a different theme? (e.g. "Andromeda" mobile) This will allow me to have second theme that I could perform heavy customization on like changing templates together with CSS in order to get the most essential components to show for mobile devices.

I have upcoming project for a sports league where I want to use Andromeda as well because of its simplicity and speed. I also want to implement a module for betting on the same site, which may draw a lot of mobile users. Therefore, I want to be sure it's going to be extremely simple and fast to navigate.

dRaz’s picture

First of all, what an amazing theme - fell in love with it as soon as I started using it.

I wanted to share our Andromeda themed site to show some heavy customisation:

Chatterbank

The site does not launch until 2nd January but feel free to register now for free to get the full experience when we go live :)

Thanks for all your hard work on creating such a great theme - any feedback welcome :)

Shaun

Chatterbank - Earn rewards for sharing the things you enjoy - Launching 2nd January 2012 - FREE membership.

moniekk65’s picture

Hi all :-)

this Drupal (and css) newbie needs help. I installed and activated the Andromeda theme, and it all works great, except for one little thing, that I have been trying to get right for about a week now without success.
The logo in the header is right at the top of the page, and I would like a little "air" there. With the help of Firebug I found the piece of coding to edit:

When I change the 30px into 50px, I have exactly what I am looking for.
However, I can not find where this line of coding is. I keep opening and searching every file I can find, but without success.

Anyone can help me on where to find this?
Thank you soooo much in advance :-)

arshadcn’s picture

layout.css under css folder line 25?

Arshad Chummun
blog | twitter

moniekk65’s picture

Hi :-)

that would be the line saying:

#header{
  margin-bottom:30px;

right?
What I see in Firebug is (sorry, forgot the code-tags in my previous post):

<body class="front with-banner with-sidebar with-slogan wrapper-body" style="padding-top: 30px;">

Would that be the same?
Thanks again!

Edited: I tried the line suggested, but it doesn't do what I am looking for. When trying the line found in Firebug, it does work, I hope someone knows where to find it in the script :-)

Edited again to add:
I just found the code I am looking for is in the html.tpl.php file (body class="<?php print $classes;?>" <?php print $attributes;?>>), but it consists of different strings. I see that the part I want to change in the code I pasted above (style="padding-top: 30px;") is the $attributes.
If anyone can help me locate $attributes, where I can edit it, I would be much obliged :-)
Thanks again for your help in advance!

JanDeroo’s picture

This is a great theme. But I'm having some troubles with the header block. On the demo-sites it's at the same hight as the website's name. On my site it appears much lower and therefore takes to much place. How can I move this menu at the same higth as the title? Thx

kingdahoo’s picture

First, congratulation fror this very nice theme

I have a probleme with my menu. As you can see here, my main menu doesn't want to be horizontal but stays vetical.
I already look at the nice_menu page but i didn't find any answers.
I'm using the latest version 7.x-2.x-dev

If you have any idea...

thanks

arshadcn’s picture

Looks like you're missing a float:left on line 90 in css/menu.css


ul.nice-menu li {
background: none repeat scroll 0 0 transparent;
border: medium none;
float: left;
list-style: none outside none;
margin: 0 0 0 15px;
}

Arshad Chummun
blog | twitter

kingdahoo’s picture

Ohhh yes, the float was missing....

Thanks

It looks like we are not so far :-)

vintorg’s picture

Hello,

I am using Panels with Andromeda. I want to add my social media icons to the top, where my logo and menu are. Any idea how I can do that?

Also, in admin mode, I can't see my footer. When I log out, I can see it. Any ideas?

erbfarm’s picture

I just downloaded the nivo-slider2.7.1.zip and got an error msg saying it does not contain any .info files. Has anybody else downloaded this plugin and gotten it to work successfully? I'd love to get the slider working. thanks!

Hackfall’s picture

This is a case of the blind leading the blind but I'll have a go.

Go into the modules section and check that you have installed and enabled all of the required modules. Also check that you have put nivo-slider into the correct "sites/all/libraries". I'm working on MAMP and had to move it.

There's detailed instructions here:
http://drupal.org/node/1330866

There are a few steps to setting it up but once you take them it is well worthwhile.

Hackfall’s picture

I'm a complete Drupal newb but have a number of sites that run using Textpattern as the CMS so I'm not a complete CMS plank. I'm looking to move to Drupal for multi user features and have chosen the Andromeda theme as a starting point for my first Drupal site.

I'm stuck on one aspect of getting the theme working.
The code for the 4 column grid seems to suggest that the Headline, image location and content should all be hard coded. It would be handy if these pieces of text were stored as an article for each of the four mini blocks so that I can make quick changes in the future using the admin interface rather than having to ftp in to edit the core templates. How do I do that? Or is it going to be quicker and easier to just hard code it?

Thanks

Phil

Hackfall’s picture

The answer to my question is buried in a thread here:
http://drupal.org/node/1197908#comment-4666456

nwdev01’s picture

Hi there,

I just wanted to thank you for the awsome theme and documentation!

Good work :)

refortunes’s picture

Thank you for such a great theme!!
Now I was able to create a beautiful homepage^^

Refortunes

Refortunes
www.refortunes.com
info@refortunes.com
Drupal website, iPhone Apps design and development in Yamato city, Kanagawa pref., Japan

lainkesermon’s picture

Hi,

Is there someone that can't tell me how to change the links on the pages (node) to text-decoration:underline;
And the name of the css style where i can't find the line number.

Thanks to all
and greetings from Belgium
Alain

hakabe’s picture

Hi,

First of all, nice theme - I just love it!

Then down to business: How can I get a 3 grid system centered? (the one you have on your theme picture). I'm only able to get it on the left side, so it looks kinda silly..

khli7’s picture

hello everyone,

I have created my webpage using Drupal CMS system.
Just want to know how to create a contact form module like the webpage http://jackmichael.co.uk/site/contact?

My online web portfolio is http://www.mattcreations.com

Thanks very much,
Matthew

hbblogger’s picture

Hi, it sounds as if you have forgotten to tick the site contact form block under modules. Its one of the main modules so you don't need to download anything. Once done, you'll find the contact form under structure. You can add a category (such as Contact Us - and make that the default) and then link through to the menus administration page and add it to your menu.

Drupal's contact form is very boring but sufficient for most needs and for me has a major problem in that you can't add extra fields. If you want something more than this (in Jack's case, he may want the person completing his form to let him know if it sound, lighting or photography that he/she is interested in), I would recommend qforms or one of the others.

Paul

Flovies’s picture

Hi all,

I'm very grateful for the really awesome theme that Andromeda is.

On some pages, where there isn't enough content, the footer isn't fixed at the bottom of the page but it shows up in the middle.
I have tried a lot of possible solutions that I found on the internet but non seemed to work correctly.

Anyone that can help me with this issue? My CSS skills aren't great enough to solve this problem myself.

Kind regards

keeroo’s picture

Hello guys,
where can I edit css? I need to change a theme for views and I couldn't find it.
Thanks for your help!

yadhul’s picture

i want to add blocks like content which they gievn in demo image.. how i need to do