modificar hoja de estilo

tico74 · #1 (**permalink**) 20/08/2003, 13:09

Me gustaria saber de que forma mediante una serie de combos puedo modificar propiedades en una hoja de estilo, tienen algun ejemplo en ese sentido que me pueda guiar? Es decir modificaria el archivo mediante FSO.

Un saludo
Tico

Bravenap · #2 (**permalink**) 20/08/2003, 15:33

No sé si estaré en lo cierto, pero creo que modificar una hoja de estilo, .css, sería lo mismo que modificar un archivo de texto, .txt, con FSO al ser ambos tipos archivos ASCII. Por tanto, te servirían las mismas funciones que para un TXT.

Un saludo.

tico74 · #3 (**permalink**) 20/08/2003, 16:55

si, estoy viendo de usar fsp y tratarlo como texto pero no se como rastrear una clase y modificar sus propiedades.alguien tiene un ejemplo similar?

Bravenap · #4 (**permalink**) 21/08/2003, 02:22

Nunca lo he usado para una hoja de estilo pero creo que sería algo así. Suponiendo la siguiente hoja y que queremos cambiar el color de la clase .peq:

*****estilos.css*******

Código:

.peq {
	font-size: 9pt;
	font-style: italic;
	font-weight: bold;
	color: #FFFFFF;
	cursor: hand;
}
.peqsobre {
	font-size: 9pt;
	font-style: italic;
	font-weight: bold;
	color: #000000;
	background-color: #CCCCCC;
	cursor: hand;
}

****cambiaestilo.asp****

Código:

<%
set FSO = createobject("scripting.filesystemobject")
set archivo= FSO.opentextfile(server.mappath("estilos.txt"))

do until archivo.eof

texto = archivo.readline

'aquí habría que tener en cuenta las tabulaciones
' o espacios que haya. Eso lo dejo de tu parte.

if texto="color: #00000;" then
  archivo.writeline("color: #CCCCCC;")
else
  archivo.nextline
end if

loop

archivo.close
%>

No sé si he metido la pata hasta el fondo. Pero la idea sería esa.

Un saludo.

nazkatuta · #5 (**permalink**) 21/08/2003, 02:30

Hola,
yo tengo hecho algo parecido...

En una pagina mediante combos elijo el tag que quiero modificar (H1, H2, P, etc...) y selecciono un color, tipo de letra tamaño y estilo....

Esta pagina mediante un javascript me genera el texto que define la clase que quiero crear o modificar... y se lo paso a otra pagina en la que abro el css, busco si existe ya la clase y en caso positivo la sobreescribo con la nueva.

si quieres te puedo pasar las dos paginas por mail.

Bravenap · #6 (**permalink**) 21/08/2003, 02:32

Tiene muy buena pinta lo de nazkatuta

¡Hala, a por ello!

Aunque creo que estaría muy bien mostrarlo al resto de los mortales que pululamos por los foros ¿no?

Un saludo a los dos.

nazkatuta · #7 (**permalink**) 21/08/2003, 02:42

Vale, pues pongo aqui el codigo de las dos paginas...

Esta primera es en la que seleccionamos el tag y su estilo...

Código:

<html>
<head>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="-1" >
<title>Generador CSS</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="/portal/continguts.css">
<style>
.aviso {font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 10pt;
		font-weight: normal;
        color: #003300; }
.notas {font-family: Verdana, Arial;
        font-size: 10pt;
		text-align: justify;
		font-weight: normal;
        color: #003300; }
.titulo {
        font-size: 10pt;
        font-family: Arial;
        font-weight: bold;
        color: #FFFFFF; }
</style>
<script language = "javascript">
<!--


function launchnew(){
x=window.open("","Outcome","width=250,height=330,top=100,left=100,resizeable=no,scrollbars=no,menubar=no,toolbar=no,status=yes")}

function launchhex(){
y=window.open("colorhex.htm","Hex","width=310,height=380,top=100,left=100,resizeable=no,scrollbars=no,menubar=no,toolbar=no,status=yes")}

function generate(){

enterClassName = "CSSName"
enterBackgroundColor = ""
enterBorderColor = ""
enterBorderStyle = ""
enterBorderWidth = ""
enterTextColor = ""
enterTextSize = ""
enterTextFont = ""
enterTextStyle = ""


if(document.makecss.thisclassname.value != ""){enterClassName = document.makecss.thisclassname.value}

if(document.makecss.backgroundcolor.value != ""){enterBackgroundColor = "background-color: " + document.makecss.backgroundcolor.value + ";" + "\n"}


if(document.makecss.textcolor.value != ""){enterTextColor = "color: " + document.makecss.textcolor.value + ";" + "\n"}
if(document.makecss.textsize.value != ""){enterTextSize = "font-size: " + document.makecss.textsize.value + "pt;" + "\n"}
if(document.makecss.textfont.value != ""){enterTextFont = "font-family: " + document.makecss.textfont.value + ";" + "\n"}

if(document.makecss.textweight.value == "N"){enterTextStyle = ""}
if(document.makecss.textweight.value == "B"){enterTextStyle = "font-weight: bold;" + "\n"}
if(document.makecss.textweight.value == "I"){enterTextStyle = "font-style: italic;" + "\n"}
if(document.makecss.textweight.value == "BI"){enterTextStyle = "font-weight: bold;" + "\n" + "font-style: italic;" + "\n"}



finalcode =  enterClassName + "{" + "\n" +
enterBackgroundColor +
enterBorderColor +
enterBorderStyle +
enterBorderWidth +
enterTextColor +
enterTextSize +
enterTextFont +
enterTextStyle +
"}" + "\n"

finalcode = finalcode.replace("#","");

window.location = 'escribir_CSS.asp?tag=' + enterClassName + '&datos=' + finalcode;

}




//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div align="center"><form name="makecss">
    <strong><font face="Geneva, Arial, Helvetica, sans-serif">Formato de Letras 
    </font></strong> 
    <table width=100% height="232" border=0 cellpadding=0 cellspacing=0>
      <td width="185" rowspan="7" valign=top><table width="172" height="199" border="0" cellpadding="1" cellspacing="0">
          <tr> 
            <td> <table height="197" border="0" cellpadding="0" cellspacing="0">
                <tr> 
                  <td width="178" bgcolor=white> <table cellspacing="1" cellpadding="5" border="0">
                      <tr> 
                        <td width="56" align=right bgcolor=EEEEEE class=aviso>Tag:</td>
                        <td width="115" bgcolor=EEEEEE class=aviso><input type="text" class="hexfield" name="thisclassname" size="10"> 
                          <input type="hidden"  name="elemtype" value="text"> 
                          <input type="hidden" name="backgroundcolor" size="10"> 
                          <input  type="hidden" name="bordercolor" size="10"> 
                          <input type="hidden" size="1" name="bordertype" value="solid"> 
                          <input type="hidden" size="1" name="borderwidth"  value=""></td>
                      </tr>
                      <tr> 
                        <td align=right class=aviso bgcolor=EEEEEE>Tamaño:</td>
                        <td class=aviso bgcolor=EEEEEE> <select size="1" name="textsize" class="hexfield">
                            <option value="" selected>Por defecto</option>
                            <option value="6">6pt</option>
                            <option value="7">7pt</option>
                            <option value="8">8pt</option>
                            <option value="9">9pt</option>
                            <option value="10">10pt</option>
                            <option value="11">11pt</option>
                            <option value="12">12pt</option>
                            <option value="13">13pt</option>
                            <option value="14">14pt</option>
                            <option value="16">16pt</option>
                            <option value="17">17pt</option>
                            <option value="18">18pt</option>
                            <option value="19">19pt</option>
                            <option value="20">20pt</option>
                            <option value="21">21pt</option>
                            <option value="22">22pt</option>
                            <option value="23">23pt</option>
                            <option value="24">24pt</option>
                            <option value="25">25pt</option>
                            <option value="26">26pt</option>
                            <option value="27">27pt</option>
                            <option value="28">28pt</option>
                            <option value="29">29pt</option>
                            <option value="30">30pt</option>
                          </select> </td>
                      </tr>
                      <tr> 
                        <td align=right class=aviso bgcolor=EEEEEE>Color:</td>
                        <td class=aviso bgcolor=EEEEEE><input class="hexfield" type="text" name="textcolor" size="10"></td>
                      </tr>
                      <tr> 
                        <td align=right class=aviso bgcolor=EEEEEE>Fuente:</td>
                        <td class=aviso bgcolor=EEEEEE> <select size="1" name="textfont" class="hexfield">
                            <option value="" selected>Por defecto</option>
                            <option value="arial">Arial</option>
                            <option value="verdana">Verdana</option>
                            <option value="times">Times NR</option>
                            <option value="courier">Courier</option>
                            <option value="serif">Serif</option>
                            <option value="sans-serif">Sans-Serif</option>
                            <option value="cursive">Cursive</option>
                            <option value="fantasy">Fantasy</option>
                            <option value="monospace">Monospace</option>
                          </select> </td>
                      </tr>
                      <tr> 
                        <td height="40" align=right bgcolor=EEEEEE class=aviso>Estilo:</td>
                        <td class=aviso bgcolor=EEEEEE> <select size="1" name="textweight" class="hexfield">
                            <option value="N">Normal</option>
                            <option value="B">Negrita</option>
                            <option value="I">Italica</option>
                            <option value="BI">Negr/Italic</option>
                          </select> </td>
                      </tr>
                    </table></td>
                </tr>
              </table></td>
          </tr>
        </table></td>
      <td width="342" valign=top><a href="#" onclick="document.all.thisclassname.value='H1'"> 
          <h1>H1</h1>
          </a></td>
      <td width="264" rowspan="7" valign=top></td>
      </tr>
      <tr> 
        <td valign=top><a href="#" onClick="document.all.thisclassname.value='H2'"> 
          <h2>H2</h2>
          </a> </td>
      </tr>
      <tr> 
        <td valign=top><a href="#" onClick="document.all.thisclassname.value='H3'"> 
          <h3>H3</h3>
          </a></td>
      </tr>
      <tr> 
        <td valign=top><a href="#" onClick="document.all.thisclassname.value='H4'"> 
          <h4>H4</h4>
          </a></td>
      </tr>
      <tr> 
        <td valign=top><a href="#" onClick="document.all.thisclassname.value='H5'"><h5>H5</h5></a> 
        </td>
      </tr>
      <tr> 
        <td valign=top><a href="#" onClick="document.all.thisclassname.value='H6'"> 
          <h6>H6</h6>
          </a> </td>
      </tr>
      <tr>
        <td valign=top><a href="#" onClick="document.all.thisclassname.value='P'">
          <p>P</p>
          </a></td>
      </tr>
    </table>

</form>
</div>
</body>
</html>

Falta crear el boton que llame a la funcion "generate"... esta funcion llama a la siguiente pagina que es escribir_css.asp y su codigo es.

nazkatuta · #8 (**permalink**) 21/08/2003, 02:44

... aqui va la segunda pagina, que no me cabía entera...

ESCRIBIR_CSS.ASP

Código:

<%
'abrimos  continguts.CSS
    path = Request.ServerVariables("APPL_PHYSICAL_PATH")&"portal\"
	set objfilesys = CreateObject("Scripting.FileSystemObject")
	set archivo = objfilesys.OpenTextFile(Path & "continguts.css",1)
	txtCSS = archivo.readall
	archivo.close
	set archivo = nothing
	tag = Lcase(request.QueryString("tag"))
	datos = Lcase(replace(request.QueryString("datos")," ",""))
	'response.write datos & "<br>"
	txtCSS = Lcase(replace(txtCSS," ",""))
	if instr(txtCSS, tag&"{") > 1 then
		'Existe ya una entrada para el tag
		tmp = MID(txtCSS,instr(txtCSS,tag&"{"))
		tmp = split(tmp,"}")
		anterior = tmp(0) & "}"
		'response.write anterior & "<br>"
		nuevo = replace(txtCSS,anterior,datos)
	else
		'No existe entrada para el tag
		nuevo = txtCSS & datos
	end if

	
	set archivo = objfilesys.OpenTextFile(Path & "continguts.css",2)
	archivo.write nuevo
	set archivo = nothing
	
%>

como veis en este caso la CSS se llama continguts.css y está en el directorio /portal.

espero que os sirva...
suerte.

Bravenap · #9 (**permalink**) 21/08/2003, 02:47

tico74 · #10 (**permalink**) 21/08/2003, 07:08

Gracias,aun no lo vi bien pero lo voy a probar y les comento!
Tico

tico74 · #11 (**permalink**) 21/08/2003, 09:17

Queria por favor consultarle a la gente que mas sabe acerca de este problemita:

Objetivo: Cambiar mediante una serie de combos de un formularios los datos contenidos en el archivo de hoja de estilo.
Idea:
Asi que tomo todo el contenido, la parte que quiero cambiar (que la guardo de forma fija en una variable) y a la que llamo trozo1 y la parte nueva modificada que llamo trozo2.

Estas 3 variables son usadas en una funcion Replace.

El problema y la consulta surge ya que no me toma bien la comparación de lo que aparece dentro de la variable trozo 1 en relacion a todo el contenido del archivo de hoja de estilo.

Set fs = CreateObject("Scripting.FileSystemObject")
Set wfile = fs.OpenTextFile("C:\Inetpub\wwwroot\sitio\style.cs s", 1, false)

'Aca guardo el contenido del archivo
viejocontenido = wfile.readall

'Trozo 1
trozo1 = "P.title { MARGIN-TOP: 0.1in; FONT-WEIGHT: bold; FONT-SIZE: 200%; MARGIN-BOTTOM: 0in; MARGIN-LEFT: 0.1in; COLOR: black; FONT-FAMILY: Arial, Helvetica, Verdana, sans-serif; VISIBLE: true; CAPTION: Title; } "

'Trozo 2
'aca tengo el nuevo valor de titlenuevo
trozo2 = "P.titlenuevo { MARGIN-TOP: 0.1in; FONT-WEIGHT: bold; FONT-SIZE: 200%; MARGIN-BOTTOM: 0in; MARGIN-LEFT: 0.1in; COLOR: red; FONT-FAMILY: Arial, Helvetica, Verdana, sans-serif; VISIBLE: true; CAPTION: Title; } "

'Reemplazamos
micadena = replace(viejocontenido, trozo1 , trozo2)

Esto lo hago asi y parece tonto pero mas adelante voy a cambiar las palabras titlenuevo o el color del estilo por variables cambiantes en una funcion