By Bridgeman-1 on

Hello,

After trying out Joomla and another CMS which has too vague a name for me to remember, I decided to try out Drupal since it seemed more easy and user friendly to use.

So, after reading a bit I somehow got to the Omega theme and read it's one of the best themes to use. Then I read you can't just use the theme itself and need to create a subtheme, which I did.

But, now what? How do I change the layout? How do I align my website to the left of the screen instead of the center? How do I add a vertical menu? How do I change the logo?

My website right now looks pretty crappy. But the admin interface is pretty confusing and I don't really know how to edit the global layout of the thing.

I don't know if it's important but here's the link to my website using Drupal: http://www.gamingw.robbertbruggeman.nl/

Comments

vm’s picture

vm commented

sounds like you need to start with the documentation which is linked to the omega project page: http://drupal.org/node/819164

logo= you can replace the logo.png with your own and adjust the css as needed
shifting layout = css
vertical menu = menus are blocks. Thus, create your menu in administer -> menus and enable the block

Bridgeman-1’s picture

Bridgeman-1 commented

That documentation covers a lot of global blabla but nothing specific like what I need.

I changed the background color and the logo in the CSS, and aligned the whole thing to the left of the screen. I can see the changes in my administrator dashboard thing, but if I go to the site normally it's still bare-bones. What gives?

vm’s picture

vm commented

you're not providing enough detail.

you changed what CSS exactly? and in what file exactly?

No idea what you mean by you can see the changes in the administration dashboard thingy. Omega is a front end theme. Not an administration theme.

Based on the link to the site provided in the opening post, it looks to me like your changes are indeed working.

Bridgeman-1’s picture

Bridgeman-1 commented

Okay, mistake on my part, I forgot to clear browser cache.

I changed the global.css and disabled all the other stylesheets in the admin panel. Now that seems to be working.

However, this is only the beginning of all the stuff I want to do and don't know how. For example, in the horizontal navigation menu at the top of the website (under the logo), there are the options "My Account" and "Log out", and these are in the same bar with the links I created. But I don't want that, I want "My Account" and "Log out" somewhere to the right.

Also, my website content is, as I said, aligned to the left of the screen, and that's where the content is. The right side of the screen is pretty much empty. I want a separate content area background color for my content, and a different background color for the empty part without any content.

I know I may sound a bit confusing but this is the best I can explain it.

vm’s picture

vm commented

he horizontal navigation menu at the top of the website (under the logo), there are the options "My Account" and "Log out", and these are in the same bar with the links I created. But I don't want that, I want "My Account" and "Log out" somewhere to the right.

Sounds like you added your links to the same menu or you've put both blocks in the same region

background colors: try working with .body and .zone

Bridgeman-1’s picture

Bridgeman-1 commented

Well I'm pretty sure they're different menu's, my links are in the "Main Menu" while those account links are in "User menu". And like you said they seem to be in the same location, which brings me to my next question, how do I move that?

Right that makes sense but I don't know how to style the content area, because I don't know the name assigned to it in the HTML. Or if there even IS a separate content area defined by a name.

vm’s picture

vm commented

Menus = I can't see the user menu, since I'm not logged in. I suggest you investigate further by viewing the source code of the rendered page. You can also move the links further to the right by manipulating the theme settings for that region. (see the documentation for how to manipulate the grid). The that doesn't aid to get them as far right as you want them, then investigate targeting the block in question with a CSS float.

backgrounds = I suggest you get used to using firebug for firefox or chrome's developers tools to inspect the elements in the theme. Every element has it's own ID and/or class you can target

Bridgeman-1’s picture

Bridgeman-1 commented

Ummm I don't really get it. I made a picture to make it more clear what I wanna do.

http://i.imgur.com/U3heg54.png

As you can see "My account" and "log out" is below the other links in the same light blue square. Basically, I want to move those two links to the right side of the content background, and "log out" below "My account" instead of side to side. And then I'd like to have a light blue box like the one where the links are in, except I'd want it to be vertical and behind those two account links.

I know actually how to inspect elements in Firefox, I didn't know it was called Firebug. But I've been able to find the names of several backgrounds and changed the color succesfully, so thanks.

vm’s picture

vm commented

for some elements there is no existing CSS within files. In those situations, you write your own declarations using the source code as the guide targeting the ID or class of the element.

Bridgeman-1’s picture

Bridgeman-1 commented

Well that's what I've been doing, but I think the place where the links is are in the same CSS class.

vm’s picture

vm commented

Looking at the image, it looks like your zones are stacked in some way. which is why they two menus are on top of one another (if you are sure the blocks aren't in the same region.)

every block has a delta which can be targeted. menus are blocks. You likely need to be more specific with your CSS. Also of note, and as previously stated, you can make user menu zone smaller and the zone to its left larger which will push the user zone to to the right. How to work with the omega grid with reference to zones/regions is in the docs. I also suggest rather than immediately diving in and styling your site as you envision it, that you take the time to work with the theme settings so you can better understand how to control the zones/regions.

Bridgeman-1’s picture

Bridgeman-1 commented

Well I've made some progress I think.

I've gone to Structure > Blocks, and there I found the "User menu" block which had its region set to "None". The "Main menu" (all my other links) was set to "None" as well.

So now I changed the "User menu" block to "Below header". And it does succesfully appear below the header, but the links also still appear below my other links like in the picture. So now they are in two places: Below my other links (where I don't want them) and below the header (where I do want them and can style them separately with CSS)

vm’s picture

vm commented

If the blocks were set to none, then it's likely that they were set in the context which would also explain why the blocks are showing in two places. If using contexts, don't use administer -> blocks and vice versa.

Bridgeman-1’s picture

Bridgeman-1 commented

What do you mean with "context"? I don't think I've ever used that. So is there a way to stop the blocks from appearing in two places?

vm’s picture

vm commented

Are you sure you mean to state, user menu is displaying twice?

contexts are provided by the context module. If it is not installed, I can't be sure why there are two without inspecting the HTML for clues.

Bridgeman-1’s picture

Bridgeman-1 commented

No I do have the context module installed. Because on the tutorial for making an Omega subtheme it was recommended to install it. But I still don't know how to stop this menu from displaying in two places.

vm’s picture

vm commented

The only menu I see displayed twice is the main menu. Unless you take the time to stated specifics with how the theme is set up in all components it's difficult to aid.

Thus: context, delta, global theme settings and blocks administration. You can use screenshots if you'd like.

else provide a test login

Bridgeman-1’s picture

Bridgeman-1 commented

Okay look at this

http://i.imgur.com/OSktcB8.png

Number 1 is the main menu. It's a block which I've set to the region "Menu". It is where I want it, so that's fine.
Number 2 is the user menu. It's a block which I've set to the region "Header second". This menu is also in the right place and I have no issues with that.

Now take a look at the bright blue bar below the logo marked with a blue line. It has two menu's: "Main menu" and "user menu". Both of which I've set to different regions. AKA they shouldn't be there.

Now like I said I have Context installed but I don't know how to use or change anything with it. So if the problem lies there then I need more explanation on that module.

vm’s picture

vm commented

go to administer -> structure -> menus
click on the settings tab

set source for main menu links to none
set source for secondary menu links to none.

test

if that works great. new questions will deserve new threads.

Bridgeman-1’s picture

Bridgeman-1 commented

Do you know how I can remove the bullets in front of those menu's? I tried to put list-style-type to none in the CSS but it doesn't work

vm’s picture

vm commented

In the future please provide more specificity with reference to exactly where you added the CSS, and the changes you made.

add the following to your custom.css file

ul li.leaf {
list-style-image: none;
list-style-type: none;
}

clear DB cache
clear browser cache

Bridgeman-1’s picture

Bridgeman-1 commented

Oh hey that worked.

I inspected the element with Firefox and saw that it was an unnumbered list called "menu". So that's what I changed in the CSS, but that didn't work.

http://i.imgur.com/e81QKzt.png
http://i.imgur.com/oSs7yhO.png

vm’s picture

vm commented

sounds like you may want to brush up on your CSS skillset to better understand how to alter already existing styling.

Bridgeman-1’s picture

Bridgeman-1 commented

Well actually I used this http://www.w3schools.com/css/css_navbar.asp as a guide and it only listed list-style-type for ul, so that's why I only did ul + the class name

vm’s picture

vm commented

a further indication that my previous comment is applicable as you needed to override already existing CSS.

I suggest using google and locating the drupal forensic themeing material provided by emma jane which may provide some aid. It's important to keep in mind that you aren't writing a theme from scratch. Thus you have to utilize what is already included in the theme (when it's already there) before writing your own declarations for what isn't there.

Bridgeman-1’s picture

Bridgeman-1 commented

Umm alright one more question for today, if you don't mind...

With that CSS you provided I removed the bullets from the main menu and the user menu (my account and log out buttons). But let's say I only wanted to remove the bullets from the main menu, and not the user menu. Would that be possible?

vm’s picture

vm commented

test the following in place of what you were already given.

.block-main-menu ul li.leaf {
list-style-image: none;
list-style-type: none;
}

The above is intended to target the ul li.leaf within the block in which the main menu resides and only that block/menu.

Bridgeman-1’s picture

Bridgeman-1 commented

Hey yeah that works. I actually didn't expect Drupal to be so flexible, but it's pretty impressive.

Thanks for all your help.

vm’s picture

vm commented

It's likely the flexibility of CSS that you're impressed with, though Drupal does output enough ID's and classes on elements and containers of those elements allowing one to be very specific about how and what they are targeting.