Hi,

Having a view displayed on a page, I want to change the rendered output to display view rows (view items) more separatly by adding background, border to the .view-rows css style. E.g. 

#view-id-MytestView-page_1 .views-row {
    background-color: #F8F8F8;
    border:1px solid #C1C1C1;
    margin:5px;
    padding:5px    
}

My problem if there are comments to a view item the comments block will be displayed out of the view row's div (borders crosses eachother) - checked with firebug as well. See attached file (view-row-theming.jpg)

Could you please tell me how can I avoid this behaviour and theme my view rows?
The block style would be fine form me as well.

I want to see something like this (attached img): view-row-theming-goal.jpg (with my previous theme).

cheers,
fifty

CommentFileSizeAuthor
view-row-theming-goal.jpg61.1 KBfifty
view-row-theming.jpg52.24 KBfifty

Comments

komal.savla’s picture

komal.savla commented

Hi,

For fixing this you just need to add the float: left and width to your above css like this :

#view-id-MytestView-page_1 .views-row {
    background-color: #F8F8F8;
    border:1px solid #C1C1C1;
    margin:5px;
    padding:5px;
    float: left;
    width: 500px;    
}

Thanks,
Komal

stephthegeek’s picture

stephthegeek commented
Category: feature » support
Status: Active » Closed (fixed)