Hvordan gjøre Buet Bokser i Joomla

Joomla er en av mange innhold styringssystemer, eller CMS, som lar sine brukere til å tilpasse utseendet på nettsiden deres. Enkeltpersoner kan publisere og avpublisere artikler eller blogginnlegg så ofte de vil, samt bearbeide den generelle layout med bilder og en bit av koden. For å lage avrundede hjørner, bruke en kunst program for å lage en avrundet rektangel, skjær den i fire bilder, laste opp disse bildene og legge den nødvendige koden.

Bruksanvisning

1 Åpne et kunstprogram som Photoshop, Gimp eller Corel Paintshop Pro og opprette et nytt dokument. Bruk de målene du ønsker din buet boksen for å være på nettstedet ditt når den er ferdig.

2 Tegn din boksen slik det har avrundede hjørner. Tiltakene vil variere avhengig av hvilket program du bruker. For eksempel i Photoshop er det et rektangel verktøy som lar deg endre innstillingene slik at hjørnene er avrundet i stedet for skarpe.

3 Del rektangelet inn for like deler ved hjelp av programmets spleise verktøy og lagre hver del som sitt eget bilde. Last opp bildene enten til din egen web host eller en gratis bilde-hosting nettsted som Photobucket.

4 Logg inn på Joomla og sørg for at du har "Avrundet" modul krom installert. Du kan finne denne modulen eller add-on på Joomla nettsted (se Ressurser)

5 Sett følgende uttalelse til "Avrundet" modul.

<Jdoc: include type = "moduler" name = "POSITION" style = "avrundet" />

Denne koden vil installere en håndfull linjer i den endelige utformingen, ser omtrent slik ut:

<Div class = "module_menu">
<Div>

&lt;div>
&lt;div>
&lt;h3>Main Menu&lt;/h3>
&lt;ul class=&quot;menu&quot;>
&lt;li>&lt;!-- various menu items -->&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>

</ Div>
</ Div>

6 Legg til avrundede hjørner bildene ved å opprette et nytt eksternt stilark og limer inn koden under:

div.module_menu {
Bakgrunn: URL (../ images / rounded_topleft.png) 0 0 no-repeat;
padding: 0;
}

div.module_menu div {
Bakgrunn: URL (../ images / rounded_bottomleft.png) 0 100% no-repeat;
margin: 0;
border: 0;
}

div.module_menu div div {
bakgrunn: URL (../ images / rounded_topright.png) 100% 0 no-repeat;
}

div.module_menu div div div {
bakgrunn: URL (../ images / rounded_bottomright.png) 100% 100% no-repeat;
}

7 Erstatt "../images/rounded_imagename" med plasseringen av hvert bilde, enten i en mappe på web host server eller på nettsteder som Photobucket.

8 Legg inn koden under til slutten av eksternt stilark slik at den vet hvor i layouten for å plassere bildene.

div.module_menu div div div div {
bakgrunn: none;
}

Merk at koden er nevnt i trinn 5 vil lese denne koden når den er blitt frelst, slik at endringene skal gå live på ditt nettsted.

9 Lagre endringene og sjekke nettstedet ditt. Gjør de nødvendige endringene som størrelsen på bildene dine, farge eller plassering ved å redigere kodene nevnt ovenfor.