Detalhes da questão

Endereço do fórum: http://narutoexiled.forumeiros.com/
Versão do fórum: modernbb

Descrição

Como posso alterar a cor e mover o texto um pouco mais para a direita para não cobrir a imagem? Veja: https://i.imgur.com/1UEu93x.png

Código que uso:

Código:

<style type="text/css">.homepageTitle { color:#000; font-size:21px; font-style:italic; font-family:"Roboto", Verdana, Arial, Sans-serif; background:url(http://2img.net/i/fa/optimisation_fdf/fr/puce10.png) no-repeat 0 0; height:400px; padding:5px 0px 0px 25px; }
#homepageLogo { float:right; margin-left:20px; }
#hideHomepageMessage { float:right; cursor:pointer; }
 
/* INFO BOX */
#faInfo { color:#666; background:#FFF; border:1px solid #000; border-bottom-width:3px; border-radius:0 3px 3px 3px; padding:6px; }
#faInfoNav { background:#FFF; border:1px solid #000; border-bottom:none; border-radius:3px 3px 0 0; overflow:hidden; display:inline-block; }
#faInfoNav a { color:#333; background:#FFF; border-right:1px solid #000; font-size:11px; font-weight:bold; display:inline-block; padding:6px 9px; }
#faInfoNav a:hover, #faInfoNav .infoActif { color:#FFF; background:#000; }
#faInfoAnn { background-image:url('https://www.shareicon.net/data/128x128/2016/01/05/232812_desert_256x256.png') }
#faInfoSearch { background-image:url('https://www.shareicon.net/data/128x128/2016/01/05/232816_naruto_256x256.png') }
#faInfoExplain { background-image:url('https://www.shareicon.net/data/128x128/2016/01/05/232806_inuzuka_256x256.png') }
#faInfoSuggestion { background-image:url('https://www.shareicon.net/data/128x128/2016/01/05/232807_uchiha_256x256.png') }
#faInfoStaff { background-image:url('https://www.shareicon.net/data/128x128/2016/01/05/232814_akimichi_256x256.png') }
.infoBlock { text-align:justify; background-repeat:no-repeat; background-position:0 50%; padding-left:75px; min-height:100px; }
 
/* INFO NEWS */
.faNewsRow { background:#F0F6F8; border-radius:3px; margin:3px 0; padding:5px 10px; }
.faNewsRow a { font-weight:bold }
.faNewsDate { font-size:11px; font-style:italic; background:url(http://2img.net/i/fa/subsilver/icon_miniposted.gif) no-repeat 0 center; padding-left:12px; float:right; }
 
/* PROFILE STYLE */
#userProfile { font-size:11px; position:relative; margin-top:30px; margin-bottom:10px; }
#userProfile .leftCol { float:left; text-align:center; width:20%; }
#userProfile .rightCol { float:left; width:25%; }
#userName { background:#FFF; border:1px solid #DDD; color:#39C; font-weight:bold; font-family:"Trebuchet MS", Verdana, Arial, Sans-serif; border-radius:3px 3px 0 0; position:absolute; left:3px; top:-20px; padding:0 12px; line-height:18px; }
#userName span { font-weight:normal }
#userAvatar img { max-width:100px }
#userAvatar { display:inline-block; overflow:hidden; min-height:100px; min-width:100px; }
#userProfile .title { color:#39C; font-weight:bold; border-bottom:1px solid #39C; padding-bottom:3px; margin-bottom:3px; width:90%; }
#userProfile .statLabel { display:inline-block; width:850px; font-weight:bold; text-align:right; margin-right:6px; }
 
/* SEARCH BAR */
#fa_google_search form.gsc-search-box { width:80% }
.gsc-input-box { height:auto }
.gsc-search-box-tools .gsc-search-box .gsc-input, .gsib_a, .cse .gsc-control-cse, .gsc-control-cse { padding:0 }
.gsc-control-cse, .gsc-input-box, input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { background:none; border:none; }
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { height:12px; background-color:#369FCF; border-radius:0 3px 3px 0; margin:0; margin-left:21px; padding:10px; box-shadow:none; }
#gsc-i-id1 { height:18px !important; padding:6px 12px !important; border:1px solid #369FCF !important; box-shadow:none !important; cursor:text; }
#gsc-i-id1, .gsc-input-box-focus { border-radius:3px 0 0 3px }
.gsib_b { position:relative }
.gsst_a { position:absolute; top:6px; }</style>
<div id="faInfoNav">
                                                         <a href="#" class="infoActif" id="_faInfoAnn">Links rápidos</a><a href="#" id="_faInfoSearch">Evento atual</a><a href="#" id="_faInfoExplain">Explique sua dúvida</a><a href="#" id="_faInfoSuggestion">Como jogar</a><a href="#" id="_faInfoStaff" style="border:none">Equipe EXILED</a>
</div>
 
<div id="faInfo">
                                                                                                                      
   <div class="infoBlock" id="faInfoAnn">
                                                                                                                                 
      <div id="faNewsBox">
                                                                                                                                            
         <div class="faNewsRow">
                                                                            <a href="/f1-" itemprop="url">Regras do Sistema</a>                                                           
         </div>
                                                                                                                                            
         <div class="faNewsRow">
                                                                            <a href="/h1-" itemprop="url">Loja de Créditos</a>                                                           
         </div>
                                                                                                                                            
         <div class="faNewsRow">
                                                                            <a href="/f10-" itemprop="url">Dúvidas & Sugestões</a>                                                           
         </div>
                                                                                        
         <div class="faNewsRow">
                                                                            <a href="/t321-" itemprop="url">Lista de Itens</a>                                                           
         </div>
                                                                                                                                        
      </div>
                                                                                                                                 
      <div style="display:none" id="faNewsRSS">
                                                                                                                                  
      </div>
                                                                                                                           
   </div>
                                                                                                                      
   <div style="display:none;" class="infoBlock" id="faInfoSearch">
                                                                    a                                               
      <div style="display:none;height:30px;padding:6px 0;" id="fa_google_search">
                                                                     c                                                         
      </div>
                                                                                                                                 
      <form action="/search" method="get" class="faForumSearch" style="padding:6px 0;" id="searchNoJS">
                                                                           <input type="text" value="" name="search_keywords" style="width:75%;" class="inputbox search" />      <input type="submit" value="Search" class="button2" />                                                             
      </form>
                                                                    b                                                   
   </div>
                                                                                                                        
   <div style="display:none;" class="infoBlock" id="faInfoExplain">
                                                                    Se você explicar o problema que está enfrentando apresentando todos os detalhes, o suporte será mais rápido!  Acesse a área de <a href="/f10-" style="font-weight:bold;" itemprop="url">Dúvidas</a>. <br /><br />                                                           
   </div>
                                                                                                                        
   <div style="display:none;" class="infoBlock" id="faInfoSuggestion">
                                                                    Após ler as regras, o primeiro passo é criar a sua ficha. Para isso, acesse a área <a href="/f7-" style="font-weight:bold;" itemprop="url">Diretório de Fichas</a>  <br /><br />    Por favor, leve o tempo que for necessário.                                                       
   </div>
                                                                                                                        
   <div style="display:none;" class="infoBlock" id="faInfoStaff">
                            A equipe deste fórum não lhe fornece qualquer apoio por MP. Para que suas dúvidas sejam sanadas, por favor, crie um novo tópico no setor de dúvidas para que possa ser atentido. Se o seu problema requer que você entre em contato com um membro do administrativo, você pode ver a composição da equipe abaixo:<br /><br />                                          <script type="text/javascript">
    myStaff = ['/u1', '/u75', '/u72'];
      staff_cache_time = 4*60*1000; // mm*ss*ms;
      </script>                       
      <div id="theStaff">
                                                                                
      </div>
                                                       
      <div id="theContent" style="display:none">
                                                                                
      </div><script type="text/javascript">
 
 
      if (localStorage.staffOn && localStorage.staffEx > +new Date - staff_cache_time) jQuery('#theStaff').html(localStorage.staffOn);
      else loadStaff();
      function loadStaff() {
        jQuery('#theContent').load('/viewonline #main-content a, a.gen', function() {
          for (i=0; i<myStaff.length; i++) jQuery('#theContent a').filter(function() { return jQuery(this).attr('href') === myStaff[i] }).appendTo('#theStaff').wrap('<div class="myStaff">');
          if (!jQuery('#theStaff .myStaff').length) jQuery('#theStaff').html('Sem equipe moderação online.');
          jQuery('.myStaff a').each(function() {
            var href = jQuery(this).attr('href');
            jQuery(this).before('<span class="monAva"></span>').prev().load(href + ' #profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', function() {
              if (window.localStorage) {
                localStorage.staffOn = jQuery('#theStaff').html();
                localStorage.staffEx = +new Date;
              }
 
            });
          });
        });
      }
 
    jQuery(document).ready(function(){      jQuery('.myStaff a').each(function() {    var href = jQuery(this).attr('href');
    var mp = this.pathname; var user = mp.substring(1,5); var usert = "/privmsg?mode=post&u=";var mpuser = usert + user;
    jQuery(this).after('<br><span class="monPro"> <a href='+href+'><img src="https://i18.servimg.com/u/f18/16/89/96/68/profil27.png"></a> <a href='+mpuser+'><img src="https://i18.servimg.com/u/f18/16/89/96/68/pm13.png"></a></span>');
    });
    });
      </script><style type="text/css">.monAva img {
      height: 20px;
      width: 20px;
      margin-right: 5px;
      background: none repeat scroll 0 0 #FFF;
      border: 1px solid #d5d1c8;
      box-shadow: 0 2px 2px rgba(0,0,0,0.1);
      padding: 1px;
    }
    .monAva img:hover {
      border: 1px solid black;
    }
.myStaff a {
    margin: 0 !important;
    vertical-align: top !important;
}
        .monPro {position: relative; left: 25px;top: 5px}
    </style>                         
   </div>
                                                                                                            
</div><script type="text/javascript">// <![CDATA[
(function(J, U, L) {
  var main = document.getElementById('main-content'), // main container
 
      // news nodes and data
      news = document.getElementById('faNewsBox'),
      newsTopics = news.getElementsByTagName('DIV'),
      storage = window.localStorage,
      rss = document.getElementById('faNewsRSS'),
 
      homepage = J('.introduction', main)[0], // homepage message
 
      // google search
      cx = '018097555942133585918:_gwf276jof8',
      gcse = document.createElement('script'),
      s = document.getElementsByTagName('script')[0],
 
      // info box
      infoLinks = document.getElementById('faInfoNav').getElementsByTagName('A'),
 
      // hide button
      hide = document.getElementById('hideHomepageMessage'),
 
      // profile variables
      profil,
      login;
 
  document.getElementById('fa_google_search').style.display = 'block'; // show google search for JS user
  document.getElementById('searchNoJS').style.display = 'none'; // hide normal search for JS users
 
  // hide homepage
  if (my_getcookie('faHomepage') == 'hidden') {
    hide.src = 'http://2img.net/i/fa/m/tabs_more1.gif';
    document.getElementById('homepageMessage').style.display = 'none';
    document.getElementById('hiddenTitle').style.display = 'block';
  }
 
  // get news topics
  if (storage && storage.faNewsTopics && storage.faNewsTopicsExp > +new Date - 1*60*60*1000) news.innerHTML = storage.faNewsTopics;
  else {
    J(rss).load('/feed/?f=1 item', function() {
      for (var i = 0, item = rss.childNodes, j = newsTopics.length, t; i < j; i++) {
        t = J('title', item[i])[0].innerHTML;
        newsTopics[i].innerHTML = '<a itemprop="url" href="' + J('guid', item[i])[0].innerHTML + '" title="' + t + '">' + ( t.length > 69 ? t.slice(0, 69) + '...' : t ) + '</a> <span class="faNewsDate">' + J('pubDate', item[i])[0].innerHTML.replace(/.*?, (\d+ \w+).*/, function (M, S1) { return S1.charAt(0) == '0' ? S1.slice(1) : S1 }) + '</span>';
      }
      if (storage) {
        storage.faNewsTopics = news.innerHTML;
        storage.faNewsTopicsExp = +new Date;
      }
    });
  }
 
  // create google search bar
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
  s.parentNode.insertBefore(gcse, s);
 
  // apply general logic to info box tabs
  for (var i = 0, j = infoLinks.length; i < j; i++) {
    infoLinks[i].onclick = function() {
      var a = document.getElementById('faInfoNav').getElementsByTagName('A'), b = document.getElementById('faInfo').getElementsByTagName('DIV'), i, j;
 
      for (i = 0, j = b.length; i < j; i++) if (/infoBlock/.test(b[i].className)) b[i].style.display = 'none';
      document.getElementById(this.id.slice(1)).style.display = 'block';
 
      for (i = 0, j = a.length; i < j; i++) if (/infoActif/.test(a[i].className)) a[i].className = '';
      this.className = 'infoActif';
 
      return false;
    }
  }
 
  // hide the homepage message
  hide.onclick = function() {
    var message = document.getElementById('homepageMessage'),
        title = document.getElementById('hiddenTitle');
 
    if (this.src == 'http://2img.net/i/fa/m/tabs_less1.gif') {
      this.src = 'http://2img.net/i/fa/m/tabs_more1.gif';
      message.style.display = 'none';
      title.style.display = 'block';
      my_setcookie('faHomepage', 'hidden');
    } else {
      this.src = 'http://2img.net/i/fa/m/tabs_less1.gif';
      message.style.display = 'block';
      title.style.display = 'none';
      my_setcookie('faHomepage', 'shown');
    }
  };
})(jQuery, _userdata, _lang);
//]]></script>                                                                                  <script type="text/javascript">// <![CDATA[
(function(J, U, L) {
  var main = document.getElementById('main-content'), // main container
 
      // news nodes and data
      news = document.getElementById('faNewsBox'),
      newsTopics = news.getElementsByTagName('DIV'),
      storage = window.localStorage,
      rss = document.getElementById('faNewsRSS'),
 
      homepage = J('.introduction', main)[0], // homepage message
 
      // google search
      cx = '018097555942133585918:_gwf276jof8',
      gcse = document.createElement('script'),
      s = document.getElementsByTagName('script')[0],
 
      // info box
      infoLinks = document.getElementById('faInfoNav').getElementsByTagName('A'),
 
      // hide button
      hide = document.getElementById('hideHomepageMessage'),
 
      // profile variables
      profil,
      login;
 
  document.getElementById('fa_google_search').style.display = 'block'; // show google search for JS user
  document.getElementById('searchNoJS').style.display = 'none'; // hide normal search for JS users
 
  // hide homepage
  if (my_getcookie('faHomepage') == 'hidden') {
    hide.src = 'http://2img.net/i/fa/m/tabs_more1.gif';
    document.getElementById('homepageMessage').style.display = 'none';
    document.getElementById('hiddenTitle').style.display = 'block';
  }
 
  // get news topics
  if (storage && storage.faNewsTopics && storage.faNewsTopicsExp > +new Date - 1*60*60*1000) news.innerHTML = storage.faNewsTopics;
  else {
    J(rss).load('/feed/?f=1 item', function() {
      for (var i = 0, item = rss.childNodes, j = newsTopics.length, t; i < j; i++) {
        t = J('title', item[i])[0].innerHTML;
        newsTopics[i].innerHTML = '<a itemprop="url" href="' + J('guid', item[i])[0].innerHTML + '" title="' + t + '">' + ( t.length > 69 ? t.slice(0, 69) + '...' : t ) + '</a> <span class="faNewsDate">' + J('pubDate', item[i])[0].innerHTML.replace(/.*?, (\d+ \w+).*/, function (M, S1) { return S1.charAt(0) == '0' ? S1.slice(1) : S1 }) + '</span>';
      }
      if (storage) {
        storage.faNewsTopics = news.innerHTML;
        storage.faNewsTopicsExp = +new Date;
      }
    });
  }
 
  // create google search bar
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
  s.parentNode.insertBefore(gcse, s);
 
  // apply general logic to info box tabs
  for (var i = 0, j = infoLinks.length; i < j; i++) {
    infoLinks[i].onclick = function() {
      var a = document.getElementById('faInfoNav').getElementsByTagName('A'), b = document.getElementById('faInfo').getElementsByTagName('DIV'), i, j;
 
      for (i = 0, j = b.length; i < j; i++) if (/infoBlock/.test(b[i].className)) b[i].style.display = 'none';
      document.getElementById(this.id.slice(1)).style.display = 'block';
 
      for (i = 0, j = a.length; i < j; i++) if (/infoActif/.test(a[i].className)) a[i].className = '';
      this.className = 'infoActif';
 
      return false;
    }
  }
 
  // hide the homepage message
  hide.onclick = function() {
    var message = document.getElementById('homepageMessage'),
        title = document.getElementById('hiddenTitle');
 
    if (this.src == 'http://2img.net/i/fa/m/tabs_less1.gif') {
      this.src = 'http://2img.net/i/fa/m/tabs_more1.gif';
      message.style.display = 'none';
      title.style.display = 'block';
      my_setcookie('faHomepage', 'hidden');
    } else {
      this.src = 'http://2img.net/i/fa/m/tabs_less1.gif';
      message.style.display = 'block';
      title.style.display = 'none';
      my_setcookie('faHomepage', 'shown');
    }
  };
})(jQuery, _userdata, _lang);
//]]></script>

Olá,
para mudar a cor você adicione o seguinte código dentro das tags <style></style>

Código:

#faInfoSuggestion {
      color: tomato!important; //Exemplo de uma cor
}
#faInfoSuggestion p {
  float: right!important;
  text-align: justify
}


Após isso localize:

Código:

Após ler as regras, o primeiro passo é criar a sua ficha. Para isso, acesse a área <a itemprop="url" style="font-weight:bold;" href="/f7-">Diretório de Fichas</a>  <br /><br />    Por favor, leve o tempo que for necessário.


mude para

Código:

<p>Após ler as regras, o primeiro passo é criar a sua ficha. Para isso, acesse a área <a itemprop="url" style="font-weight:bold;" href="/f7-">Diretório de Fichas</a>  <br /><br />    Por favor, leve o tempo que for necessário.</p>


Pedxz escreveu:Olá,
para mudar a cor você adicione o seguinte código dentro das tags <style></style>

Código:

#faInfoSuggestion {
      color: tomato!important; //Exemplo de uma cor
}
#faInfoSuggestion p {
  float: right!important;
  text-align: justify
}


Após isso localize:

Código:

Após ler as regras, o primeiro passo é criar a sua ficha. Para isso, acesse a área <a itemprop="url" style="font-weight:bold;" href="/f7-">Diretório de Fichas</a>  <br /><br />    Por favor, leve o tempo que for necessário.


mude para

Código:

<p>Após ler as regras, o primeiro passo é criar a sua ficha. Para isso, acesse a área <a itemprop="url" style="font-weight:bold;" href="/f7-">Diretório de Fichas</a>  <br /><br />    Por favor, leve o tempo que for necessário.</p>


Obrigado!