Jak włączyć linki na dvz shoutbox?

**Zawistny** · (Ten post był ostatnio modyfikowany: 29.01.2016, 18:43 przez Zawistny.)

Wersja skryptu MyBB: 1.8
Adres forum: rh.xaa.pl
Na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):
1) Jak włączyć linki na shoutboxie?
2) Po wylogowaniu w miejscu pola tekstowego robi się luka (http://i.imgur.com/Jk5EUSN.png) (http://i.imgur.com/EWdkzx1.png). Jeśli się przyjrzysz zauważysz na pierwszym screenie w miejscu tego pola niewyraźny zarys krawędzi shoutboxa. Co zrobić żeby niezalogowani nie widzieli tego pustego pola?

shoutbox.css:

#shoutbox{
  margin-bottom: 10px; border: solid 2px rgba(0,0,0,0.1); height: 309px; width: 100%;
}
#shoutbox .head {
    background-color: #efefef;
    color: #444;
    font-size: 17px;
    font-weight: bold;
    padding: 10px 15px;
    text-transform: uppercase;
}
#shoutbox .head a{
  display: none;
  cursor: pointer;
}
#shoutbox .body{
    position: relative;
  padding-top: 160px;
  margin-bottom: 10px;
}
#shoutbox .window {
    position: absolute;
    top: 0;
    width: 99%;
    background-color: #0F0F0F;
    padding: 0.5%;
    overflow-y: scroll;
    max-width: 100%;
}
#shoutbox .data {
  font-size: 13px;
  font-family: inherit;
}
#shoutbox .entry { 
  border-bottom: 1px solid #000;
  margin-bottom: 5px;
  padding-bottom: 5px;
  display: block !important;
  overflow: hidden;
  clear: left;
  background: #0F0F0F;
  position: relative;
}
#shoutbox .entry > div {
  border: none;
}
#shoutbox .entry .avatar {
  float: left;
  margin-right: 10px;
  padding: 0;
}
#shoutbox .entry .avatar img {
  height: 50px;
  width: 50px;
  padding: 1px;
  margin-left: 7px;
  margin-top: 3px;
  box-shadow: 0 0 2px rgba(0,0,0,0.1); cursor: pointer; border-radius: 50%;
}
#shoutbox .entry .info {
  color: #777;
  position: absolute;
  margin-top: 5px;
  right: 0;
  font-size: 10px;
}
#shoutbox .entry .user {
  display: inline;
  padding: 0;
  font-size: 14px;
  text-transform: uppercase;
}
#shoutbox .entry .user em{
  font-style: normal;
}
#shoutbox .body .panel {
    position: absolute;
    top: 240px;
    width: 99%;
    margin: 0;
    padding: 0.5%;
    border-top: 1px dotted #0F0F0F;
    background-color: #0F0F0F;
}
#shoutbox .body .panel form{

}
#shoutbox input.text {
    background: #0f0f0f;
    border: 1.5px solid #1a1a1a;
    color: #BDBDBD;
    font-family: inherit;
    font-size: 13px;
    height: 30px;
    line-height: 1.5;
    padding: 5px 10px;
    box-shadow: 0 0 7px rgba(0,0,0,1.0);
    width: 100%;
}
#shoutbox input.text:focus {
    border-color: #3c8dbc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(60, 141, 188, 0.6);
}
#shoutbox .user {
    border-right: 0px solid rgba(0,0,0,0.05);
    font-size: 11px;
    position: relative;
    top: 4px;
}
#shoutbox .mod:nth-of-type(2) {
    margin-right: 5px;
    border-left: solid 0px rgba(0,0,0,0.1);
}
.codeblock {
    background: transparent;
    border: 0px solid #ccc;
    padding: 0px;
}
.codeblock .title {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    padding-bottom: 3px;
    margin: 0 0 10px 0;
}
.codeblock code {
    overflow: auto;
    height: auto;
    height: 200px;
    display: block;
    font-family: Monaco, Consolas, Courier, monospace;
    font-size: 13px;
}
#shoutbox .entry {
    padding-bottom: 10px;
    border-bottom: 1px dotted #1a1a1a;
}
#shoutbox .entry .text {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    position: relative;
    top: 4px;
    padding: 5px 10px 5px;
    background:  #1a1a1a;
        box-shadow: 0 0 2px rgba(0,0,0,0.1);
    margin: 5px 0 0 50px;
        margin-left: 65px;
    color: #BDBDBD;
}
#shoutbox .entry .text:after,
#shoutbox .entry .text:before {
    position: absolute;
    right: 100%;
    top: 16px;
    border: solid transparent;
    border-right-color:  #1a1a1a;
        box-shadow: 0 0 2px rgba(0,0,0,0.1);
    content: ' ';
    height: 0;
    width: 0;
    pointer-events: none;
}
#shoutbox .entry .text:after {
    border-width: 5px;
    margin-top: -16px;
}
#shoutbox .entry .text:before {
    border-width: 6px;
    margin-top: -16px;
}
#shoutbox .entry .user {
    font-size: 11px;
}
#shoutbox .entry .info {
    top: -5px;
}

#shoutbox .panel.blocked {
 background: #0F0F0F; color: #543A3A;
}

#shoutbox .panel p {
 margin: 5px;
 margin-left: 6px;
 color: #BDBDBD;
} 

Konto testowe:
Login: Testowy
Hasło: test123

**aycrash** · 29.01.2016, 15:04

W szablonie dvz_shoutbox
Zamień:

<div class="window" style="height:230px;">

Na:

<div class="window" style="height:309px;">

**Zawistny** · 29.01.2016, 16:01

Nie działa :/ Zakrywa pole tekstowe (jeśli jest się zalogowanym) i wychodzi na działy: http://scr.hu/7xit/mt8yr

**NiespecjalnieUzdolniony** · 29.01.2016, 16:27

A jaka przeglądarka?

**Zawistny** · 29.01.2016, 16:50

Google Chrome

**NiespecjalnieUzdolniony** · 29.01.2016, 17:13

Więc tak:
Wchodzisz w shoutbox.css
i jak masz #shoutbox .body
to usuwasz z tego padding-top:160px; i margin-bottom:10px;
Dodaj tam width:100%; height:240px; i overflow:auto;

następnie w .panel
usuwasz top:240 i wstawiasz bottom:0;
zamieniasz width:99% na width:100%

dopisujesz tam jeszcze
height:40px; i box-sizing:border-box;

następnie w .window
height:200px zamiast tych 230px
box-sizing:border-box;
width: jak wolisz możesz zostawić lekko wcięte( ja bym dał 99.5% bo troszkę za duże jest teraz.

**Zawistny** · (Ten post był ostatnio modyfikowany: 29.01.2016, 17:27 przez Zawistny.)

Rezultat: http://scr.hu/7xit/o4m0l
I jeszcze mała uwaga: chciałbym aby pole tekstowe wyświetlało się na dole

**NiespecjalnieUzdolniony** · 29.01.2016, 17:28

blad 404

**Zawistny** · 29.01.2016, 17:29

http://i.imgur.com/ODVvvTI.png

**NiespecjalnieUzdolniony**

W #shoutbox .body nie wprowadziłeś stylów
i box-sizing do .window

**Zawistny** · 29.01.2016, 17:34

Wciąż nie działa :/

**NiespecjalnieUzdolniony**

Nie wszystko wprowadziłeś to co ci napisałem :/
Jak chcesz zwiększyć okno to w
#shoutbox .body zwiększasz width:
a w .window zwiększasz to width o tyle samo co #shoutbox .body
do .panel też lepiej daj box-sizing:border-box

**Zawistny** · 29.01.2016, 17:40

Pogubiłem się :/
Tutaj jest kod przed dodaniem tego co podałeś:

#shoutbox{
  margin-bottom: 10px; border: solid 2px rgba(0,0,0,0.1); height: 309px; width: 100%;
}
#shoutbox .head {
    background-color: #efefef;
    color: #444;
    font-size: 17px;
    font-weight: bold;
    padding: 10px 15px;
    text-transform: uppercase;
}
#shoutbox .head a{
  display: none;
  cursor: pointer;
}
#shoutbox .body{
    position: relative;
  padding-top: 160px;
  margin-bottom: 10px;
}
#shoutbox .window {
    position: absolute;
    top: 0;
    width: 99%;
    background-color: #0F0F0F;
    padding: 0.5%;
    overflow-y: scroll;
    max-width: 100%;
}
#shoutbox .data {
  font-size: 13px;
  font-family: inherit;
}
#shoutbox .entry { 
  border-bottom: 1px solid #000;
  margin-bottom: 5px;
  padding-bottom: 5px;
  display: block !important;
  overflow: hidden;
  clear: left;
  background: #0F0F0F;
  position: relative;
}
#shoutbox .entry > div {
  border: none;
}
#shoutbox .entry .avatar {
  float: left;
  margin-right: 10px;
  padding: 0;
}
#shoutbox .entry .avatar img {
  height: 50px;
  width: 50px;
  padding: 1px;
  margin-left: 7px;
  margin-top: 3px;
  box-shadow: 0 0 2px rgba(0,0,0,0.1); cursor: pointer; border-radius: 50%;
}
#shoutbox .entry .info {
  color: #777;
  position: absolute;
  margin-top: 5px;
  right: 0;
  font-size: 10px;
}
#shoutbox .entry .user {
  display: inline;
  padding: 0;
  font-size: 14px;
  text-transform: uppercase;
}
#shoutbox .entry .user em{
  font-style: normal;
}
#shoutbox .body .panel {
    position: absolute;
    top: 240px;
    width: 99%;
    margin: 0;
    padding: 0.5%;
    border-top: 1px dotted #0F0F0F;
    background-color: #0F0F0F;
}
#shoutbox .body .panel form{

}
#shoutbox input.text {
    background: #0f0f0f;
    border: 1.5px solid #1a1a1a;
    color: #BDBDBD;
    font-family: inherit;
    font-size: 13px;
    height: 30px;
    line-height: 1.5;
    padding: 5px 10px;
    box-shadow: 0 0 7px rgba(0,0,0,1.0);
    width: 100%;
}
#shoutbox input.text:focus {
    border-color: #3c8dbc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(60, 141, 188, 0.6);
}
#shoutbox .user {
    border-right: 0px solid rgba(0,0,0,0.05);
    font-size: 11px;
    position: relative;
    top: 4px;
}
#shoutbox .mod:nth-of-type(2) {
    margin-right: 5px;
    border-left: solid 0px rgba(0,0,0,0.1);
}
.codeblock {
    background: transparent;
    border: 0px solid #ccc;
    padding: 0px;
}
.codeblock .title {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    padding-bottom: 3px;
    margin: 0 0 10px 0;
}
.codeblock code {
    overflow: auto;
    height: auto;
    height: 200px;
    display: block;
    font-family: Monaco, Consolas, Courier, monospace;
    font-size: 13px;
}
#shoutbox .entry {
    padding-bottom: 10px;
    border-bottom: 1px dotted #1a1a1a;
}
#shoutbox .entry .text {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    position: relative;
    top: 4px;
    padding: 5px 10px 5px;
    background:  #1a1a1a;
        box-shadow: 0 0 2px rgba(0,0,0,0.1);
    margin: 5px 0 0 50px;
        margin-left: 65px;
    color: #BDBDBD;
}
#shoutbox .entry .text:after,
#shoutbox .entry .text:before {
    position: absolute;
    right: 100%;
    top: 16px;
    border: solid transparent;
    border-right-color:  #1a1a1a;
        box-shadow: 0 0 2px rgba(0,0,0,0.1);
    content: ' ';
    height: 0;
    width: 0;
    pointer-events: none;
}
#shoutbox .entry .text:after {
    border-width: 5px;
    margin-top: -16px;
}
#shoutbox .entry .text:before {
    border-width: 6px;
    margin-top: -16px;
}
#shoutbox .entry .user {
    font-size: 11px;
}
#shoutbox .entry .info {
    top: -8px;
}

#shoutbox .panel.blocked {
 background: #0F0F0F; color: #543A3A;
}

#shoutbox .panel p {
 margin: 5px;
 margin-left: 6px;
 color: #BDBDBD;
} 

Mógłbyś mi podać ten kod po edycji? Możliwe że coś pominąłem ;/

**NiespecjalnieUzdolniony**

#shoutbox{

  margin-bottom: 20px; border: solid 2px rgba(0,0,0,0.1); width: 100%;

}

#shoutbox .head {

    background-color: #efefef;

    color: #444;

    font-size: 17px;

    font-weight: bold;

    padding: 10px 15px;

    text-transform: uppercase;

}

#shoutbox .head a{

  display: none;

  cursor: pointer;

}

#shoutbox .body{

    position: relative;

    width:100%;

    height:260px;

    overflow:auto

}

#shoutbox .window {

    position: absolute;

    top: 0;

    width: 99.5%;

    background-color: #0F0F0F;

    padding: 0.5%;

    overflow-y: scroll;

    max-width: 100%;

    width:220px;

    box-sizing:border-box;

}

#shoutbox .data {

  font-size: 13px;

  font-family: inherit;

}

#shoutbox .entry { 

  border-bottom: 1px solid #000;

  margin-bottom: 5px;

  padding-bottom: 5px;

  display: block !important;

  overflow: hidden;

  clear: left;

  background: #0F0F0F;

  position: relative;

}

#shoutbox .entry > div {

  border: none;

}

#shoutbox .entry .avatar {

  float: left;

  margin-right: 10px;

  padding: 0;

}

#shoutbox .entry .avatar img {

  height: 50px;

  width: 50px;

  padding: 1px;

  margin-left: 7px;

  margin-top: 3px;

  box-shadow: 0 0 2px rgba(0,0,0,0.1); cursor: pointer; border-radius: 50%;

}

#shoutbox .entry .info {

  color: #777;

  position: absolute;

  margin-top: 5px;

  right: 0;

  font-size: 10px;

}

#shoutbox .entry .user {

  display: inline;

  padding: 0;

  font-size: 14px;

  text-transform: uppercase;

}

#shoutbox .entry .user em{

  font-style: normal;

}

#shoutbox .body .panel {

    position: absolute;

    bottom: 0;

    width: 100%;

    box-sizing:border-box;

    margin: 0;

    padding: 0.5%;

    border-top: 1px dotted #0F0F0F;

    background-color: #0F0F0F;

}

#shoutbox .body .panel form{

}

#shoutbox input.text {

    background: #0f0f0f;

    border: 1.5px solid #1a1a1a;

    color: #BDBDBD;

    font-family: inherit;

    font-size: 13px;

    height: 30px;

    line-height: 1.5;

    padding: 5px 10px;

    box-shadow: 0 0 7px rgba(0,0,0,1.0);

    width: 100%;

}

#shoutbox input.text:focus {

    border-color: #3c8dbc;

    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(60, 141, 188, 0.6);

}

#shoutbox .user {

    border-right: 0px solid rgba(0,0,0,0.05);

    font-size: 11px;

    position: relative;

    top: 4px;

}

#shoutbox .mod:nth-of-type(2) {

    margin-right: 5px;

    border-left: solid 0px rgba(0,0,0,0.1);

}

.codeblock {

    background: transparent;

    border: 0px solid #ccc;

    padding: 0px;

}

.codeblock .title {

    border-bottom: 1px solid #ccc;

    font-weight: bold;

    padding-bottom: 3px;

    margin: 0 0 10px 0;

}

.codeblock code {

    overflow: auto;

    height: auto;

    height: 200px;

    display: block;

    font-family: Monaco, Consolas, Courier, monospace;

    font-size: 13px;

}

#shoutbox .entry {

    padding-bottom: 10px;

    border-bottom: 1px dotted #1a1a1a;

}

#shoutbox .entry .text {

    border-bottom-left-radius: 3px;

    border-bottom-right-radius: 3px;

    border-top-right-radius: 3px;

    position: relative;

    top: 4px;

    padding: 5px 10px 5px;

    background:  #1a1a1a;

        box-shadow: 0 0 2px rgba(0,0,0,0.1);

    margin: 5px 0 0 50px;

        margin-left: 65px;

    color: #BDBDBD;

}

#shoutbox .entry .text:after,

#shoutbox .entry .text:before {

    position: absolute;

    right: 100%;

    top: 16px;

    border: solid transparent;

    border-right-color:  #1a1a1a;

        box-shadow: 0 0 2px rgba(0,0,0,0.1);

    content: ' ';

    height: 0;

    width: 0;

    pointer-events: none;

}

#shoutbox .entry .text:after {

    border-width: 5px;

    margin-top: -16px;

}

#shoutbox .entry .text:before {

    border-width: 6px;

    margin-top: -16px;

}

#shoutbox .entry .user {

    font-size: 11px;

}

#shoutbox .entry .info {

    top: -8px;

}

#shoutbox .panel.blocked {

 background: #0F0F0F; color: #543A3A;

}

#shoutbox .panel p {

 margin: 5px;

 margin-left: 6px;

 color: #BDBDBD;

}

Masz to i z diva z klasą windows usuń style="height:200px"

**Zawistny** · 29.01.2016, 17:55

Nie działa, pole tekstowe zniknęło całkowicie :/

Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Jak włączyć linki na dvz shoutbox?

Zawistny

aycrash

Zawistny

NiespecjalnieUzdolniony

Zawistny

NiespecjalnieUzdolniony

Zawistny

NiespecjalnieUzdolniony

Zawistny

NiespecjalnieUzdolniony

Zawistny

NiespecjalnieUzdolniony

Zawistny

NiespecjalnieUzdolniony

Zawistny

Użytkownicy przeglądający ten wątek:

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie