Different style same line PHP

• 

  • aijo54

  • January 27, 2017 at 4:38 am

  Hi!

  I’m trying to costumize a wordpress site and I’ve got a doubt:

  I’m trying to add differents styles on my PHP but to the same line of code. I’ll give and example to clarify:

  This is the PHP

  <div class="bloque-contenido"><h3>Detalles del pecio </h3>
  	
  				
  					<ul><?php 
  
  if(get_field('apelativo'))
  {
  	 _e('Apelativo: ','csc-themewp: '); the_field('apelativo');
  	 echo '<br/>';
  }
    
  ?>
  <?php 
  </ul></div>

  This is the CSS

  div.bloque-contenido {
  	display:block;
  	float:none;
  	clear:both;
  	background-color:rgba(245, 244, 242, 0.3);
  	width: 30em;
  	margin: 0 auto;
  	border: 1px solid rgba(245, 244, 242, 0.3);
  	
  	
  	
  	
  }
  div.bloque-contenido h3 {
     font-family: 'Montserrat', sans-serif;
     text-transform: uppercase;
     text-align: center;
     border-bottom: 1px solid #fa5742;
     font-size: 1em;
     margin-top: -0.1em;
      
      
     
  }
  div.bloque-contendio ul {
     margin-left: 50px;
  }

  And this is the result:
  DETALLES DEL PECIO

  Profundidad: 50
  Año hundimiento: 1949
  Eslora: 64
  Manga: 6
  Puntal: 5
  Causas naufragio: Cañoneado en maniobras militares

  What I want to do is to split the query from the field name. So I would like to add a float right tag to field and a float left tag to query (any other option is welcome!!)

  Please can anyone help me?
  Thanks a lot!!
• 

  

  • John Huebner

  • January 30, 2017 at 3:10 am

  You are going to have to wrap the different elements in something that you can style separately, for example;

  
  echo '<span class="label">';
  _e('Apelativo: ','csc-themewp: ');
  echo '</span><span class="value">';
  the_field('apelativo');
  echo '</span>';
  

  Other than that your code does not make complete sense because you are using an unordered list but you have no loop or li elements.
• 

  • aijo54

  • January 30, 2017 at 9:00 pm

  Thanks a lot!

  I know that in the exemple there isn’t any li elements but in the original code there are. I just copied a part of the original code.

  Thanks, it solves my question!