bar - jquery mobile themes free
¿Cómo personalizo el color del encabezado en jquery mobile? (4)
Estoy trabajando en un sitio móvil para una empresa local que usa jquery mobile.
Esto es lo que tengo hasta ahora
Hasta ahora, ha resultado bien, pero tengo algunos problemas.
1.
No sé cómo cambiar el color del encabezado. He intentado diferentes temas de datos. He intentado usar una hoja de estilo CSS personalizada. Pero nada de lo que hago funciona.
editar - De acuerdo, aparentemente la etiqueta de la cabeza no obtiene una función de datos como las otras partes de la página. Así que lo eliminé. Pero todavía necesito descubrir cómo cambiar el color. El CSS que escribo parece sobrescribirse.
Aquí está el encabezado real
<div data-role="header" data-theme="c">
Parece que los roles de datos para los encabezados no hacen nada
2.
El botón Llámenos tiene una etiqueta ''href'' que le permite marcar a un teléfono. El problema es que desde que lo puse allí, crea un estilo de enlace alrededor de la caja que es bastante notable. Aquí hay una captura de pantalla
ImageShack
¿Cómo evito que se haga ese estilo? Ya he probado CSS para detenerlo.
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
Estos funcionan, pero solo en la lista expandible en la parte inferior de la página. ¿Por qué no funcionan para todos los botones?
Color de fondo del encabezado
Te hice un ejemplo de trabajo: http://jsfiddle.net/Gajotres/5VWuy/
.ui-page .ui-header {
background: #112233 !important;
}
Si desea cambiarlo solo en una página específica, reemplace .ui-page con una identificación de página, como esta:
#index .ui-header {
background: #112233 !important;
}
Problema de botón
En este caso, no ajuste su etiqueta con el botón. Una etiqueta con data-role = "button" es un botón para que pueda hacerlo así:
<a href="tel:8149413000" data-role="button" rel="external" data-theme="c" data-icon="custom-phone" data-iconpos="top">Call Us</a>
Puedes encontrar este ejemplo en mi jsFiddle anterior.
En jQueryMobile 1.4 tienen solo dos temas predeterminados, claro y oscuro. Pero puedes usar la misma clase mencionada en la respuesta de Gajotres para cambiar el color de fondo. Todavía funciona como un encanto.
.ui-page .ui-header {
background: #000000 !important;
}
En realidad, las respuestas anteriores son correctas. Acabo de hacer un ejemplo para mostrar que acaba de crear una etiqueta <style> en <head>
Me gusta esto
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
#pageone .ui-header {
background: #5069A0;
}
</style>
</head>
entonces para usar esto
<!DOCTYPE html>
<html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
#pageone .ui-header {
background: #5069A0;
}
</style>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header" class="ui-bar ui-bar-b">
<h1><span style="color:white;">facebook</span></h1>
</div>
<div data-role="main" class="ui-content">
<p>Welcome!</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
El encabezado .ui-page .ui anterior en el archivo css causa una recarga del color del encabezado original antes de mostrar el nuevo color, es mucho mejor usar el rodillo de temas en https://themeroller.jquerymobile.com/
Cambia tus colores en las clases requeridas y descarga el nuevo archivo css. Esto asegurará cambios suaves entre páginas.