Criar caixa com título no Wordpress de forma simples

  • Autor Autor ramonjosegn
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
R

ramonjosegn

Hola chicos.

Aunque el plugin Ultimate Shortcodes lo hace tiene problemas de compatibilidad con algunos dispositivos móviles por lo que recibí quejas en mi sitio web de que no podían acceder a ciertas partes. Mi sitio web recibe un 40% de visitas móviles así que es una metedura de pata grande si no pueden acceder a ciertas partes.

Entonces estoy buscando alguna forma de tener una caja con título, fondo bajo el título, y un rectángulo debajo con el texto. [MENTION=9679]cicklow[/MENTION] ¿alguna idea?

¿Se os ocurre alguna forma de tenerlo en Wordpress de forma sencilla?

Vendría siendo algo por el estilo a la imagen

Ver o anexo 58857

Gracias
 
Última edição:
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Inserir CODE, HTML ou PHP:
<table border="1" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr bgcolor="#0e93e0">
<td style="text-align: center;" colspan="2"><span style="color: #ffffff;"><strong>Horarios</strong></span></td>
</tr>
<tr>
<td><span style="color: #3366ff;">Lunes a Sábado:</span> 4:00 am a 1100: pm
<span style="color: #ff9900;">Domingos y Festivos:</span> 5:00 am a 10:00: pm</td>
</tr>
</tbody>
</table>

Con colorcitos 🙂
No sé si en verdad te sirva algo asi de simple... Pero sustituyendo la informacion podria ser...
 
Última edição:
Quizás esto te sirva:

HTML:
PHP:
<div id="box-ramon">
	<h2>Horarios</h2>
	<div class="content-box">
		<p><span class="bold first">Lunes a Sábados:</span> 4:00 AM a 11:00 PM</p>
		<p><span class="bold second">Domingos y Festivos:</span> 5:00 AM a 10:00 PM</p>
	</div>
</div>

CSS:
PHP:
/*Reset*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
		body{line-height:1}
		article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
		nav ul{list-style:none}
		blockquote,q{quotes:none}
		blockquote:before,blockquote:after,q:before,q:after{content:none}
		a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
		ins{background-color:#ff9;color:#000;text-decoration:none}
		mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
		del{text-decoration:line-through}
		abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
		table{border-collapse:collapse;border-spacing:0}
		hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
		input,select{vertical-align:middle}
		body {
		}
/*Fin Reset*/

#box-ramon {
			width: calc(100% - 10px);
			display: flex;
			flex-direction: column;
			border-left: 2px solid #0E93E0;
			border-right: 2px solid #0E93E0;
			border-bottom: 2px solid #0E93E0;
			border-radius: 3px;
			font-family: 'Open Sans', serif;
		}
		#box-ramon .content-box {
			padding: 10px;
		}
		#box-ramon h2 {
			padding: 10px;
			background: #0E93E0;
			color:#fff;
		}
		#box-ramon p {
			line-height: 1.8;
			font-size: 16px;
		}
		#box-ramon p span.bold {
			font-weight: bold;
		}
		#box-ramon p span.first {
			color:#7EA6FB;
		}
		#box-ramon p span.second {
			color:#F58C49;	
		}

DEMO: Edit fiddle - JSFiddle
 
Voltar
Topo