Docs

[goalsarecool]

Also, when someone hovers over the box I would want it to turn #3254a5

[CMNerds]

Ok, I have subscribed to this thread so I can receive alerts. I’ll have a look and will get back to you.

[Jade]

Hi Blake,

If you want an entire section to be linked somewhere on click, you can also try adding a raw content element inside the section and place the html for the link there and you could use a custom CSS to add an absolute positioning to the link and make it cover the entire section.

You can try these steps:

#1 Add a raw content element in the section then place this code:

<a href="#" href="_blank">&nbsp;</a>

#2 Add a class to the section that contains the link and add a class to the raw content element as well.

#3 Assuming the class name you added to the section is the-section and the class name you assigned to the raw content element that contains the link is the-link, then add this code in the customizer:

.the-section .x-column {
  position: relative;
}

.the-section .the-link a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.the-section .the-link a:hover {
    background-color: rgba(0,0,0,0.4);
}

Hope this gives you an idea.

Cheers!

[goalsarecool]

Everything works until I try to put a button in the raw element. The attached is what I trying to create. Can you please assist.

<span style="font-size: 18pt;">Mindset Coaching with Blake Lea<br>on February 2, 2016</span>
<br>
<br>
<br>
[x_button type="transparent" shape="square" size="mini" float="none" href="#" info="none" info_place="top" info_trigger="hover" style="color: #ffffff;" style="border-color: #ffffff;"]Continue Reading[/x_button]
<a href="#" href="_blank">&nbsp;</a>

[CMNerds]

Sorry, I had been away from the office all day. Here’s the code:

#overlay    {  background:rgba(255,255,255,1);
               text-align:center;
               padding:45px 0 66px 0;
               opacity:0.9;
               -webkit-transition: opacity .25s ease;}

#overlay:hover {
  background:rgba(50,84,165,1)!important;
               opacity:0.9;}

Add that to your Custom CSS in the customizer and add the word overlay in the ID box of the section you want to change colors.

[goalsarecool]

WOW… Thank You!

I do have a few follow-up questions listed below. Here is the code I ended up using in my text file:

<div id="box">
<div id="overlay" 
<span style="color: #ddd;"><span style="font-size: 8pt;">2 FEB, 2016</span>
<br>
<span id="plus"><span style="color:#ffffff;"><span style="font-size: 18pt;">Mindset Coaching with Blake Lea on February 2, 2016</span>
<br>
<br>
[x_button type="transparent" shape="square" size="mini" float="none" href="#" info="none" info_place="top" info_trigger="hover" style="color: #ffffff;" style="border-color: #ffffff;"]Continue Reading[/x_button]</div>
</div>

Here is the CSS I ended up using:

 
#overlay    {  background:#000000;
               text-align:left;
               padding:20px 20px 20px 20px;
               opacity:0.9;
               -webkit-transition: opacity .25s ease;}

#overlay:hover {
  background:rgba(50,84,165,1)!important;
               opacity:0.9;}

Follow-up questions

1 – Do I need the following or can I change it from plus to something else and then style it with CSS

<span id="plus">

2 – Is there a way to put a picture in the background as well? I would want to be able to see through the color to the picture not replace the color

3 – I tried using <br> to push the continue reading button down but it’s not moving. How can I push it down without making the box fatter?

4 – How can I make the continue reading button have a white background with #333 color font upon hover?

Again, thank you so much! 🙂

[CMNerds]

You don’t need the span with the plus in it, you have a button so the plus sign becomes irrelevant.

Yes, you can add an image to the background. In your CSS replace background:#000000; with background-image:url(path to your image here); if you are using a pattern or if you want your image to repeat you can use background:url(path to your image here) repeat; or any variations of the background options that best suit your needs.

Instead of <br> you can either wrap the button in something like <p></p> or wrap it in a <span> and add a margin to it or add a margin to the bottom of the <span> you used to wrap the date.

Also, just a heads up, you don’t have to use the HTML at all. You can accomplish all of this by just adding your CSS in the Customizer. You don’t even have to use the #box ID. You can add the #overlay ID directly to the section, row or column (please see screen shot) since X does alot of the heavy lifting for you already. Just remember, when you are adding an ID or Class to a section, row or column within X you don’t have to use the # symbol.

[CMNerds]

Oh, and as far as your button customization goes, when you are editing the page choose the button you with to customize and add your customization directly into the style box (see screenshot).

[Rad]

Hi there,

1. You can use any ID and style it the way you prefer.

2. Yes, since it’s an overlay then you can apply background image styling for #box

3. You should use padding and margin styling. Example, add top and bottom margin to #plus

4. That’s only possible through Class base styling. Example, let’s say you added my-custom-btn to your buttons’ class. (eg. [x_button class="my-custom-btn"] )

.my-custom-btn:hover {
background: white;
color: #333;
}

Thanks!

[goalsarecool]

This worked great… thank you!

I’m so glad you were able to help me with this so that I didn’t have to use Javascript and slow my site down. I ended up wrapping the button in span and it moved the button down the box without making the box fatter. 🙂

I guess the only question I have left is… the only clickable link in the box is the button. Is there a way to make the entire box clickable? This is something that would be nice to have but not a major concern. You’ve already helped me with what I was trying to do.

Thanks again!

Blake

[goalsarecool]

Checking out your site now…

Creative Marketing Nerds | AI Marketing Agency

Thanks again!
Blake

[Joao]

Glad our team and @CMnerds managed to help you.

Let us know if you need help with anything else.

Joao

[goalsarecool]

Actually… I think it does matter based on some recent feedback. How do I make the background clickable as well and not just the button?

Thanks!
Blake

[CMNerds]

JavaScript is probably the easiest route- do you want to give JS a shot or are you set on staying away from JS?

[goalsarecool]

I’d really like to stay away from javascript if at all possible. It slows my site down big time.

[Author]

Posts