Poloprůhledné pozadí textu v Image slider for your homepage

[Trampino]

Dokážete mi někdo poradit?

V definici slideu v rámci modulu Image slider for your homepage mám vložený obrázek a nad ním mám v poli Popis, vydefinovaný text. Protože ten podkladový obrázek je fotka, ak samozřejmě ať dám barvu toho textu jakoukoli, vždycky pak ve výsledku některá jeho část téměř splívá s barvou dané části podkladového obrázku. Proto odstavci toho textu nastavit poloprůhledné pozadí. Když ale odstavci toho textu vnutím přes editaci zdrojového kódu toho textu styl <p style="color: #fbe329; font-size: 18px;background-color: rgba(128,0,0,0.5);"> tak se stane následující:

- po uložení změn a následném reloadu homepage, se žádné polopropustné zobrazení nekoná

- když znovu otevřu zdrojový kód textu toho slideu k editaci, tak je tam najednou jen definice  <p style="color: #fbe329; font-size: 18px;">. To background-color: rgba(128,0,0,0.5); prostě samo od sebe z toho kódu zmizelo.

 

Můžete mi někdo poradit jak do toho slideu tu polopropustnost pozadí textu dostat?

 

Předřem říkám, že řešit to úpravou obrázku a mít ten text narvaný přes GIMP, nebo nějaký jiný grafický editor přímo v obrázku, pro mě není použitelné řešení.

 

Předem díky za vaše rady.   

[cinert]

pole description má  v tomto modulu definici isCleanHtml.

'description' =>	array('type' => self::TYPE_HTML, 'lang' => true, 'validate' => 'isCleanHtml', 'size' => 4000),

Díky tomu je na vstup při ukládání použit HTMLPurifier.

Ten ve verzi vložené do prestashop bohužel neumí zápis rgba(...)

if (strpos($color, 'rgb(') !== false) {
            // rgb literal handling
            $length = strlen($color);
            if (strpos($color, ')') !== $length - 1) {
                return false;
            }
            $triad = substr($color, 4, $length - 4 - 1);
            $parts = explode(',', $triad);
            if (count($parts) !== 3) {
                return false;
            }
            $type = false; // to ensure that they're all the same type
            $new_parts = array();
            foreach ($parts as $part) {
                $part = trim($part);
                if ($part === '') {
                    return false;
                }
                $length = strlen($part);
                if ($part[$length - 1] === '%') {
                    // handle percents
                    if (!$type) {
                        $type = 'percentage';
                    } elseif ($type !== 'percentage') {
                        return false;
                    }
                    $num = (float)substr($part, 0, $length - 1);
                    if ($num < 0) {
                        $num = 0;
                    }
                    if ($num > 100) {
                        $num = 100;
                    }
                    $new_parts[] = "$num%";
                } else {
                    // handle integers
                    if (!$type) {
                        $type = 'integer';
                    } elseif ($type !== 'integer') {
                        return false;
                    }
                    $num = (int)$part;
                    if ($num < 0) {
                        $num = 0;
                    }
                    if ($num > 255) {
                        $num = 255;
                    }
                    $new_parts[] = (string)$num;
                }
            }
            $new_triad = implode(',', $new_parts);
            $color = "rgb($new_triad)";
        } else {
            // hexadecimal handling
            if ($color[0] === '#') {
                $hex = substr($color, 1);
            } else {
                $hex = $color;
                $color = '#' . $color;
            }
            $length = strlen($hex);
            if ($length !== 3 && $length !== 6) {
                return false;
            }
            if (!ctype_xdigit($hex)) {
                return false;
            }
        }
        return $color;

Návrh řešení:

 

Do css souboru šablony přidat:

.homeslider-description > p {
    background-color: rgba(128,0,0,0.5);
}

[Trampino]

Díky moc za radu, zafungovalo to přesně tak, jak jsme potřeboval. nakonec jsem zvolil nastavení background-color: rgba(128,128,128,0.7);

Ještě bych měl jeden dotaz. To description se tam vypisuje v poměrně dost úzkém sloupci. To je předpokládám nadefinováno v kódu modulu někde natvrdo. Můžete mě prosím nasměrovat ve kterém souboru modulu a kde si můžu přenastavit šířku do, které se vypisují odstavce toho description? Potřeboval bych jí trochu rozšířit.

Předem díky moc. 

[cinert]

.homeslider-description > p {
    background-color: rgba(128,128,128,0.7);
    width: 100%;
}

do global.css v šabloně