Změna velikosti písma

Drobečková navigace

CSS blog > Stylování widgetů v TinyMCE

Stylování widgetů v TinyMCE



Ukázka 1

HTML

 <div class="module-widget-blog">
    <div class="widget widget-left">
        <div class="ipo-widget" data-widget="article" data-widget-source="3140426" data-widget-count="3">
            {{#content}}
                {{#data}}
                    <div class="widget-body clearfix">
                        <h3><time datetime="{{#date}}c{{/date}}">{{date}}</time></h3>
                        <p><a href="http://{{link}}">{{title}}</a></p>
                        {{#image}}
                            <a href="http://{{link}}" class="widget-link"><img src="{{src}}&amp;width=60&amp;height=60" class="widget-link-img"></a>
                        {{/image}}
                    </div>
                {{/data}}
            {{/content}}
            {{^content}}
                Nic tu není.
            {{/content}}
        </div>
    </div>
    <div class="widget widget-right">
        <div class="ipo-widget" data-widget="article" data-widget-source="3140426" data-widget-count="3">
            {{#content}}
                {{#data}}
                    <div class="widget-body clearfix">
                        <h3><time datetime="{{#date}}c{{/date}}">{{date}}</time></h3>
                        <p><a href="http://{{link}}">{{title}}</a></p>
                        {{#image}}
                            <a href="http://{{link}}" class="widget-link"><img src="{{src}}&amp;width=60&amp;height=60" class="widget-link-img"></a>
                        {{/image}}
                    </div>
                {{/data}}
            {{/content}}
            {{^content}}
                Nic tu není.
            {{/content}}
        </div>
    </div>
    <hr class="cleaner">
</div>

CSS

 .widget {
    width: 50%;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.widget-left {
    float: left;
    border-right: 1px solid #E5E5E5;
    padding-left: 7%;
}
.widget-right {
    float: right;
    border-left: 1px solid #E5E5E5;
    padding-right: 7%;
}
.widget-body {
    border: 1px solid #E5E5E5;
    position: relative;
    width: 93%;
    margin: 0.5em 0;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.widget-left .widget-body {
    float: left;
    padding: 0 20px 0 45px;
}
.widget-right .widget-body {
    text-align: right;
    float: right;
    padding: 0 45px 0 20px;
}
.widget-link {
    position: absolute;
    top: 21%;
    border: 3px solid white;
    -webkit-box-shadow: 0px 0px 3px 0 #000000;
    -moz-box-shadow: 0px 0px 3px 0 #000000;
    box-shadow: 0px 0px 3px 0 #000000;
}
.widget-left .widget-link {
    left: -30px;
}
.widget-right .widget-link {
    right: -30px;
}
.widget-link-img {
    max-width: 60px;
    max-height: 60px;
}

Použití je za předpokladu, že zákazník používá nové aktuality a vkládá obrázky jako součást komponenty (nutno povolit v nastavení aktualit), nikoliv obrázky vkládáne do samotného obsahu aktuality (text). Pokud nebude povoleno, nic se neděje, jen je potřeba upravit mírně stylování, protože budou jednotlivé aktuality rozměrově veliké. Při použití kombinace aktuality/úřední deska je potřeba upravit kód a odstranit načítání obrázku.

Ukázka 2


HTML

<div class="module-widget">
    <div class="ipo-widget" data-widget="article" data-widget-source="2447987" data-widget-count="5">
        <h2><a href="http://ipopage/?oid=2447987">{{name}}</a></h2>
        {{#content}}
            {{#data}}
                <fieldset class="widget-data-news">
                    <legend><time datetime="{{#date}}c{{/date}}">{{date}}</time></legend>
                    <h3><a href="http://{{link}}">{{title}}</a></h3>
                    <p style="text-align: right;"><a href="http://{{link}}">zobrazit více</a></p>
                </fieldset>
            {{/data}}
        {{/content}}
        {{^content}}
            Nic tu není.
        {{/content}}
    </div>
</div>

CSS

.module-widget {
    width: 33%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1% 5% 1% 1%;
    border-right: 1px solid white;
    margin-right: 5%;
    float: left;
}
.module-widget h2 {
    margin-top:0;
    padding-top: 0;
}
.module-widget fieldset {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    padding: 0.4em;
    margin: 0.5em 0;
}
.module-widget legend {
    font-size: 1.1em;
    margin: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.5);
    border: 1px solid white;
}
.widget-data-news:nth-child(odd) {
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.5);
}
.widget-data-news:nth-child(even) {
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.7);
}

Při použití pro modul úřední desky je potřeba nahradit v HTML celý obsah <legend> za {{added}}. Potom ještě název namísto {{title}} za {{name}}.


Kalendář akcí

Po Út St Čt So Ne
25 26 27 28 29 30 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5