Help with My Custom Posting Template

Asked

Viewed 28 times

0

i created a custom posting template and wanted to improve it as follows

he is currently so atual

I wanted to leave you like this inserir a descrição da imagem aqui

with option to click and change between the "requirements" and the "installation" to show the text within each 1! This is the custom posting code

<div>
  <div style="text-align: center;">
  </div>
  <br />
  <div class="su-tabs su-tabs-style-default" data-active="1" style="-webkit-text-stroke-width: 0px; background: rgb(238, 238, 238); border-radius: 3px; border: 0px; box-sizing: border-box; color: black; font-family: &quot;droid sans&quot;; font-size: 14px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; list-style: none; margin: 0px 0px 1.5em; orphans: 2; outline: 0px; padding: 3px; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
    <div class="su-tabs-nav" style="border: 0px; box-sizing: border-box !important; list-style: none; margin: 0px; outline: 0px; padding: 0px;">
      <div style="margin: 0px;">
        <span class="su-tabs-current" data-target="blank" data-url="" style="background: rgb(255 , 255 , 255); border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; box-sizing: border-box; color: red; cursor: default; display: inline-block; font-size: 1.3em; font-weight: 700; line-height: 20px; list-style: none; margin: 0px 3px 0px 0px; min-height: 40px; outline: 0px; padding: 10px 15px; transition: all 0.2s ease 0s;"><strong style="border: 0px; box-sizing: border-box; list-style: none; margin: 0px; outline: 0px; padding: 0px;">REQUISITOS:</strong></span></div>
    </div>
    <div class="su-tabs-panes" style="border: 0px; box-sizing: border-box; color: #333333; list-style: none; margin: 0px; outline: 0px; padding: 0px;">
      <div class="su-tabs-pane su-clearfix" style="background: rgb(255, 255, 255); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: 0px; box-sizing: border-box !important; font-size: 13px; list-style: none; margin: 0px; outline: 0px; padding: 15px;">
        <div style="margin: 0px;">
          <br /></div>
      </div>
    </div>
  </div>
  <div style="-webkit-text-stroke-width: 0px; color: black; font-family: &quot;Times New Roman&quot;; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
  </div>
  <br />
  <div class="su-tabs su-tabs-style-default" data-active="1" style="-webkit-text-stroke-width: 0px; background: rgb(238, 238, 238); border-radius: 3px; border: 0px; box-sizing: border-box; color: black; font-family: &quot;droid sans&quot;; font-size: 14px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; list-style: none; margin: 0px 0px 1.5em; orphans: 2; outline: 0px; padding: 3px; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
    <div class="su-tabs-nav" style="border: 0px; box-sizing: border-box !important; list-style: none; margin: 0px; outline: 0px; padding: 0px;">
      <div style="margin: 0px;">
        <div style="text-align: center;">
          <span class="su-tabs-current" data-target="blank" data-url="" style="background: rgb(255 , 255 , 255); border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; box-sizing: border-box; color: red; cursor: default; display: inline-block; font-size: 1.3em; font-weight: 700; line-height: 20px; list-style: none; margin: 0px 3px 0px 0px; min-height: 40px; outline: 0px; padding: 10px 15px; transition: all 0.2s ease 0s;"><strong style="border: 0px; box-sizing: border-box; list-style: none; margin: 0px; outline: 0px; padding: 0px;">INSTALAÇÃO:</strong></span></div>
      </div>
    </div>
    <div class="su-tabs-panes" style="border: 0px; box-sizing: border-box; color: #333333; list-style: none; margin: 0px; outline: 0px; padding: 0px;">
      <div class="su-tabs-pane su-clearfix" style="background: rgb(255, 255, 255); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: 0px; box-sizing: border-box !important; font-size: 13px; list-style: none; margin: 0px; outline: 0px; padding: 15px;">
        <div style="margin: 0px;">
          <br /></div>
      </div>
    </div>
  </div>
  <div style="text-align: center;">
    <br /></div>
</div>

  • 1

    But why did you replicate the element su-tabs not only defined a new element in su-tabs-nav and in su-tabs-panes? Do you have any idea how this HTML works? Could you explain element by element to us?

  • Because you do not part of a Tabs component ready? There is something not worth doing from 0 to my view... Search for "Tab Component" in Google you will find a multitude of examples...

  • I saw it on a blog, but they only present the commands and a very vague model, I just modified the fonts , colors and rounded the edges, and wanted to put the installation and the requirement together so I could change from one stop to the other to the post not stay so long, gave mó of the work to assemble this and the width adapts in my blog perfectly. but thanks for your attention

  • i made a different one, there is only the image Ex: "Requirements: Click here to Expand Expand" ai mostra o texto! economizo um bom espaço!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.