Unable to parse Velocity template
1<style>
2 /* Estilos generales de la barra de navegación del tema (proporcionados por el usuario) */
3 :root {
4 /* Colores primarios */
5 --primary-blue: #024966;
6 --primary-red: #bb2026;
7 --light-blue: #043045; /* Usado en submenús */
8 --text-white: #ffffff;
9 --text-dark-blue: #024966;
10 --border-light-grey: #e3e6ea;
11
12 /* Fuentes */
13 --font-nexa: 'Nexa', sans-serif;
14 --font-arial: Arial, Helvetica, sans-serif;
15
16 /* Espaciado / Tamaños */
17 --header-height: 50px; /* Altura de la barra de navegación */
18 --menu-item-height: 30px;
19 --border-radius: 5px; /* Ejemplo de borde redondeado si quisieras */
20 }
21
22 #heading {
23 color: var(--text-white);
24 }
25
26 #banner {
27 width: 100%;
28 height: 100%;
29 background: var(--primary-blue) url("/documents/20142/33077/pr5.png/718c6a19-3ecc-4cc5-16f4-2fd1110cf2fa?t=1740405955575");
30 background-repeat: no-repeat;
31 text-align: center;
32 background-position: left;
33 background-size: 100%;
34 border-bottom: 3px solid var(--primary-red);
35 }
36
37 .container-fluid-1280 {
38 max-width: none; /* Permite que el contenedor ocupe todo el ancho disponible */
39 padding-left: 0px;
40 padding-right: 0px;
41 }
42
43 #footer {
44 background: #4d7f71;
45 display: none;
46 }
47
48 #wrapper {
49 background: var(--text-white);
50 }
51
52 /* Ajustes generales de la barra de navegación para que el menú del CV no choque */
53 .navbar {
54 font: 16px/18px var(--font-arial);
55 padding-top: 0px;
56 background-color: transparent !important; /* Asegura que no tenga fondo por defecto */
57 border: none !important; /* Elimina cualquier borde por defecto */
58 min-height: var(--header-height); /* Asegura la altura mínima */
59 }
60
61 /* Esconder elementos de Liferay si ya usas un menú personalizado */
62 .portlet-static.portlet-static-end.portlet-barebone.portlet-navigation a span {
63 color: var(--text-white);
64 }
65
66 /* Estas reglas se moverán o adaptarán para el contenido web si es necesario */
67 .child-menu.dropdown-menu {
68 background: var(--primary-blue);
69 color: var(--text-white);
70 padding-left: 10px;
71 padding-right: 10px;
72 border: 0.5px solid var(--text-white);
73 font-size: 13px;
74 max-width: 350px;
75 }
76
77 .child-menu.dropdown-menu a {
78 color: var(--text-white);
79 border-bottom-style: solid;
80 border-bottom-color: var(--text-white); /* Corregido a var(--text-white) */
81 border-bottom-width: 1px;
82 padding-bottom: 1px;
83 padding-top: 1px;
84 }
85
86 .dropdown-toggle {
87 height: var(--header-height);
88 }
89
90 #banner #heading .site-name {
91 display: none;
92 }
93
94 .lexicon-icon.lexicon-icon-angle-down {
95 margin-bottom: 10px;
96 }
97
98 .navbar-form.navbar-right {
99 padding-top: 6px;
100 }
101
102 .enca-titulo {
103 background: var(--primary-blue);
104 color: var(--text-white);
105 font-size: 16.5px;
106 text-align: center;
107 text-transform: uppercase;
108 width: 100%;
109 padding: 10px 2% 10px 2%;
110 font-weight: bold;
111 }
112
113 #portlet_com_liferay_portal_search_web_portlet_SearchPortlet .navbar-form .form-control {
114 line-height: 0;
115 }
116
117 #portlet_com_liferay_portal_search_web_portlet_SearchPortlet .search-input {
118 margin-top: 4px;
119 line-height: 0;
120 }
121
122 #banner .navbar-form .form-control {
123 margin-top: 3px;
124 line-height: 0;
125 padding-bottom: 6px;
126 }
127
128 #content {
129 background: var(--text-white);
130 background-image: url("/documents/20142/33131/cdd5dd3f-16c6-6481-8e7c-ce499ea9f1a3?t=1528744230713");
131 background-repeat: repeat;
132 background-size: 100px;
133 padding-left: 0px;
134 padding-right: 0px;
135 }
136
137 .portlet-title-text {
138 font-weight: bold;
139 font-family: sans-serif;
140 margin-bottom: 10px;
141 margin-top: 10px;
142 font-size: 2rem;
143 color: var(--text-dark-blue);
144 }
145
146 .portlet-title-text:after {
147 background-color: var(--primary-blue);
148 content: '';
149 display: block;
150 height: 0.0625rem;
151 width: 70%;
152 margin: 0.2em auto 0;
153 }
154
155 .portlet {
156 margin-bottom: 0px;
157 }
158
159 #column-1 {
160 padding-left: 0px;
161 padding-right: 0px;
162 }
163
164 #content .row {
165 width: 100%;
166 margin-left: 0px;
167 margin-right: 0px;
168 }
169
170 .sign-in {
171 display: none
172 }
173
174 .tit_enca_umsa {
175 font-weight: bold;
176 font-size: 17.5px;
177 color: var(--primary-red);
178 text-align: center;
179 padding-top: 5px;
180 padding-bottom: 5px;
181 text-transform: uppercase;
182 }
183
184 .tit_umsa {
185 font-weight: bold;
186 font-size: 16px;
187 color: var(--primary-red);
188 padding-bottom: 5px;
189 text-transform: uppercase;
190 }
191
192 .subtit_umsa {
193 font-weight: bold;
194 font-size: 15px;
195 color: var(--primary-red);
196 padding-bottom: 5px;
197 text-transform: uppercase;
198 }
199
200 .conte_umsa {
201 font-size: 14px;
202 text-align: justify;
203 padding-top: 5px;
204 padding-bottom: 5px;
205 color: var(--text-dark-blue);
206 }
207
208 .facultades {
209 font-weight: bold;
210 text-transform: uppercase
211 }
212
213 .deca-facultad {
214 font-weight: bold;
215 }
216
217 /* --- CAMBIO CLAVE AQUÍ: Oculta el logo en todas las pantallas --- */
218 #banner #heading .logo.custom-logo img {
219 display: none !important; /* Forzar la ocultación del icono en cualquier tamaño */
220 }
221
222 /* Las media queries existentes ahora solo afectarán a otros estilos, no al logo */
223 @media only screen and (min-width: 765px) {
224 #banner {
225 background-size: cover;
226 }
227
228 #banner #navigationCollapse #navigation .input-container {
229 top: 2px;
230 }
231
232 #banner .navbar-form .form-control {
233 font-size: 14px;
234 }
235
236 .icon-monospaced .lexicon-icon {
237 height: 30px;
238 }
239
240 #banner #heading .logo.custom-logo {
241 width: 64px;
242 height: 64px;
243 }
244 }
245
246 @media only screen and (max-width: 764px) and (min-width: 481px) {
247 .columns-1 {
248 margin-left: 0px;
249 margin-right: 0px;
250 }
251
252 .container-fluid-1280 {
253 padding-left: 15px;
254 padding-right: 15px;
255 }
256 }
257
258 @media all and (max-width: 480px) {
259 #banner {
260 background: var(--primary-blue) url("/documents/20142/33077/pr5.png/718c6a19-3ecc-4cc5-16f4-2fd1110cf2fa?t=1740405955575");
261 background-repeat: repeat;
262 background-size: 80px;
263 color: var(--text-white);
264 }
265
266 #banner .user-personal-bar .sign-in > a {
267 display: block;
268 }
269
270 .navbar-toggle .icon-bar,
271 .management-bar-toggle .icon-bar {
272 background-color: var(--text-white);
273 background: var(--text-white);
274 }
275
276 #banner .navbar-toggle {
277 margin: 0px 0 0px 6px;
278 }
279
280 #banner .user-personal-bar .sign-in > a {
281 display: none;
282 }
283
284 .dropdown-toggle {
285 height: 40px;
286 }
287
288 .enca-titulo {
289 font-size: 14.5px;
290 }
291 }
292
293 .descrimen {
294 font-size: 12px;
295 padding: 5px;
296 width: 250px;
297 }
298
299 .descrimen dl dt {
300 padding-top: 5px
301 }
302
303 .descrimen dl {
304 margin-bottom: 5px;
305 }
306
307 .go-top {
308 position: fixed;
309 bottom: 2em;
310 right: 0em;
311 text-decoration: none;
312 color: var(--text-white);
313 background-color: rgba(46, 92, 147, 0.5);
314 font-size: 18px;
315 padding: 10px;
316 border: 3px solid rgba(66, 111, 166, 0.5);
317 display: none;
318 }
319
320 .go-top:hover {
321 text-decoration: none;
322 color: var(--text-white);
323 background-color: rgba(46, 92, 147, 0.8);
324 }
325
326 .go-top:visited {
327 text-decoration: none;
328 background-color: rgba(46, 92, 147, 0.8);
329 }
330
331 .go-top:focus {
332 text-decoration: none;
333 color: var(--text-white);
334 background-color: rgba(46, 92, 147, 0.8);
335 }
336
337 .f-nav {
338 z-index: 9999;
339 position: fixed;
340 top: 0;
341 left: 35%;
342 padding: 5px;
343 margin-bottom: 5px;
344 background: var(--light-blue);
345 opacity: 0.8;
346 }
347
348 /* Estilos específicos de custom-navigation-menu */
349 .custom-navigation-menu {
350 list-style: none;
351 padding: 0;
352 margin: 0;
353 background-color: transparent; /* Fondo transparente */
354 border: none; /* Se eliminó el borde blanco del menú principal */
355 border-radius: 8px;
356 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
357 font-family: Arial, sans-serif;
358 position: relative; /* Revertido a posición relativa */
359 z-index: 99;
360 display: flex;
361 justify-content: flex-start;
362 align-items: center;
363 flex-wrap: wrap;
364 }
365
366 .custom-navigation-menu > li {
367 position: relative;
368 border-bottom: none;
369 border-right: none; /* Se eliminó el borde vertical entre los elementos de nivel 0 */
370 padding: 0;
371 flex-shrink: 0;
372 }
373
374 .custom-navigation-menu > li:last-child {
375 border-right: none;
376 }
377
378 .custom-navigation-menu > li > a {
379 display: block;
380 padding: 12px 20px;
381 text-decoration: none;
382 color: #ffffff; /* Letras blancas para el nivel 0 */
383 font-weight: bold;
384 transition: background-color 0.3s ease, color 0.3s ease;
385 white-space: nowrap;
386 background-color: transparent;
387 /* Aseguramos que el texto del menú principal también esté a la izquierda */
388 text-align: left;
389 }
390
391 .custom-navigation-menu > li > a:hover,
392 .custom-navigation-menu > li.active > a {
393 background-color: rgba(255, 255, 255, 0.1); /* Ligero fondo en hover */
394 color: #ffffff;
395 }
396
397 .custom-navigation-menu ul {
398 position: absolute;
399 top: 100%;
400 left: 0; /* Asegura que el submenú de Nivel 1 esté alineado a la izquierda de su padre */
401 list-style: none;
402 padding: 0;
403 margin: 0;
404 background-color: rgba(2, 73, 102, 0.7); /* CAMBIO: Fondo semi-transparente del color #024966 para submenús */
405 border: 1px solid rgba(255, 255, 255, 0.2);
406 border-top: none;
407 border-radius: 0 0 8px 8px;
408 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
409 min-width: 220px;
410 z-index: 100;
411 display: none;
412 opacity: 0;
413 transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
414 transform: translateY(10px);
415 }
416
417 .custom-navigation-menu li:hover > ul {
418 display: block;
419 opacity: 1;
420 transform: translateY(0);
421 }
422
423 .custom-navigation-menu ul li {
424 border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Borde más claro */
425 }
426
427 .custom-navigation-menu ul li:last-child {
428 border-bottom: none;
429 }
430
431 .custom-navigation-menu ul li a {
432 padding: 10px 20px;
433 padding-left: 20px;
434 font-weight: normal;
435 color: #ffffff; /* Letras blancas para submenús */
436 white-space: nowrap;
437 display: block;
438 /* --- CAMBIOS AQUÍ --- */
439 text-align: left; /* Alinea el texto a la izquierda para Nivel 1 */
440 font-size: 0.9em; /* Reduce el tamaño de fuente para Nivel 1 (submenú) */
441 /* --- FIN CAMBIOS --- */
442 }
443
444 .custom-navigation-menu ul li a:hover {
445 background-color: rgba(255, 255, 255, 0.15); /* Ligero fondo en hover */
446 color: #ffffff;
447 }
448
449 .custom-navigation-menu ul ul {
450 left: 100%; /* Asegura que el submenú de Nivel 2 se posicione a la derecha de su padre */
451 top: 0;
452 background-color: rgba(2, 73, 102, 0.8); /* CAMBIO: Fondo más oscuro del color #024966 para el tercer nivel */
453 border-top: 1px solid rgba(255, 255, 255, 0.2);
454 border-left: 1px solid rgba(255, 255, 255, 0.2);
455 border-radius: 0 8px 8px 8px;
456 }
457
458 .custom-navigation-menu ul ul li a {
459 padding-left: 20px;
460 color: #ffffff; /* Letras blancas para el tercer nivel */
461 /* --- CAMBIOS AQUÍ --- */
462 text-align: left; /* Alinea el texto a la izquierda para Nivel 2 */
463 font-size: 0.8em; /* Reduce el tamaño de fuente para Nivel 2 (sub-submenú) */
464 /* --- FIN CAMBIOS --- */
465 }
466
467 .custom-navigation-menu > li.has-children > a::after {
468 content: ' \25BC';
469 font-size: 0.7em;
470 margin-left: 5px;
471 vertical-align: middle;
472 transition: transform 0.3s ease-in-out;
473 color: #ffffff; /* Flechas blancas */
474 }
475
476 .custom-navigation-menu > li.has-children:hover > a::after {
477 transform: rotate(180deg);
478 }
479
480 .custom-navigation-menu ul > li.has-children > a::after {
481 content: ' \25B8';
482 font-size: 0.7em;
483 margin-left: 5px;
484 vertical-align: middle;
485 transition: transform 0.3s ease-in-out;
486 color: #ffffff; /* Flechas blancas */
487 }
488
489 .custom-navigation-menu ul > li.has-children:hover > a::after {
490 transform: rotate(90deg);
491 }
492
493 .no-nav-items {
494 padding: 20px;
495 background-color: #fff3cd;
496 border: 1px solid #ffeeba;
497 color: #856404;
498 border-radius: 5px;
499 margin-top: 10px;
500 }
501
502 @media (max-width: 768px) {
503 .custom-navigation-menu {
504 flex-direction: column;
505 align-items: flex-start;
506 border-right: none;
507 background-color: transparent; /* Fondo transparente en móvil */
508 }
509 .custom-navigation-menu > li {
510 width: 100%;
511 border-right: none;
512 border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Borde más claro en móvil */
513 }
514 .custom-navigation-menu > li:last-child {
515 border-bottom: none;
516 }
517 .custom-navigation-menu ul {
518 position: static;
519 width: 100%;
520 box-shadow: none;
521 border: none;
522 border-radius: 0;
523 transform: translateY(0);
524 background-color: transparent; /* Fondo transparente para submenús en móvil */
525 }
526 .custom-navigation-menu li:hover > ul {
527 display: block;
528 opacity: 1;
529 }
530 .custom-navigation-menu ul li a {
531 padding-left: 30px;
532 font-size: 0.9em; /* Mantener tamaño en móvil para Nivel 1 */
533 }
534 .custom-navigation-menu ul ul li a {
535 padding-left: 45px;
536 font-size: 0.8em; /* Mantener tamaño en móvil para Nivel 2 */
537 }
538 .custom-navigation-menu > li.has-children > a::after,
539 .custom-navigation-menu ul > li.has-children > a::after {
540 display: none;
541 }
542 }
543</style>
544
545<nav class="$nav_css_class" id="navigation">
546 <ul class="custom-navigation-menu">
547 #if ($layouts && !$layouts.isEmpty())
548 #foreach ($layout in $layouts)
549 #set ($pageUrl = "")
550 #set ($target = "")
551 #set ($rel = "")
552
553 #set ($friendlyURL = $layout.getFriendlyURL())
554
555 ## Lógica para construir la URL: primero verifica si es una URL absoluta (externa)
556 #if ($friendlyURL.startsWith("http://") || $friendlyURL.startsWith("https://"))
557 ## Es una URL externa o absoluta, usar directamente
558 #set ($pageUrl = $friendlyURL)
559 #set ($target = "_blank")
560 #set ($rel = "noopener noreferrer")
561 #else
562 ## Es una ruta relativa, asumir que es una página interna de Liferay
563 #set ($portalURL = $themeDisplay.getPortalURL())
564
565 ## Limpiar la friendly URL de cualquier prefijo /web/ o /web/guest/ para evitar duplicados
566 #set ($cleanedFriendlyURL = $friendlyURL)
567 #if ($cleanedFriendlyURL.startsWith("/web/guest/"))
568 #set ($cleanedFriendlyURL = $cleanedFriendlyURL.substring("/web/guest/".length()))
569 #elseif ($cleanedFriendlyURL.startsWith("/web/"))
570 #set ($cleanedFriendlyURL = $cleanedFriendlyURL.substring("/web/".length()))
571 #end
572
573 ## Asegurar que la URL amistosa comience con una barra para la concatenación correcta
574 #if (!$cleanedFriendlyURL.startsWith("/"))
575 #set ($cleanedFriendlyURL = "/${cleanedFriendlyURL}")
576 #end
577
578 ## Construir la URL completa para páginas internas, forzando '/web/guest/'
579 #set ($pageUrl = "${portalURL}/web/guest${cleanedFriendlyURL}")
580 #set ($target = "") ## No abrir enlaces internos en nueva pestaña por defecto
581 #set ($rel = "")
582 #end
583
584 ## Solo renderizar si la página no está oculta y tiene una URL válida
585 #if (!$layout.isHidden() && $pageUrl != "")
586 #set ($hasChildren = $layout.getChildren() && !$layout.getChildren().isEmpty())
587 <li class="#if ($hasChildren) has-children #end">
588 <a href="$pageUrl" #if ($target != "") target="$target" #end #if ($rel != "") rel="$rel" #end>$layout.getName()</a>
589 #set ($children = $layout.getChildren())
590 #if ($children && !$children.isEmpty())
591 <ul>
592 #foreach ($childLayout in $children)
593 #set ($childPageUrl = "")
594 #set ($childTarget = "")
595 #set ($childRel = "")
596
597 #set ($childFriendlyURL = $childLayout.getFriendlyURL())
598 ## Lógica de URL para el Nivel 1 (submenú)
599 #if ($childFriendlyURL.startsWith("http://") || $childFriendlyURL.startsWith("https://"))
600 #set ($childPageUrl = $childFriendlyURL)
601 #set ($childTarget = "_blank")
602 #set ($childRel = "noopener noreferrer")
603 #else
604 #set ($childPortalURL = $themeDisplay.getPortalURL())
605 #set ($childCleanedFriendlyURL = $childFriendlyURL)
606 #if ($childCleanedFriendlyURL.startsWith("/web/guest/"))
607 #set ($childCleanedFriendlyURL = $childCleanedFriendlyURL.substring("/web/guest/".length()))
608 #elseif ($childCleanedFriendlyURL.startsWith("/web/"))
609 #set ($childCleanedFriendlyURL = $childCleanedFriendlyURL.substring("/web/".length()))
610 #end
611 #if (!$childCleanedFriendlyURL.startsWith("/"))
612 #set ($childCleanedFriendlyURL = "/${childCleanedFriendlyURL}")
613 #end
614 #set ($childPageUrl = "${childPortalURL}/web/guest${childCleanedFriendlyURL}")
615 #set ($childTarget = "")
616 #set ($childRel = "")
617 #end
618
619 #if (!$childLayout.isHidden() && $childPageUrl != "")
620 #set ($hasGrandChildren = $childLayout.getChildren() && !$childLayout.getChildren().isEmpty())
621 <li class="#if ($hasGrandChildren) has-children #end">
622 <a href="$childPageUrl" #if ($childTarget != "") target="$childTarget" #end #if ($childRel != "") rel="$childRel" #end>$childLayout.getName()</a>
623 #set ($grandChildren = $childLayout.getChildren())
624 #if ($grandChildren && !$grandChildren.isEmpty())
625 <ul>
626 #foreach ($grandchildLayout in $grandChildren)
627 #set ($grandchildPageUrl = "")
628 #set ($grandchildTarget = "")
629 #set ($grandchildRel = "")
630
631 #set ($grandchildFriendlyURL = $grandchildLayout.getFriendlyURL())
632 ## Lógica de URL para el Nivel 2 (sub-submenú)
633 #if ($grandchildFriendlyURL.startsWith("http://") || $grandchildFriendlyURL.startsWith("https://"))
634 #set ($grandchildPageUrl = $grandchildFriendlyURL)
635 #set ($grandchildTarget = "_blank")
636 #set ($grandchildRel = "noopener noreferrer")
637 #else
638 #set ($grandchildPortalURL = $themeDisplay.getPortalURL())
639 #set ($grandchildCleanedFriendlyURL = $grandchildFriendlyURL)
640 #if ($grandchildCleanedFriendlyURL.startsWith("/web/guest/"))
641 #set ($grandchildCleanedFriendlyURL = $grandchildCleanedFriendlyURL.substring("/web/guest/".length()))
642 #elseif ($grandchildCleanedFriendlyURL.startsWith("/web/"))
643 #set ($grandchildCleanedFriendlyURL = $grandchildCleanedFriendlyURL.substring("/web/".length()))
644 #end
645 #if (!$grandchildCleanedFriendlyURL.startsWith("/"))
646 #set ($grandchildCleanedFriendlyURL = "/${grandchildCleanedFriendlyURL}")
647 #end
648 #set ($grandchildPageUrl = "${grandchildPortalURL}/web/guest${grandchildCleanedFriendlyURL}")
649 #set ($grandchildTarget = "")
650 #set ($grandchildRel = "")
651 #end
652
653 #if (!$grandchildLayout.isHidden() && $grandchildPageUrl != "")
654 <li><a href="$grandchildPageUrl" #if ($grandchildTarget != "") target="$grandchildTarget" #end #if ($grandchildRel != "") rel="$grandchildRel" #end>$grandchildLayout.getName()</a></li>
655 #end
656 #end
657 </ul>
658 #end
659 </li>
660 #end
661 #end
662 </ul>
663 #end
664 </li>
665 #end
666 #end
667 #else
668 <div class="no-nav-items">
669 <p><strong>Atención:</strong> No se encontraron elementos de navegación para mostrar en esta plantilla. La variable layouts está vacía o es nula.</p>
670 <p>Por favor, verifica la configuración de las páginas de tu sitio en Liferay y asegúrate de que haya páginas públicas configuradas en el sitio al que está asociado este widget de navegación y que no estén ocultas.</p>
671 <p>Si la "Barra minimalista" funciona, podría significar que el widget de Navegación en tu Liferay no expone la jerarquía completa de páginas a las plantillas ADT de la manera estándar.</p>
672 </div>
673 #end
674 </ul>
675</nav>
