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, http://www.radarearth.com/content/beginning-drupal-7-theming-omega) 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..http://newwpthemes.com/demo/iHealth/.
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 http://newwpthemes.com/demo/iHealth/ 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.
Thanks in advance.
Comments
=-=
A link to your site with a specific change sought would be a preferable way to recieve support instead of linking to an example and asking how to recreate the theme. ( which could take hours of someone's time ).
My suggestion is link to your site, and give a specific example of what you want to achieve. This will allow somene to help with that one example. Then work on another example and so on.
To work with themes you don't need any tools beyond firebug and a text editor. Some themes are more difficult to work with if you're seeing them for the first time or if a CSS skillset isn't very sharp. At which point, trial and error is of great benefit to gain experience.
Based on the background image issue you seem to have had, it's of benefit to mention which classes or ID's you were trying to target rather than just saying a "region". it would aid in trying to recreate your issue and better understand and what may be causing the unwanted effect.
My site is still on
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.
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. http://www3.picturepush.com/photo/a/8265721/img/Anonymous/omega2.jpeg
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.
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.
=-=
the reason the orange background color is being used in multiple places is because you are targeting a container not a region. The container is wrapping those regions. You should be targeting the id div#region-menu.grid-12.region.region-menu or something that at the very least includes the region-menu id to differentitate it from the other parts of the theme that also use .container.grid-12 classes. #region-menu may be enough.
firebug aids in inspecting the elements already in use. to override already existing CSS you use the local.css file or global.css file as set up by omega. This keeps your customizations in a single file and allows you to be more specific with your declarations when targeting specific elements.
you can create a primary links navigation by creating a new menu in administer -> menus then placing the block generated by the menu in the region wherer you wish the primary links to appear. Then style using css. If you are using nicemenus, to have it look like the example, you have to target specific nice menu classes in with CSS and override them in your theme css file. As state on the nice menus project page, http://drupal.org/project/nice_menus , there should be examples in the README.txt file which you can work with to get a better understanding of how to style nice menus output.
Keep in mind that most things aren't theme specific, meaning, nice menus are styled the same way regardless of the theme in use.
It may aid to watch : http://london2011.drupal.org/conference/sessions/forensic-theming-key-te... ... the techniques learned can be utilized on any site with any theme in any CMS as CSS is CSS regardless of where it's being used.