Programok szerkesztése

Megjegyzés:

A több részből álló (pl. egész napos) programoknál a programrészek tagolásával és az időpontok kiemelésével átláthatóbb lesz az oldal. Ehhez a ’PROGRAMOK – több szövegblokk, vonalas tagolás’ és a ’PROGRAMOK – több szövegblokk, vonalas és CSS stílus tagolás’ sablonokat célszerűbb használni.

A több szövegblokkos, vonalas tagolású sablonnál a szövegrészeket bekezdésenként, részletekben kell rámásolni ’txt…txt…’ jelzésű sorokra.

A több szövegblokkos, vonalas- és CSS tagolású sablonnál az időpontok vagy a cím kiemelése a CSS stílusokkal szerkeszthető. (Ezeket a stílusokat a teljes weboldal megjelenését meghatározó ’style.css’ fájl tartalmazza.)

Használatkor a piros színnel kiemelt (program-ora, program-nap, …) CSS (Cascading Style Sheets) osztályokat kell beírni a nyitó kacsacsőrök közé.

.program-ora, .program-nap, .program-cim { padding-top:10px !important;
padding-bottom:4px !important;
font-weight: bold !important;
}

@media (min-width: 768px) and (max-width: 1000px) {
.program-ora, .program-nap, .program-cim { padding-top:12px !important;
padding-bottom:6px !important;
}
}

@media (min-width: 1001px) and (max-width: 1600px) {
.program-ora, .program-nap, .program-cim { padding-top:16px !important;
padding-bottom:8px !important;
}
}

@media (min-width: 1601px) and (max-width: 2400px){
.program-ora, .program-nap, .program-cim {padding-top: 18px !important;
padding-bottom:10px !important;
}
}

@media (min-width: 2401px) {
.program-ora, .program-nap, .program-cim {padding-top: 22px !important;
padding-bottom:12px !important;
}
}

.program-ora {
position: relative;
display: inline-block; /* hogy a ::before a szöveghez igazodjon */
}

.program-ora::before {
content: „”;
position: absolute;
top: 8px;
left: 0;
width: 60px;
height: 4px;
background-color: #4aa893;
}

@media (max-width: 768px) {
.program-ora::before {
width: 50px; /* kisebb szélesség */
top: 2px; /* pl. közelebb a szöveghez */
}
}

.program-nap {
position: relative;
display: inline-block; /* hogy a ::before a szöveghez igazodjon */
}

.program-nap::before {
content: „”;
position: absolute;
top: 8px;
left: 0;
width: 60px;
height: 4px;
background-color: #4aa893;
}

@media (max-width: 768px) {
.program-nap::before {
width: 50px; /* kisebb szélesség */
top: 2px; /* pl. közelebb a szöveghez */
}
}

.program-cim {
position: relative;
display: inline-block; /* hogy a ::before a szöveghez igazodjon */
}

.program-cim::before {
content: „”;
position: absolute;
top: 2px;
left: 0;
width: 120px;
height: 4px;
background-color: #4aa893;
}

@media (max-width: 768px) {
.program-cim::before {
width: 100px; /* kisebb szélesség */
top: -1; /* pl. közelebb a szöveghez */
}
}

.program-reg { margin-top:-8px !important;
padding-bottom: 16px !important;
color: #ff0000 !important;
}

@media (min-width: 768px) and (max-width: 1000px) {
.program-reg { margin-top:-10px !important;
padding-bottom:18px !important;
}
}

@media (min-width: 1001px) and (max-width: 1600px) {
.program-reg { margin-top:-12px !important;
padding-bottom:20px !important;
}
}

@media (min-width: 1601px) and (max-width: 2400px){
.program-reg {margin-top: -14px !important;
padding-bottom:12px !important;
}
}

@media (min-width: 2401px) {
.program-reg {margin-top: -16px !important;
padding-bottom: 24px !important;
}
}

.program-reg {
color: #ff0000 !important;
}

.program-reg a {
color: #ff0000 !important;
background:
linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 0, 1)),
linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0), rgba(255, 0, 0, 0));
background-size: 100% 1px, 0 1px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 400ms;
}

.program-reg a:hover,
.program-reg a:focus {
background-size: 0 1px, 100% 1px;
}

Megjegyzés:

Egy szövegblokkban is jól tagolható tartalom szerkeszthető CSS stílusokkal, ahol ‘Kód’ nézetben a kódrészletek ‘copy/paste’ másolásával leggyorsabb a munka. A záró kacsacsőrök ne maradjanak le!

A szerkesztés külsö szövegszerkesztővel is történhet. Ha jobban átlátható felületet szeretnél a szintaxisok kiemelésével, jól használható az ingyenes Visual Studio Code alkalmazás. A szöveg formázás után ‘Kód’ nézetben (!!!), ‘copy/paste’ paranccsal beilleszthető.

Letöltés: https://code.visualstudio.com