I'm not sure if this is a bug as much as possible oversight on my part but I'm having an hard time getting blocks in the header region to be transparent. All the other blocks are working just fine in other regions. I did look at the color.css and some other options as given in previous tickets but they are about all blocks having issues and not just in one region.

Attached is a screenshot.

Any insight toward fixing this would be appreciated.

Thank You,
psulathrop

CommentFileSizeAuthor
Header Issue.png63.97 KBpsulathrop

Comments

Jeff Burnz’s picture

Jeff Burnz commented
Component: Miscellaneous » Code
Category: bug » support

How are you otherwise setting blocks to be transparent?

You can do this easily enough in CSS, is there an issue with that?

psulathrop’s picture

psulathrop commented

Mr. Burnz,

I did find it in the css. I noob'd this one, my apologies. I found that in the color.css there is a .block-inner where I can define the background to transparent. Sorry for the post, but thank you for the response.

Thank You,
PSULathrop

Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Fixed

That is a bit of hack but it will work, if it works for you, great! No one said hacking was wrong ;)

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

aggentle’s picture

aggentle commented
Status: Closed (fixed) » Active

Reopening this one to get some clarification on the fix...

Overriding .block-inner to set the background to transparent works, but it overrides all the blocks, not just the one in the header.

I would like to know if there is a way to override a specific block in the header only? I've identified the block's specific ID (block-block-3 in this case) and tried to override it in my theme's CSS, but it gets replaced in the resulting page by the generic block-inner background.

I'm guessing that this isn't doable, but I'll ask the question anyways :)

Thanks in advance...

Jeff Burnz’s picture

Jeff Burnz commented

Anything is doable, your CSS is wrong, but who would know? No link, no code example, who can tell?

aggentle’s picture

aggentle commented

Hi Jeff, sorry for the delay in the reply. I hoped that my query was specific enough, but point taken.

I've found another route to my solution so this can be closed down. Shall I or will you?

Kind regards, Alan

Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Closed (fixed)
RobertOak’s picture

RobertOak commented
Status: Closed (fixed) » Active

Hi,

I have the same problem. I've modeled the overrides from the the ones used in pixture_reloaded.css for say the search form

.region-header #block-search-form .block-inner {
background: none;
}

created a unique id for my block element and added css for my code for all .region-header #my_ID .block,

almost a copy of the css for menu bar:

#my_ID .block,
#my_ID.block-inner,
#my_ID .block-inner .block-content {
background: transparent;
padding: 0;
margin: 0;
a: hover: #FFF;
}

and no matter what i do, I cannot get rid of the .block-inner wrapping around the bocks placed in the header. Google chrome inspect element shows this is what gets wrapped.

The rest of my CSS for the ID is displayed, so in other words, I can add a background image, change the color on the hover links and so on, just that pre-defined .block-inner via the color panel I cannot get rid of.

I've been banging on my head on two little blocks in the header for hours so I would really appreciate some insight as to what is wrong.

It seems there is some inheritance or something I'm not following but I would like to be able to have a default css for blocks but be able to override that default on any block. I thought by putting in the block

it would override the theme css so it's like some sort of inheritance thing going on here is not what I would expect.

Well, I would generally like to be able to redefine styles by hacking up the pixture_reloaded css so I suspect this one has something to do with the color module css and inheritance.

I don't want to go to this level of pain to override css per block:

http://adaptivethemes.com/how-to-add-css-files-in-drupal-7

I have another issue and that's with the menu bar. If I add two elements say sucker fish and search box, it puts the search box on a new line, like a
would.
I want the two elements aligned in the same row on the menu bar and I'm assuming this is due to some div wrapper or something but can't put two blocks on the menu bar aligned on the same horizontal bar.

Thanks for help.

RobertOak’s picture

RobertOak commented
Status: Active » Closed (fixed)

Found the answer. It is the order of style sheets loaded. The class overrides were fine, it was another stylesheet over-wrote my override classes due to the ordering, so the weights applied to each .css stylesheet loaded via the pixture_loaded.info file.

This answer is the solution to the above problem

http://drupal.org/node/1282080

but the above link doesn't explain as to why it works. It's because custom.css would be weighted greater, and through inheritance would then override the previous css classes.

Lesson one cannot start hacking away just any existing .css file for a theme.

Figured this finally after reading a little bit about core themes, subthemes and how subthemes override the core default css, how style sheets are loaded in the .info files and suspect many others will run into this if they are like me and just want to get a certain look fast.