Docs

[Derek]

Hello!

I love your theme, and your support is incredible (from what I can tell so far 🙂

I’m attempting to build a tile button effect on my homepage. Can you tell me:

1. What’s the best way to set column heights so they’re a uniform height?
2. How can I center-align content vertically?
3. Within each of the greyed-out images I’d like to create a transparent button with purple outline and text… but the class I created doesn’t work “homepage-btn”. It works in a white background but not in the columns with background photos. I want to use the button element so I can have pop-up text.

[Paul R]

Hi,

Thanks for writing in!

Please change your login credentials asap as you posted it in public.

For 1 & 2

You can add this in the style field of your column element.

display:inline-block; vertical-align:middle; min-height:200px;

You may change 200px to achieve your desired height.

3. You can add this under Custom > CSS in the Customizer.

.x-btn.homepage-btn {
    background-color:transparent; 
    color: #532c6f;
    border: 1px solid #532c6f;    
}

Hope that helps.

[Derek]

Thank you!

I was able to set the column height fine, and get the transparent buttons working. But the vertical-align doesn’t seem to be working. I tried it in the column settings, in the content band, and inner-column settings. (Which is the correct place to put that code? Have I built those columns correctly?)

Another question for you:

How can I create a button like the circle-down button in the top slider? I want to add that to another section to direct users further down the page.

Thanks for your help!

[Derek]

This reply has been marked as private.

[Derek]

One more question:

I’m struggling getting the left and right margins right in the box under the headline. The left margin works but the right one will not.

I’ve added this to the column style:
margin-left:25px; margin-right:25px;

… but it’s not working. Again, not sure if I’m using the content band, column, inner column correctly – but I’ve tried the styling in each and using that style in each doesn’t seem to work.

Thanks again!

[Paul R]

Hi,

I go ahead and made some adjustments in the alignment.

Kindly check on your end.

Thanks

[Derek]

Hello again,

1. This worked great but I had to change the button colors from transparent to purple, and that broke the alignment. Could you please help me center the buttons vertically again within the photo tiles?

2. How can I match the circle-down button from the slider at the top? I tried to re-create the same button in purple underneath the paragraph of text but cannot figure it out after looking at other support tickets.

3. Is it possible to create a mouse-over image effect for the grey tiled images I have on the homepage? If possible I would like for the images to turn to color when moused over.

Cheers,
Derek

[Christian]

Hey Derek,

We’re sorry but, further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Derek]

I understand that #3 may require custom development, which is okay – it was just a question.

But #1 (centering buttons) and #2 (creating a circle-down button) should be simple to do. No?

[Thai]

Hi There,

Please try with this CSS:

a.x-btn.homepage-btn2 {
    border: 2px solid #fff !important;
    background-color: transparent;
    font-weight: bold;
    position: absolute;
    top: 50%;
    margin-top: -18.5px !important;
}
a.x-btn.homepage-btn2:hover {
    border-color: rgb(83,44,111) !important;
    background-color: transparent;
    font-weight: bold;
}

http://i.imgur.com/eMACKWi.png

Hope it helps 🙂

[Derek]

Hello, thank you for the replies. I think I’ve made this stream too complicated so I will start another ticket with clearer information. Sorry about that!

[Prasant Rai]

Sure. You are most welcome. 🙂

[Author]

Posts