Docs

[dimitrisco]

Hi,
With help from online sources I have managed to write the following:

<div>
<ul id=”original”>
<li id=”cdwaysC”>

<div></div>

<li id=”cdwaysD”>

<div></div>

<li id=”cdwaysW”>

<div></div>

</div>

And also the following css piece that makes the effect that I want:

#original {
width: 607px;
height: 607px;
background: url(“cdways-original.png”) no-repeat;
margin: 0 auto; padding: 0;
position: relative;
}

#original li {
margin: 0;
padding: 0;
list-style: none;
display: block;
position: absolute;
}

#original a {
display: block;
text-indent: -9999px;
text-decoration: none;
}

#cdwaysC a {
z-index: 50;
}

#cdwaysD a {
z-index: 60;
}

#cdwaysW a {
z-index: 70;
}

#cdwaysC div {
background: url(“cdways-c.png”) no-repeat;
}

#cdwaysD div {
background: url(“cdways-d.png”) no-repeat;
}

#cdwaysW div {
background: url(“cdways-w.png”) no-repeat;
}

#cdwaysC div {
position: absolute;
top: 0px;
left: 0px;
width: 107px;
height: 107px;
}

#cdwaysD div {
position: absolute;
top: 0px;
left: 0px;
width: 107px;
height: 107px;
}

#cdwaysW div {
position: absolute;
top: 0px;
left: 0px;
width: 107px;
height: 107px;
}

#cdwaysC a {
position: absolute;
top: 270px;
left: 50;
width: 225px;
height: 212px;
}

#cdwaysD a {
position: absolute;
top: 118px;
left: 285;
width: 25px;
height: 372px;
}

#cdwaysW a {
position: absolute;
top: 118px;
left: 315;
width: 250px;
height: 180px;
}

#cdwaysC a:hover + div {
background-image: url (“cdways-c.png”) no-repeat;
width: 607px;
height: 607px;
top: 0px;
}

#cdwaysD a:hover + div {
background-image: url (“cdways-d.png”) no-repeat;
width: 607px;
height: 607px;
top: 0px;
}

#cdwaysW a:hover + div {
background-image: url (“cdways-w.png”) no-repeat;
width: 607px;
height: 607px;
top: 0px;
}

The code is working nicely locally, but I can’t manage to migrate it to X. Although I have created a page with custom html and copied the css into “Global CSS” under “Customize”, I don’t see the hover effect and the images with the color. Could someone please help??

[Rupok]

Hi there,

Thanks for wriitng in! It seems you have number of background image properties like :

background: url("cdways-c.png") no-repeat;

So it’s not going to find the path eventually won’t do anything. You need to specify the absolute URL of your uploaded image :

background: url("http://example.com/uploads/cdways-c.png") no-repeat;

Hope this makes sense.

[dimitrisco]

Hi Rupok,

I have done that already. I uploaded the photos and also changed the code with the absolute paths, with no result. I don’t get the effect that I want. Any other thoughts?

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[dimitrisco]

This reply has been marked as private.

[Friech]

Hi Dimitris,

Thank you for the credentials. #1 Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. Would you mind providing us the link where did you get that code above so we can see how this effect works.

#2 Probable not since this is a custom code, we’ll see what custom CSS we can apply to it to be responsive when we fully understand how this effect works.

#3 Navigate to Customizer under the Layout and Design panel set any image as a Background Pattern, and then just remove it when the remove button appear. This is to remove the default background pattern that is with the demos.

And then add this on your custom CSS.

.page-template-template-blank-4-php .x-main, .page-template-template-blank-5-php .x-main, .page-template-template-blank-6-php .x-main, .page-template-template-blank-8-php .x-main {
	background-color: transparent;
}

#4 Please reduce the 20% margin bottom you applied on the ROW where the custom headline (enjoy) is placed.

Cheers!

[dimitrisco]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for the clarifications.
1] Your modified code is invalid. You have to close the corresponding li tags. You can make use of this code:

<div>
 <ul id="original">
  
  <li id="cdwaysC">
    <div></div>
  </li>
  
  <li id="cdwaysD">
    <div></div>
  </li>

  <li id="cdwaysW">
    <div></div>
  </li>

 </ul>
</div>

4] You may use gap element so that you can adjust the position of the buttons.

Hope this helps.

[dimitrisco]

Hi again,

#1. No this is not the problem, because in the actual page (“cdways”) the code is correct (<li> closes) everywhere. Maybe by copying the code here, I made a mistake, but this is not what makes the page not working. Please take a look using the credentials I gave you.

#4. The gap element does not create the effect that I am talking about.

Please, provide me with solutions.
Dimitris

[Rue Nel]

Hi again,

It appears that the left position has been set with the absence of the px unit. Please update your code and use this instead:

/*CDWAYS PAGE CSS*/
#original {
    width: 607px;
    height: 607px;
    background: url("http://cdways.com/wp-content/uploads/2016/11/cdways-original.png") no-repeat;
    margin: 0 auto; padding: 0;
    position: relative;
}

#original li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    position: absolute;
}

#original a {
    display: block;
    text-indent: -9999px;
    text-decoration: none;
}

#cdwaysC a {
    z-index: 50;
}

#cdwaysD a {
    z-index: 60;
}

#cdwaysW a {
    z-index: 70;
}

#cdwaysC div {
    background: url("http://cdways.com/wp-content/uploads/2016/11/cdways-c.png") no-repeat;
}

#cdwaysD div {
    background: url("http://cdways.com/wp-content/uploads/2016/11/cdways-d.png") no-repeat;
}

#cdwaysW div {
    background: url("http://cdways.com/wp-content/uploads/2016/11/cdways-w.png") no-repeat;
}

#cdwaysC div {
    /*background-color: blue;*/
	position: absolute;
    top: 0px;
    left: 0px;
    width: 107px;
    height: 107px;
}

#cdwaysD div {
    /*background-color: blue;*/
	position: absolute;
    top: 0px;
    left: 0px;
    width: 107px;
    height: 107px;
}

#cdwaysW div {
    /*background-color: blue;*/
	position: absolute;
    top: 0px;
    left: 0px;
    width: 107px;
    height: 107px;
}

#cdwaysC a {
    position: absolute;
	/*background-color: yellow;*/
    top: 270px;
    left: 50px;
    width: 225px;
    height: 212px;
}

#cdwaysD a {
    position: absolute;
	/*background-color: yellow;*/
    top: 118px;
    left: 285px;
    width: 25px;
    height: 372px;
}

#cdwaysW a {
    position: absolute;
	/*background-color: yellow;*/
    top: 118px;
    left: 310px;
    width: 250px;
    height: 180px;
}

#cdwaysC a:hover + div {
    background-image: url ("http://cdways.com/wp-content/uploads/2016/11/cdways-c.png") no-repeat;
	width: 607px;
    height: 607px;
	top: 0px;
}

#cdwaysD a:hover + div {
    background-image: url ("http://cdways.com/wp-content/uploads/2016/11/cdways-d.png") no-repeat;
	width: 607px;
    height: 607px;
	top: 0px;
}

#cdwaysW a:hover + div {
    background-image: url ("http://cdways.com/wp-content/uploads/2016/11/cdways-w.png") no-repeat;
	width: 607px;
    height: 607px;
	top: 0px;
}

Please let us know how it goes.

[dimitrisco]

#1. Great thanks! Now I can see the effect I want. But the page is not fully responsive anymore. What can I do to render it fully responsive? Also, can you recommend what has to be done now in order to center the logo in the middle of the page?

#4. Any ideas on the fourth question? The gap element does not create varying speed.

[Rue Nel]

Hello There,

Thank you for the updates!

1] You cannot make it fully responsive because it has a fixed width, height and top/left position. You need to use percentage or at least adjust the dimension of the box which would go along with the position. If you want to to have it centered of your browser, please edit the code and use something like this:

<div id="cdways">
<ul id="original">
<li id="cdwaysC"><a href="http://cdways.com/wp-content/uploads/2016/11/happy-man.png"></a><div></div>
</li>
<li id="cdwaysD"><a href="http://cdways.com/wp-content/uploads/2016/11/happy-man.png"></a><div></div>
</li>
<li id="cdwaysW"><a href="http://cdways.com/wp-content/uploads/2016/11/happy-man.png"></a><div></div>
</li>
</ul>
</div>

And then you can use this custom css:

#cdways {
    display: table;
    width: 100%;
    min-height: 100vh;
}

#cdways div {
    display: table-cell;
    vertical-align: middle;
}

2] I have created another test page and see if this is how you want for the parallax effect.
http://cdways.com/an-x-test/

Hope this helps.

[dimitrisco]

Hi again,

#1. The image is not vertically aligned on the page. The code you provided did not make any difference. Could you please check again?

#4. I don’t want the background image to flow. I need it fixed and I want “ENJOY” to have a relative different speed (quicker) than the buttons when scrolling down. This will create the effect of “ENJOY” showing up for the first time underneath the buttons, but when the user keeps scrolling down, “ENJOY” will surpass the buttons and end up on top of them.

Thanks!

[Rue Nel]

Hello Again,

Sorry there was a missing div element in the code. Please use this instead:

<div id="cdways">
 <div>
  <ul id="original">
    <li id="cdwaysC"><a href="http://cdways.com/wp-content/uploads/2016/11/happy-man.png"></a><div></div></li>
    <li id="cdwaysD"><a href="http://cdways.com/wp-content/uploads/2016/11/happy-man.png"></a><div></div></li>
    <li id="cdwaysW"><a href="http://cdways.com/wp-content/uploads/2016/11/happy-man.png"></a><div></div></li>
  </ul>
 </div>
</div>

And with the help of this css code:

#cdways {
    display: table;
    width: 100%;
    min-height: 100vh;
}

#cdways div {
    display: table-cell;
    vertical-align: middle;
}

You can see it in my test page: http://cdways.com/an-x-test-cdways/

#4] Regretfully there isn’t a feature offered by X that can do what you have in mind. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[dimitrisco]

Hi Rue Nel,

#1. Unfortunately neither your page (“an x-test.cdways”) nor your code renders the image in the center vertically!! Maybe we missed something… Will you give it one more try please?

#4. I understand! Thanks

[Author]

Posts