Drupal AnswersHow to edit the CSS of an omega subtheme in drupal 7?
[-1] [0] akshaynhegde
[2012-05-15 16:33:06]
[ 7 theming themes omega ]

I have been struggling a lot to get or create a theme for my new site. I have been searchiing a lot, but I couldn't get a theme with a layout I wanted. Then, I found out about Omega, I looked into it and found it very interesting and thought its exactly what I wanted, I can have any layout I want..!

So I installed omega, created a subtheme and activated it. Till this step, everything goes so smoothly, thanks to great documentation and many blog posts. I understood all the settings and features of omega. after this, the actual nightmare began..! I can't find a single piece of documentation (except for one blog, which explains clearly how to procede afyterwards..!

I thought, since I dont need any extra regions, I can just edit the css to make the site look as I like. So I started experimenting with CSS and am not being able to understand what should I change to get what I want. As explained in the blog mentioned above, I tried using firebug but, I have been trying since morning and I cant even set a proper bachground image properly for a region..!

Let me explain my problem by showing you, what am trying to achieve. First thing I tried was setting a navigation bar. I want the navigation bar to look like the one in this demo of a WP theme..

Please explain me or give me some idea on how to achieve this so that I may apply the same ideas to achieve other things such as that slideshow just like the one in the demo. The most simple thing I tried, was setting the background colour to that menu region. I used firebug and selected that region and clicked "inspect element". Then, changed the background colour, but to my surprise along with that menu block, even the background colour of the region above it (branding region, the one with the site name and logo)..! I have no idea why it is.!(FYI, I did select only the menu block, and did not select the other one even by mistake.)

So please guide me, how can I build a theme like with omega ? What steps should I take ? what tools should I use ? what am I doing wrong in using firebug ?

I would really appreciate a detailed answer with example, since am very very new to omega.(Its just been 2 days...). So I explained my problem in the best way I can. If you need any more info, please let me know.


Please look at the screenshot below, it shows both how the site looks like at the moment and colour changing of two regions at once.

I tried putting nicemenu block in that menu region and then change the background colour but I cant make it look like that navigation bar in that demo I mentioned.

I know its difficult to explain how to theme the whole site, so To start with, can you give me some ideas to create the navigation bar ? I want my "main menu" links to be appear in that navigation bar. Based on those ideas, I will try to learn and build the other parts of the site.

Thanks in advance.

Is the site you are working on publicly available? it would be easier to verify what you are doing right or wrong... - nathan6137
My site is still on localhost, otherwise I would have provided the link. My site at the moment, just has the omega base theme that comes with it with just the default settings. I haven't changed anything yet. I have edited the question to add the screenshot of my site.. - akshaynhegde
(2) From reading your question, it seems to me like this isn't Drupal related at all. You should start with a clean slate, a very simple html page and CSS file, and start trying to understand the CSS first. - Letharion
(1) As for creating a navigation bar, one thing that has helped me in the past is installing several different themes ("finished" themes with an established look rather than base themes like Omega) and just digging through their code to see how they did it. Then I take what I like from each of them and add it to my base theme. - Patrick Kenny