Změna barvy písma u nadpisu

Úvodní stránka Fórum podpory WordPressu Problémy s WordPressem Změna barvy písma u nadpisu

Zvolené téma obsahuje celkem 7 odpovědí. Do diskuze (3 účastníci) se naposledy zapojil uživatel  sjiamnocna a poslední změna je stará 10 let, 3 měsíce.

Aktuálně je na stránce zobrazeno 8 příspěvků - 1. až 8. (z celkem 8)
  • Autor
    Příspěvky
  • #5430

    krkovicka
    Participant
    Web

    Neví někdo jak změnit barvu nadpisu u příspěvku? popřípadě druh písma a velikost? děkuji za odpověď ..

    #16978

    sjiamnocna
    Participant
    Web

    Ve WordPressu se vše zařizuje pomocí stylů. Pokud chcete změnit vzhled nadpisů, najděte v šabloně soubor style.css a v ní zápis pro nadpisy(stačí zjistit, který je použit[h1,h2,h3,h4,h5,h6], popř. která třída je u nich použita[jen u nadpisu nad příspěvkem/archivem…]).

    Potom stačí následovat vlastnosti color,font-size,font-family

    #16979

    krkovicka
    Participant
    Web

    bohužel jsem začátečník v těchto věcech, proto bych poprosil ještě upřesnění pojmu zápis pro nadpisy …

    #16980

    sjiamnocna
    Participant
    Web

    omlouvám se…

    V souboru staly.css najdete zhruba toto:

    h1(nebo)h2/h3/h4/h5/h6 = označení pro nadpisy – v kódu <h1><h2><h3><h4><h5><h6>

    {} = množinové závorky(otevírají a uzavírají určení vlastností)

    .xxx = třída(umožňuje identifikaci jednoho či více prvků stejného) – <h# class="xxx">

    #xxx = id(identifikuje jeden útvar) – <h# id="xxx">

    takže pro vás by mělo fungovat toto:

    .neznamacesta > h#{
    color:#ABCDEF; //barva v 16kové soustavě RGB
    color:rgb(255,255,255); //barva RGB rozpětí 0-255
    color:rgba(255,255,255,0.7); //barva RGB 0-255 + průhlednost(viditelný z 0.7=70%) nebo také průhledný z 1-0.70=0.3=30%
    font-family:arial; //druh písma - název
    font-size:10px; //velikost písma - v obr. bodech, nebo v % velikosti písma rodičovského prvku (nadřazeného)
    }

    .neznamacesta je označení pro to, že místo ní může bý cokoliv a # je číslo uvedené za h(1,2,3,4,5,6).

    Měl byste si zjistit, ve kterém z nich se nadpis nachází.

    Vím, vyčerpávající, ale doufám, že pochopíte aspoň co máte dělat. Kdyby něco, napište sem :)

    #16981

    krkovicka
    Participant
    Web

    Tak na tohle jsem asi krátký … jediná podobná oblast, kde se vyskytuje <h1><h2><h3><h4><h5><h6> je tato:

    #art-main
    {
    background: #0D0D0D;
    margin:0 auto;
    font-size: 11px;
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    text-align: justify;
    position: relative;
    width: 100%;
    min-height: 100%;
    left: 0;
    top: 0;
    cursor:default;
    overflow:hidden;
    }
    table, ul.art-hmenu
    {
    font-size: 11px;
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    font-weight: normal;
    font-style: normal;
    text-align: justify;
    }

    h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
    {
    margin: 0;
    padding: 0;
    }

    /* Reset buttons border. It's important for input and button tags.
    * border-collapse should be separate for shadow in IE.
    */
    .art-button
    {
    border-collapse: separate;
    -webkit-background-origin: border !important;
    -moz-background-origin: border !important;
    background-origin: border-box !important;
    background: #3D3D3D;
    background: linear-gradient(top, #525252 0, #292929 100%) no-repeat;
    background: -webkit-linear-gradient(top, #525252 0, #292929 100%) no-repeat;
    background: -moz-linear-gradient(top, #525252 0, #292929 100%) no-repeat;
    background: -o-linear-gradient(top, #525252 0, #292929 100%) no-repeat;
    background: -ms-linear-gradient(top, #525252 0, #292929 100%) no-repeat;
    background: linear-gradient(top, #525252 0, #292929 100%) no-repeat;
    -svg-background: linear-gradient(top, #525252 0, #292929 100%) no-repeat;
    border:1px solid #6B6B6B;
    padding:0 25px;
    margin:0 auto;
    height:25px;
    }

    .art-postcontent,
    .art-postheadericons,
    .art-postfootericons,
    .art-blockcontent,
    ul.art-vmenu a
    {
    text-align: left;
    }

    .art-postcontent,
    .art-postcontent li,
    .art-postcontent table,
    .art-postcontent a,
    .art-postcontent a:link,
    .art-postcontent a:visited,
    .art-postcontent a.visited,
    .art-postcontent a:hover,
    .art-postcontent a.hovered
    {
    font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
    text-align: justify;
    }

    jak poznám, co patří k přípspěvkům ….

    #16982

    admin
    Keymaster
    Web

    Pokud alespoň částečně nerozumíte CSS a HTML, tak je to těžké, protože to bude na každém webu trochu jiné. Příklad z vašeho webu:

    Spacáky Anaconda

    Abyste změnil barvu nadpisu “Spacáky Anaconda”, tak musíte do style.css přidat (nadpis pak bude bílý):

    .art-postheader h1 {

    color: white;

    }

    Konkrétní návod pro zadání konkrétní barvu hezky popsal sjiamnocna o kus výše…

    P.S. Docela by mě zajímalo, jak jste dostal do URL adresy dlouhé “á” :-)

    #16983

    krkovicka
    Participant
    Web

    Děkuji za odpověď,

    poprosil bych upřesnění místa, kam vložit :

    .art-postheader h1 {

    color: white;

    }

    zatím jsem to vyřešil tak, že jsem dal nadpis příspěvku skrýt a vytvořil jsem nadpis přímo v příspěvku.

    to URL je záhada, vůbec nechápu, kde se tam vzalo je to název jednoho z letáků na webu :)

    #16984

    sjiamnocna
    Participant
    Web

    Ve stavu, kdy je již zapsáno .art-postheader, můžete h1 vynechat. Tady je část z kódu:

    .art-postheader, .art-postheader a, .art-postheader a:link, .art-postheader a:visited, .art-postheader a:hover

    {
    font-size: 28px;
    font-family: 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
    font-weight: bold;
    font-style: normal;
    text-align: left;
    }

    pokud pozměníte údaj přímo v tomhle, bude to mít vliv na barvu, velikost písma či font nadpisu příspěvků :)

Aktuálně je na stránce zobrazeno 8 příspěvků - 1. až 8. (z celkem 8)

Pokud chcete odpovědět na toto téma, musíte se nejdříve přihlásit.

WordPress – novinky, návody a zajímavosti