1

I have a few problems with theming/styling a grid made in Views.

I used the following:

  • Drupal 7.34
  • Views 7.x-3.8
  • Chaos tools 7.x-1.4
  • Zen subteme

The result I want to achieve is to make a grid with three collumns. The blocks consist of a title and an image retrieved from the nodes. The three tiles should be devided over the width of the content area. The height should be the same as the width. The image should be the background of the block and the title should be in the center of the block. When you hover over a block the image should change in a blue background color. Ideally the title should only be shown on hover. When a node does not have an image the block should have a blue background color with the title. On top of that I would like to create a checkersboard. So the even blocks should not show the image but a have a blue background color with a title.

I rewrited the output of the field in views

<div class="frontblocks">
[field_image]
<h2>[title]</h2>
</div>

and added the following css in my stylesheet.

.frontblocks {
position: relative; 
width: 230px;
display: block;
background-color: blue;
text-align: center;
text-decoration: none;
}
.frontblocks td {
background-color: blue;
}
.frontblocks img {
width: 230px;
height: 230px;
}
.frontblocks img:hover {
    opacity: 0;
    width: 230px;
    height: 230px;
}

In the result I've got so far there are six blocks. I managed to change the background color when hovering. But I have several problems I can't fix.

Problems:

  1. the alignment of the title. For some reason when I use text-align: center the title is shown underneath the image not on top of it.
  2. to create the checkersboard I tried to use :nth-child, but unfortunatelly I didn't get it working.
  3. when hovering the image the color changes, but when I hover the title the image comes back as background.
  4. when a node does not have an image the space is empty. Background is white and the title is nowhere to be found.

Thanks in advance for helping me out!

Image of what I got so far

4
  • if you have the html of the page then you definitely try for making custom template for your specific view for that go to your specific view in right hand side you will find advanced section go to advanced theming information from there will find the name for your template and use it with your custom html.:) Jan 3, 2015 at 12:37
  • Thanks for you comment, but I don't have the html of the page. I think the problem is the css. The behavior of the output changes (so I assume I use the right selectors). Only I don't get it working the way I want.
    – Skipper
    Jan 3, 2015 at 13:39
  • Add more layers and use hover on the top layer to trigger as in .layer-top:hover .layer-middle {}. Also use more cross-browser compatible css (opacity shuts out ie9 and below I think, and nth-child might have issues also. Alternatively use a polyfill.) To position center vertical you might need this Jan 4, 2015 at 6:12
  • Thanks for your comment, its a huge help. With your suggestions I now can and need to do more research :-).
    – Skipper
    Jan 5, 2015 at 19:23

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.