Where to embed the code from a Tryit Editor

Viewing 10 replies - 1 through 10 (of 10 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What doesn’t work, the CSS or HTML? If you don’t know, can you show us a page with the issue?

    Thread Starter pasz94

    (@pasz94)

    I think both isn’t working correctly. This is the page: https://imovatec.ch/kontakt/temp/

    In style.css I added: 

    <!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 20%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;a
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(231, 231, 231,0.4);
  
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

</body>
</html>

    And on the page I added:

    <div class="container">
  <img src="https://imovatec.ch/wp-content/uploads/2017/08/IMG_3574-300x225.jpg" alt="Avatar">
  <div class="overlay">
    <div class="text">Offerten</div>
  </div>
</div>

    I don’t know a lot about html and css.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In style.css I added:

    You just need to add CSS in the style.css file. Even better, don’t edit the themes files but instead use the “Additional CSS” part of the dashboard: https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

    To clarify, HTML is the bits like this:

    
<html>
<body>

    And CSS is the bits like this:

    
.container {
  position: relative;
  width: 20%;
}

    It’s important to be able to identify the difference between CSS and HTML.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Once you’ve got that bit right we can start looking into the problem

    Thread Starter pasz94

    (@pasz94)

    okay, thank you. I could fix the problem. There is only one last thing. 

    <a href="https://imovatec.ch/kontakt">
<div class="image-container">
    <img src="https://imovatec.ch/wp-content/uploads/symbole/analyse.svg" alt="alternative"/>
    <div class="after">text2</div>
</div>
</a>

    It seems that this code isn’t correctly. Because by changeing from the text-editor to the view editor, wordpress change the code automatically, and after it doesn’t work anymore. Maybe the link href”” is wrong embedded. Do you see my error?

    With the css part I don’t have any problem now.

    .image-container {
    position: relative;
    width: 300px;
    height: 225px;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
	text-align: center;
	padding-top: 100px;
  	font-size: 25px;

}

.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I don’t see the problem. When I hover over the chart image the text “text2” appears on top. Did you resolve this?

    Thread Starter pasz94

    (@pasz94)

    Yes this works, but it should open a new link by clicking over a chart. This works so far but when I change the view from text-editor to visual editor, wordpress changes the code. 

    <div class="image-container"><img src="https://imovatec.ch/wp-content/uploads/symbole/analyse.svg" alt="alternative" />
<div class="after">text1</div>
</div>

    The link <a href="https://imovatec.ch/kontakt"> disappears. That shouldn’t happen if I want to edit the page later in the visual editor.

    • This reply was modified 7 years, 6 months ago by pasz94.
    Thread Starter pasz94

    (@pasz94)

    Sorry, I changed the link. See in this link.

    https://

    • This reply was modified 7 years, 6 months ago by pasz94.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    but when I change the view from text-editor to visual editor, wordpress changes the code.

    That’s going to always happen and the simplest way to avoid is not changing between editors. Why do you need to switch between them? Pick one and then press the “Preview” button.

    Thread Starter pasz94

    (@pasz94)

    All right, I will do that in this way. Thanks for your help

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Where to embed the code from a Tryit Editor’ is closed to new replies.