Docs

[mlc2475]

so far I’m very impressed with X-theme! However, after purchasing it I used the PSDs to rough out a homepage for client review. They loved it and signed off. However, now I find that certain aspects do not seem possible with the theme – namely overlapping elements. Is there a way to overlap an image (or fake it) over the apparent border of two content bands (as seen in the “laptop” portion below) or overlap a promo box with Revolution Slider? HELP! These are things the client loves.

[Rad]

Hi there,

Thanks for posting in.

That is possible, the mixed of relative and absolute positioning. If you could provide the url with ready content, then I could give you the css that will do overlapping design without affecting other content.

Eg.

<div class="fix-size">
<div class="overlap-size">
Image or text with background.
</div>
</div>

.fix-size {
width: 50%;
height: 300px;
position: relative;
}
.overlap-size {
position: absolute;

/* overlap 20px on top */
top: -20px; 

/* overlap 20px on left */
left: -20px; 

/* overlap 20px on right */
right: -20px; 

/* overlap 20px on bottom */
bottom: -20px; 

}

Thanks!

[mlc2475]

This reply has been marked as private.

[Rad]

Hi there,

Wow, nice work with overlapping and reflection effect!

Add this css at your customizer’s custom css.

@media (min-width: 980px) {
.prompt-overlap-top {
margin-top: -50px;
z-index: 99;
position: relative;
}
}

Then edit your prompt shortcode under your slider and add prompt-overlap-top on its class attribute.

Eg. [prompt .... class="prompt-overlap-top"]

Cheers!

[mlc2475]

This reply has been marked as private.

[Christian]

You’re welcome. Glad we could help.

[mlc2475]

Another random question: I was able to remove the button from a prompt on one of my pages using

.x-prompt-section.x-prompt-section-button {
display: none;

}

but now, is there any way to center the text? Bear in mind, I want to do this just for this one page, not globally. *(so I did the CSS on the one page)

[Rad]

Hi there,

You can create another class name that you can use for specific prompt.

.x-prompt-no-button .x-prompt-section-message {
text-align: center;
width: 100%;
}

.x-prompt-no-button  .x-prompt-section-button {
display: none;
}

The use that class name just like this [prompt class="x-prompt-no-button"]

Cheers!

[Thom G]

This reply has been marked as private.

[Thom G]

This reply has been marked as private.

[Paul R]

Hi Thom,

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

.page-id-6771 #x-content-band-1 .x-column #x-content-band-3 {
     margin-top:-20px !important;
}

Change -20px to achieve the overlapped size that you want.

Hope that helps. 🙂

[Thom G]

Thanks! You guys are the best, as usual.

[Darshana]

Glad we were able to help 🙂

[Author]

Posts