Detalhes da questão

Endereço do fórum: http://soulfulbrmusic.forumais.com/forum
Versão do fórum: PunBB

Descrição

Boa Tarde a todos, gostaria de criar o mesmo efeito dessa imagem, no sistema de anúncios do fórum

Spoiler:

É do site R7

Obrigada desde já

Algo Similiar:

Código:

#fa_ticker_block {
    padding-top: 12px;
    position: relative;
}
#fa_ticker_block:before {
    content: url('http://i21.servimg.com/u/f21/18/76/69/60/aarow110.png');
    left: 10px;
    position: absolute;
    top: 0;
}
#fa_ticker_block .module {
    background: #369FCF;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #FFF;
    font-size: 11px;
    margin: 10px 0;
    padding: 6px 0;
    position: relative;
}

Feito isto, você salva e vai em Painel de Controle > Geral > Mensagens e Emails > Anuncios

Você deixa assim configurado:

- Deixa a opção Ativar os anúncios marcada em sim.
- Exibição dos anúncios opcional.
- Scrolling marcada em desativar.
- E as demais são opcional também.

Depois disto, você salve e desce um pouco mais ainda ai, e clique no botão +, e crie um anuncio.

Simples não? espero ter entendido.

Olá Gustavo agradeço a ajuda, mas seria como na foto mesmo e também ficou um pouco desalinhado.

Boa noite, senhora.

Poderia fornecer o endereço do fórum em que viu tal função?

Até mais.

Boa noite Fraise o site é o R7, se encontra logo no início.

UP!

Olá se for o alinhamento adicione em sua css:

Código:

widtht 90%
}
height 90%

Bom o maximo que fiz:

Bom eu até tentei ver se eu conseguia pegar o codigo,mais não da o codigo tem que adaptá-lo.

Olá Gustavo, não é o alinhamento é que eu gostaria mesmo do efeito da imagem
Que está no site!

Desde já agradeço

P.S. o site é o R7.com

Bom dia!

Vamos aos poucos... ok? Adicione esse CSS:

Código:

#fa_ticker .fa_ticker_content:before {content: "MATEUS";height: 40px;font-weight: bold;background:#258acd;padding: 15px;position: absolute;left: -90px;line-height: 1px;
color: white}
 
#fa_ticker {line-height: 10px !important;}

E ative os anúncios!
Troque o nome "MATEUS" no código pelo que desejar.

Bom dia Mateus, já inseri o código e ativei os anúncios...
E agora?

Adicione mais esse codigo CSS na sua folha de estilo

Código:

.module .main-content {
    outline: 1px solid #eee;
    overflow: hidden;
    line-height: 38px;
    margin-top: 1px;
}


Não resultou, desalinhou os widgets...

@MateusAnjosV com esse código é possível ativar os anúncios rotativos, ou tem que ser apenas 1?

Agradeço.

Eu estou fazendo o possível para deixa-lo nos anúncios rotativos, mas é um CSS um tanto chato – fora a quantidade de tópicos que tem no fórum e meu tempo disponível –, a senhorita deseja apenas um? Ou estou certo em adaptar para rotativo?

Olá Mateus pode fechar o tópico, irei utilizar imagens ou darei outro jeito.
Desde já agradeço a ajuda e desculpe o incomodo

Editado

Irei aguardar o código Mateus, obrigada

Olá senhorita!

Adicione em seu CSS:

Código:

 /* parte esquerda */
  #pe {
    background: #2489CD;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    height: 15px;
    line-height: 15px;
    max-height: 26px;
    padding: 10px !important
    text-align: center;
    width: 50px;
    z-index: 4;
  }
  #corpo {float: left}
#pe:after {
    border-bottom: 18px solid transparent;
    border-left: 15px solid #2489CD;
    border-top: 20px solid transparent;
    content: "";
    display: inline-block;
    height: 0;
    margin-left: 13px;
    margin-right: 10px;
    position: absolute;
    top: -2px;
    vertical-align: middle;
    width: 0;
    z-index: 5;
    }

  /* parte direita */
#pd { 
    background: #F9FAFA;
    border: 1px solid #F2F2F2;
    border-left: none!important;
    color: #000;
    font-family: Arial;
    font-weight: 700;
    height: 17px;
    left: 70px;
    max-height: 30px;
    padding: 10px 10px 10px 50px;
    position: relative;
    text-align: left;
    top: -37px;
    line-height: 13px;
    width: 400px;
    z-index: 1;
    font-size: 20px;
  }

E no anúncio, utilize:

Código:

<div id="corpo">
    
   <div id="pe">
      FDF
   </div>
    
   <div id="pd">
      Harley Quinn
   </div>
</div>

Harley Quinn é o texto do anúncio do lado direito.
FDF é o texto do lado esquerdo, você pode editar ambos.
Exemplo de preenchimento:
http://prntscr.com/9bw79n

Seria assim?

É isso mesmo Mateus, você é 10!
Mas percebi que se inserir uma palavra grande no lugar de "FDF" fica esticado, em que parte eu posso regular o tamanho?

Fico feliz que tenha resultado.
Para regular o tamanho, procure por:

Código:

    width: 50px;

E com isso, consequentemente a seta deve ir para a direita, você pode move-la nessa parte:

Código:

 margin-left: 13px;

Olá Mateus eu já regulei esses tamanhos porém, ainda não está do jeito que quero.
Neste anúncio a palavra é "Neo Soul" e como você pode ver está cortada, só regular esse tamanho e vai ficar mara!

Hm... adicione mais esse CSS:

Código:

  #pe {z-index: 15 !important;width: 100px !important}
  #pd {z-index: 2 !important;left: 120px;}

A intenção é ficar assim:

Bom dia Mateus!
É isso mesmo, mais uma vez agradeço a paciência.

Resolvido

De nada.

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".