Sidebar Button

[Kawa]

Salut,

Am creat si eu un button pentru conectarea automata la serverul de TeamSpeak si doresc sa fie doar pe pagina principala in partea dreapta.

M-am gandit sa-l pun in widgetContainer insa problema este ca-mi apare peste tot unde am widget-uri.

M-am gandit sa-l pun in sidebar insa imi apare si atunci cand intru pe o categorie.

Daca il pun in index, mi-l pune ca in imaginea de mai jos.

Acesta este codul html

<a href="ts3server://ts3.egaming.ro?port=9999"><button class="TS3BT" style="vertical-align:middle"><span>Connect TeamSpeak3</span></button></a>

Acesta este codul CSS

.TS3BT {
  display: inline-block;
  border-radius: 4px;
  background-color: #2d6a9b;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 10px;
  width: 280px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.TS3BT span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.TS3BT span:after {
  content: '>>';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.TS3BT:hover span {
  padding-right: 25px;
}

.TS3BT:hover span:after {
  opacity: 1;
  right: 0;
}

 

Prin urmare, unde ar trebuii sa-l pun sau ce-mi lipseste din codul HTML?

[DeNyS.]

Adauugă-l cu Custom block, fără clasă luată cu Inspect Element. După ii dai clasele de la CSS. Ai acolo in acel Block Custom topt ce iți trebuie ca să adaugi cod.

[Marlboro]

Cred ca poti adauga si cu acest plugin https://invisionpower.com/files/file/7337-txt-php-widget/

[DeNyS.]

Folosește clase diferite față de alea de default. Făți un buton custom, fără să folosești „ipsWidget_title” etc. Dacă nu reusești, contactează-mă prin PM.

[Marlboro]

Sau poti incerca si acesta .

<div class="ipsWidget_inner ipsPad">
	
	
		<p class="ipsType_reset ipsType_medium ipsType_light"></p><div class="ipsSideBlock clearfix __xX20get20in20touch20with20us21">
	<h3 class="csbNoCollapse" id="anonymous_element_1"><a href="#" class="ipsSidebar_trigger ipsType_smaller right desc mod_links"></a></h3>
	<div class="_sbcollapsable">
		<div class="_sbcollapsable">
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,600);
figure.snip0068 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #446CB3;
  position: relative;
  overflow: hidden;
  margin: 0;
  min-width: 220px;
  max-width: 310px;
  max-height: 280px;
  width: 100%;
  background: #000000;
  text-align: center;
}

.str-advertising{width:280px;height:270px;overflow:hidden;position:relative;cursor:default}.str-advertising:before{content:"";background:rgba(86,133,216,0.28);height:240px;width:340px;position:absolute;transform:rotate(-7deg);margin-top:300px;right:-33px;transition:all 0.3s cubic-bezier(0.4,0,1,1)}.str-advertising:hover:before{margin-top:165px}.str-adv-box{padding-top:100px}.str-adv-A{text-align:center;color:white;font-weight:400;letter-spacing:2px;font-style:italic;font-size:30px}.str-adv-B{text-align:center;font-size:8px;color:#eee;letter-spacing:0.5px;font-weight:400;margin-top:10px}.str-adv-button{text-align:center;margin:110px
0 0 0;transition:all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);top:0;position:relative;opacity:0;cursor:pointer}.str-advertising:hover .str-adv-button{top:-40px;opacity:1}.str-adv-buton{font-size:20px;font-weight:200;text-transform:uppercase;letter-spacing:3px;padding:10px;transition:all 0.2s}
</style>
<div class="str-advertising" style=" background-image: url('http://i.imgur.com/rsg0krJ.png') !important">
                          <div class="str-adv-box">

                              <div class="str-adv-A">Teamspeak</div>
                              <div class="str-adv-B">USE OUR TEAMSPEAK FOR BEST VOICE CHAT EXPERIENCE</div>
                              <div class="str-adv-button"><a href="ts3server://ts.dust3.xyz?port=9987" class="str-adv-buton">Connect</a></div>
                          </div>
                        </div><p></p>
	
</div></div></div></div>

 

[Kawa]

<li class="ipsWidget ipsWidget_vertical ipsBox" data-controller="core.front.widgets.block">
    <div class="ipsWidget ipsWidget_vertical ipsBox">
        <h3 class="ipsType_reset ipsWidget_title">Fast Connect</h3>
        <div class="ipsWidget_inner">

<a href="ts3server://ts3.egaming.ro?port=9999"><button class="TS3BT" style="vertical-align:middle"><span> TeamSpeak3</span></button></a>
          
        </div>
    </div>
</li>

 

Edited May 20, 2017 by Kawa

[DeNyS.]

3 hours ago, Marlboro said:

Sau poti incerca si acesta .

<div class="ipsWidget_inner ipsPad">
	
	
		<p class="ipsType_reset ipsType_medium ipsType_light"></p><div class="ipsSideBlock clearfix __xX20get20in20touch20with20us21">
	<h3 class="csbNoCollapse" id="anonymous_element_1"><a href="#" class="ipsSidebar_trigger ipsType_smaller right desc mod_links"></a></h3>
	<div class="_sbcollapsable">
		<div class="_sbcollapsable">
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,600);
figure.snip0068 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #446CB3;
  position: relative;
  overflow: hidden;
  margin: 0;
  min-width: 220px;
  max-width: 310px;
  max-height: 280px;
  width: 100%;
  background: #000000;
  text-align: center;
}

.str-advertising{width:280px;height:270px;overflow:hidden;position:relative;cursor:default}.str-advertising:before{content:"";background:rgba(86,133,216,0.28);height:240px;width:340px;position:absolute;transform:rotate(-7deg);margin-top:300px;right:-33px;transition:all 0.3s cubic-bezier(0.4,0,1,1)}.str-advertising:hover:before{margin-top:165px}.str-adv-box{padding-top:100px}.str-adv-A{text-align:center;color:white;font-weight:400;letter-spacing:2px;font-style:italic;font-size:30px}.str-adv-B{text-align:center;font-size:8px;color:#eee;letter-spacing:0.5px;font-weight:400;margin-top:10px}.str-adv-button{text-align:center;margin:110px
0 0 0;transition:all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);top:0;position:relative;opacity:0;cursor:pointer}.str-advertising:hover .str-adv-button{top:-40px;opacity:1}.str-adv-buton{font-size:20px;font-weight:200;text-transform:uppercase;letter-spacing:3px;padding:10px;transition:all 0.2s}
</style>
<div class="str-advertising" style=" background-image: url('http://i.imgur.com/rsg0krJ.png') !important">
                          <div class="str-adv-box">

                              <div class="str-adv-A">Teamspeak</div>
                              <div class="str-adv-B">USE OUR TEAMSPEAK FOR BEST VOICE CHAT EXPERIENCE</div>
                              <div class="str-adv-button"><a href="ts3server://ts.dust3.xyz?port=9987" class="str-adv-buton">Connect</a></div>
                          </div>
                        </div><p></p>
	
</div></div></div></div>

 

Fara lucruri copiate de la plagiatoru' de StrongTAZ. 

 

[Kawa]

Am reusit intr-un final, va multumesc tuturor.