Logo e descrição

Detalhes da questão

Endereço do fórum: http://alterlove.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Gostaria de deixar a logotipo e a descrição do fórum igual a imagem abaixo;
https://i.servimg.com/u/f62/15/86/28/62/2018-011.png

Coloquei uma logo na "Logo do fórum" no painel mas não funciona, apenas "Imagem de fundo do menu de navegação"

Olá, adicione ao final de sua folha de estilo CSS
Painel de Controle Visualização Imagens e Cores Cores

Código:

@import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC');
.headerbar {
    background-color: #ffff00;
}
.headerbar:after {
    content: 'Alter Love';
    margin: 90px 0 0 90px;
    position: absolute;
    font-size: 110px;
    font-weight: bolder;
    color: black;
    letter-spacing: 6px;
    width: 418px;
    line-height: 106px;
    font-family: 'Bowlby One SC', cursive;
}
div#site-desc {
    border-left: 1px solid black;
    height: 150px;
    padding: 0 0 50px 50px;
    margin-left: 500px;
    top: 105px;
    overflow-x: auto;
    box-sizing: content-box;
}
div#site-desc p {
    font-size: 3em;
    font-weight: bolder;
    color: black;
    font-family: 'Trebuchet MS',sans-serif;
}


Até mais.

virus escreveu:Olá, adicione ao final de sua folha de estilo CSS
Painel de Controle Visualização Imagens e Cores Cores

Código:

@import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC');
.headerbar {
    background-color: #ffff00;
}
.headerbar:after {
    content: 'Alter Love';
    margin: 90px 0 0 90px;
    position: absolute;
    font-size: 110px;
    font-weight: bolder;
    color: black;
    letter-spacing: 6px;
    width: 418px;
    line-height: 106px;
    font-family: 'Bowlby One SC', cursive;
}
div#site-desc {
    border-left: 1px solid black;
    height: 150px;
    padding: 0 0 50px 50px;
    margin-left: 500px;
    top: 105px;
    overflow-x: auto;
    box-sizing: content-box;
}
div#site-desc p {
    font-size: 3em;
    font-weight: bolder;
    color: black;
    font-family: 'Trebuchet MS',sans-serif;
}


Até mais.

Opa, funcionou, mas teria como adicionar uma imagem na logo? E retirar o nome do fórum. O tamanho seria mais ou menos o que está na imagem de exemplo.

Boa noite.
Você quer que eu retire o texto da logo e deixe apenas a imagem?
O problema que trabalhar com imagem dessa forma é muito ruim. Por a caso você tem uma imagem com apenas o texto?

Se também você me dizer qual fonte você usou talvez eu possa encontrar uma forma de obter o mesmo resultado da imagem sem precisar utilizar uma imagem.

Até a próxima.

virus escreveu:Boa noite.
Você quer que eu retire o texto da logo e deixe apenas a imagem?
O problema que trabalhar com imagem dessa forma é muito ruim. Por a caso você tem uma imagem com apenas o texto?

Se também você me dizer qual fonte você usou talvez eu possa encontrar uma forma de obter o mesmo resultado da imagem sem precisar utilizar uma imagem.

Até a próxima.

Pode ser também
Aqui o link da fonte que usei; http://www.fontspace.com/fz/skam-font

Boa tarde. Troque o código anterior por este:
Painel de Controle Visualização Imagens e Cores Cores

Código:

.headerbar:after {
    content: '';
    background: yellow url(https://i.imgur.com/AUwJWXy.png);
    background-position: center center;
    margin-top: 110px;
    margin-left: 4vw;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    height: 88px;
    width: 469px;
}
.headerbar {
    background-image: none;
    background-color: #ffff00;
}
div#site-desc {
    border-left: 1px solid #000;
    box-sizing: content-box;
    height: 150px;
    margin-left: 500px;
    overflow-x: auto;
    padding: 10px 0 50px 50px;
    top: 105px;
}
div#site-desc p {
    font-size: 3em;
    font-weight: bolder;
    color: black;
    font-family: 'Trebuchet MS',sans-serif;
}

A imagem utilizada foi esta: https://i.imgur.com/AUwJWXy.png

Até mais.

virus escreveu:Boa tarde. Troque o código anterior por este:
Painel de Controle Visualização Imagens e Cores Cores

Código:

.headerbar:after {
    content: '';
    background: yellow url(https://i.imgur.com/AUwJWXy.png);
    background-position: center center;
    margin-top: 110px;
    margin-left: 4vw;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    height: 88px;
    width: 469px;
}
.headerbar {
    background-image: none;
    background-color: #ffff00;
}
div#site-desc {
    border-left: 1px solid #000;
    box-sizing: content-box;
    height: 150px;
    margin-left: 500px;
    overflow-x: auto;
    padding: 10px 0 50px 50px;
    top: 105px;
}
div#site-desc p {
    font-size: 3em;
    font-weight: bolder;
    color: black;
    font-family: 'Trebuchet MS',sans-serif;
}

A imagem utilizada foi esta: https://i.imgur.com/AUwJWXy.png

Até mais.

Perfeito.
Muito obrigado.