Navbarhoz adott Gadget megnyújtása 100%-ra:


Nyisd meg a word-ot, adj a laphoz egy 1x1-es táblát, írd bele a szöveget amit akarsz, add meg a szöveg szinét és a tábla háttérszínét,  adhatsz a keretnek is színt vagy le is veheted a keretet, hogy keretnélküli tábla legyen. Amikor kész nyisd meg a gadget-et a navbar résznél a blogon, menj a HTML/JavaScript-részhez. Rich text-ben másold be amit wordben készítettél. Aztán nyisd meg az Edit Html részt, nyomd meg a CTRL + F gombokat, a lenyíló ablakba írd be: width. Megjelenik 3 érték width-el és lesz mögöttük egy érték, pl: 800px. Töröld ki a számot is és a ”px“-et is. Írd a helyére: 100%. Ezt mindhárom értéknél tedd meg. Aztán nyomd meg a SAVE gombot és kész. A bemásolt tábla 100% szélességben fog megjelenni a blogodon. 
Content háttérszíne:

.content-outer {
  background: $(content.background);

Kicserélni erre:

.content-outer {
  background: #9C9; 
Plussz WIDGET hozzáadása a NAVBAR-hoz:

Ezt:

<b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'>

Átírni erre:

<b:section class='navbar' id='navbar' maxwidgets='2' name='Navbar' showaddelement='yes'>
Widgets keret és rádiusz, ez CSS kód:

#sidebar-right-1 .widget {
border:3px solid #F03;
padding:5px;
margin:5px;
margin-top:0px;
background: #FF6;
border-radius: 10px;

}
Footer keret rádiusz megváltoztatása:

   <Variable name="footer.border.radius.top" description="Footer Border Radius Top" type="length" default="0" min="0" max="100px" value="0px"/>

   <Variable name="footer.border.radius.bottom" description="Footer Border Radius Bottom" type="length" default="20px" min="0" max="100px" value="0px"/>
Header keret rádiusz megváltoztatása:


<Variable name="header.border.radius" description="Header Border Radius" type="length" default="0" min="0" max="100px" value="0px"/>
Header 100% szélesség, saroktól sarokig:

.content-inner {
  padding: 0px;
}
Content sarkainak rádiusza:

<Variable name="content.border.radius" description="Content Border Radius" type="length" default="0" min="0" max="100px" value="0px"/> 
POST kerete és színe:

.post-outer {
  background-color: $(post.background.color);

  border: solid 2px #C33;
“Header 1” teljes felemelése a felső sarokig, az a része a blognak, ahová a blog title van írva:

Ezt a részt:

<Variable name="content.margin" description="Content Margin Top" type="length" default="20px" min="0" max="100px" value="30px"/>

Átírni erre:

<Variable name="content.margin" description="Content Margin Top" type="length" default="20px" min="0" max="100px" value="-30px"/>


Fontos, hogy amikor a Content teteje így fel van emelve, hogy hozzáér a sarokhoz és ezáltal nem látszik a háttérszín, akkor a Content alja lent szintén hozzá fog érni a lenti sarokhoz, ezzel tehát egy olyan blogot hozunk létre, ami fel, le, jobbra, balra mindenhol 100% szélességű.
POST távolsága a baloldali saroktól:

ennél a szekciónál:

/* Main
----------------------------------------------- */

ezt:

.main-inner .column-center-inner {
  padding: 0 0;
}

cseréld ki erre:

.main-inner .column-center-inner {
  padding: 0 20px;

}
POST szélességének állítása:

Állíts be LAYOUT-nak egy olyan formát, amelynél lesznek a jobboldalon widgets-ek. Ebben az esetben lesz a POST-nak egy szélessége és a widgets-nek is. Aztán az EDIT HTML-ben:

/* Main
----------------------------------------------- */
.main-outer {
 background: $(main.background);

Utána:

.main-outer { alá tedd ezt a kódot:


width:100%;
Content beállítása 100% szélességre:

.content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: $(content.width);
        max-width: 100%;
        _width: $(content.width);
      }

Az új kód, ami ide került:

max-width: 100%;

A max width eredetileg is ott van, de nem 100% van melléírva, a lényeg, hogy: 100%-on legyen, akkor lesz a blogod teljes képernyőn.
Subscribe to: Posts (Atom)