سؤال

I'm having some problems centering my logo in my Omega subtheme. When viewed in "inspect element" (Google Chrome) there's no other CSS being applied to my targets. My branding region stretches the full 12 grids across the page. I don't quite know what I'm overlooking.

Let me know if you need any of the HTML. Below is the CSS I've used:

.branding-data {
    width: 960px;
    background: #333;
    height: 50px;
}
.logo-img.center {
    display: block;
    width: 200px;
    margin: 0 auto;
    background: #ccc;
}
هل كانت مفيدة؟

المحلول

For anyone suffering with a similar problem, I record unto the annuls of the internet the solution that I found:

If you don't already have Delta installed (recommended whenever using Omega), do it.

Before you begin, it's best to have your logo be the same size as an even number of Omega's vertical grids. (mine is two).

  1. Since Omega's default logo isn't in a block, the best way to mess with the logo's settings is to use Delta Blocks (admin/config/user-interface/delta-blocks). Check "Logo".

  2. Then go Admin your Blocks, and add the "Logo" block to the "Branding" region.

  3. Go into your Omega theme's zones administration (under "Appearance"), change the region's size to the number of columns your logo is (two in my case), and set the correct suffix and prefix (5 before, 5 after for a logo of 2 grids).

In "global.css," select the branding region, and center the text (code is as follows):

.region-branding {
    text-align: center;
}

Then, insure that no float is applied to the logo image, and that it has margin: 0 auto

.logo-img {
    float: none;
    margin: 0 auto;
}

If it doesn't work the first time, remember to always clear your caches before freaking out.

Credit for helping me find this fix goes to the user "banghouse" on the #Drupal IRC channel.

Hopefully this helps someone.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top