Quatre trucs per a personalitzar la plantilla de mesvilaweb.cat: Com afegir imatges en el títol del bloc

Si et usuari del servidor de blocs de mesvilaweb.cat tens l?avantatge de pertànyer a una comunitat de blocs catalans amb molta audiència i que més a més a vegades pots sortir en la edició digital del portal de noticies www.vilaweb.cat, què és el segon portal de noticies en català amb una nombre que supera el 260.000 usuaris únics per mes. Això fa que sigui fàcil que el teu bloc tingui garantit un nombre de visites significatiu.

Mentre què si ets usuari dels altres servidors o proveidors de blogs, és més difícil què el teu bloc tingui visites inicialment, al menys que facis una promoció del mateix, cosa que avui en dia no es gens fàcil, atès la proliferació de blocs que pots trobar en Internet.

Però si comparem les possibilitats de maquetació i serveis que t?ofereixen els altres proveïdors de blocs amb el que t?ofereix mesvilaweb.cat, aquest darrer té molt camí per recórrer per a arribar a les prestacions dels altres.

Però malgrat tot, la comunitat blocarie de mesvilaweb.cat és molt bona, és molt bona qualitat i té un dinamisme força bo, sobretot pel que fa a temes de política catalana. Tot això fa què per a mi, sigui de moment la meva plataforma escollida per el meu bloc.

Com ja he dit en el bloc Nou look pel meu bloc, em vaig decidir canviar la meva plantilla del meu bloc per una modificada al meu gust. En ell explico el perquè considero què la plantilla que mesvilaweb.cat et proporciona per poder-la fer a la teva mida, és feta de manera que no sigui gens fàcil de fer-ho.

En Marc Belzunces, què tè un dels blocs que darrerament s?ha modificat ell mateix el seu look i què sempre el llegeixo, em demana en el comentari al bloc, si el puc explicar com he aconseguit ficar imatges en la capçalera del títol del bloc. També em diu que tinc un problema amb el color de fons no definit pel bloc en general que fa què en si el Windows té un color de fons per defecte definit diferent del blanc, en els navegadors Opera i IExplorer V6, fa què el meu bloc no quedi bé. Encara no ho he resolt, perquè els primers intents m?han provocat alguns desajustos amb els colors dels menús laterals, espero fer-ho al llarg d?aquesta setmana junt amb altres modificacions que tinc a la ment. Ja està resolt.

Per tot això he pensat que aniré escrivint blocs a on intentaré explicar com és poden resoldre aquests problemes d?una manera senzilla. No pretenc escriure un manual d?instruccions, això és cosa de mesvilaweb.cat , però si que puc anant donat alguns trucs per resoldre els problemes que poden sortir quan modifiques la plantilla del bloc. A la vegada m?agradaria intercanviar amb altres blocaries altres trucs i possibilitats per fer més vistos i funcional els blocs de mesvilaweb.cat

.

Comencem amb la petició de Marc sobre com afegir una imatge al títol.

(continua)

Si mireu el bloc del Mails per Hipàtia de Vicent Partal, què és el responsable de www.Vilaweb.cat, podeu veure què no te un títol de text, sinó que té una imatge a on es pot veure la seva foto amb el text del títol fer amb lletres amb un grafisme especial.

Vicent Partal

Això em va indicar què era possible fer-ho. Ara el què toca és saber com.

En la plantilla que et proporciona mesvilaweb és un text amb les instruccions de com ha d?esser la teva plantilla pel servidor web de mesvilaweb.cat. Es molt recomanable que aquestes instruccions siguin llegides i modificades amb un editor especial per programar codi html o millor si poden treballar directament amb el que s?anomenen fulls d’estil en cascada o CSS (Cascading Style Sheets). Recomano que llegiu aquest curs en català de CSS per entendre millor com funciona la maquetació amb CSS.

Una vegada hem obert la plantilla veurem en les primeres línies una classe general anomenada ?nameBloc?, aquesta classe és la què defineix les propietats de com ha de sortit el títol i el subtítol del nostre bloc. La classe ?nameBloc? te els següents selectors:

#nameBloc .left {

propietats

}

#nameBloc .title {

propietats

}

#nameBloc .titleBloc, .titleBloc:visited, .titleBloc:hover {

propietats

}

#nameBloc .subtitleBloc, .subtitleBloc:visited, .subtitleBloc:hover {

propietats

}

#nameBloc .right {

propietats

}

Dins de cada selector és defineixen les propietats i una d?aquestes propietats en el selector .left i en .right és:

background-image: url(xxxxxxxxxxx.gif);

sent xxxxxxxxxxx.gif el nom de la imatge que vols que surti. Com és pot deduir si saps una mica d?angles, selector .left és per la imatge que surt per l?esquerra, que en el meu bloc és la estelada i pel selector .right és per la imatge que surt per la part dreta del bloc, que en el meu bloc és la meva foto.

Altre problema és com puc accedir a la imatge que vull que surti en el títol, dons la manera que he trobat per fer-ho és creant un esborrall de bloc a on fiques la imatge que vols que surti, desprès en la previsualització fiques el cursor a sobre amb el ratolí i mires en el menú contextual que surt al prémer el boto dret del ratolí, l?opció propietats. En aquesta opció surt la direcció i el nom amb que el servidor de mesvilaweb.cat ha emmagatzemat la imatge. El nom és un nom aleatori que el servidor de mesvilaweb assigna automàticament com a identificador únic per la base de dades, per això és força il·legible.

Aquesta direcció i el nom, és el que tens que escriure en compte del xxxxxxxxxxx.gif segons l?exemple anterior.

La extensió i el format de la imatge pot ser qualsevol de les que admet mesvilaweb.cat quan envies una imatge.

Espero Marc (i a altres ) que us serveixi.

Afegeix un comentari

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *