Crear caja con título en Wordpress de forma sencilla

  • Autor Autor ramonjosegn
  • Fecha de inicio Fecha de inicio
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 el archivo adjunto 58857

Gracias
 
Última edición:
Insertar CODE, HTML o 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 edición:
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