horizontal line + change background color of only one column + Align image in the middle of column

[wardh]

Hello Armin,

Hope you're well. I'm busy building a website and am trying to get 1 column in a different background color. I don't think it's possible with the current theme, but I'm trying to build a workaround. I was able to construct a horizontal line all over the width of the gridder
This is how I did the horizontal line:

1. I added a transparant and empty gif of 10px by 10px.
2. Changed the background color of that row to black.
3. With a custom css class I was able to make it 30 px high.
   .wh_transparant_hor{
   width: 30px !important;
   }

Now I'm trying to add a black background to one of the Columns by adding a black 10x10px gif and trying to make it's heigh 100% with a custom css class. But that doesn't seem to work. Do you have a solution? Would be great.

My second problem is that I can't seem to figure out how to align an image in the middle of the column. Can this be done with css too? (text-align: center; doesn't do the trick…)

Thanks,

W.

[arminunruh]

Hey wardh!

Horizontal lines:

I need to add an option one day to add horizontal lines :D

Edit: now there are horizontal lines with "+more" -> "+horizontal line" in the gridder.

Right now you could also add a class to a row by right clicking on an empty spot of the row. If you give it a class of "row-line",
you could use some css like:

.row-line{
border-top: 1px solid black;
}

Background of one Column:

Add a class to your row like "custom-column-background"
Then use some css like this:

.custom-column-background .col:nth-child(2){
background-color: blue;
}

The nth-child(2) selects the second column in this example.

Align image in middle of column:
Please select the column content and click the "align middle" button in the gridder.