Una vez ya elegido bajado y descomprimido el template, vamos a nuestro Visual Studio y creamos una página web, como se muestra en la imagen a continuación.
Una vez terminado esto veremos que se crea una carpeta con el nombre de "app_themes", ahora vamos a la carpeta donde está ubicado el template que descargamos y seleccionamos la carpeta "image" y el archivo "default.css" y lo arrastramos hasta nuestro proyecto dentro de la carpeta "app_themes" y dentro de la carpeta que llevara el nombre de nuestro tema (MiTema), bien, ya tenemos el archivo de hoja de estilo en cascada (default.css) y también la carpeta de imágenes.
Ahora viene lo bueno jejeje volvemos a la carpeta donde está el archivo html del template y abriéndolo con un editor html (en mi caso uso el pspad o el notepad++, pero para este ejemplo usare el pspad) seleccionamos todo lo que está entre los tag
<body> y </body>
Como se muestra en la imagen, noten que en ningún momento seleccioné los tag <body> y </body> solo lo que está dentro de ellos lo aclaro porque no se logra ver toda la imagen
Con esta cantidad de líneas de código ahora almacenadas en el portapapeles, nos vamos a nuestro proyecto web y elegimos las master.page y vamos al source, ahora pegamos todo el contenido html que habíamos copiado entre los tag
<form id="form1" runat="server"> y </form>
Ya queda poco gente a no desesperar, solo un par de líneas mas y estamos. Vamos al solution explorer y le damos doble click al web.config, ahora una vez abierto el web.config nos ubicamos debajo del tag
</compilation>
Y pegamos la siguiente línea
<pages theme="MiTema" smartNavigation="true" buffer="true" asyncTimeout="45" styleSheetTheme="MiTema" maintainScrollPositionOnPostBack="true">
En donde dice MiTema va el nombre de la carpeta que está dentro de la app_themes y que contiene el default.css y la carpeta imágenes aquí le muestro en esta captura de pantalla la carpeta de la que les hablo resaltando el texto del web.config también.
Bueno eso es todo gente, ahora cuando muestren en la vista de diseño de la master.page, se verá una estructura igual a la que se encontraba en el html del template que descargamos, hay veces o casi siempre hay que modificar la ubicación del ContentPlaceHolder y eliminarles los div :)
Espero les sea de utilidad y también espero sus comentarios y/o sugerencias.
Saludos
Muy buen post Javi.
ResponderEliminarSiempre vienen bien estas cosas!
Es casi seguro que se cambia el ContentPlaceHolder, pero eso ya va a depender de cada plantilla no?
Saludos che!
Sip mucho depende la plantilla, pero hay mas trabajo por hacer, esto solo nos da el diseño de la pagina ahora manos a la obra y empezar a agregar controles asp.net :D
ResponderEliminarGracias Marcos
Saludos
me sale error no le falta nada en la parte de
ResponderEliminarno le falta cerrar pages? bueno aun asi me a error
respondeme si gustas a mi correo que no pude poner esa hoja de estilo a mi masterpage