Kérdés DD Garden 40 téma hátterének megváltoztatása

Több
2014 aug. 29 17:19 - 2014 aug. 29 17:24 #1 Írta: kocsislaci
kocsislaci létrehozta a témát: DD Garden 40 téma hátterének megváltoztatása
Adott a fent említett téma mely az alábbi háttérképet használja:




az alábbi kód segítségével: (template.css)
#dd-main
{
  background: #750000 url('../images/page.jpeg') scroll;
  background: -webkit-linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), -webkit-linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
  background: -moz-linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), -moz-linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
  background: -o-linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), -o-linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
  background: -ms-linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), -ms-linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
  background: linear-gradient(to bottom, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), linear-gradient(to bottom, #330000 0, #B80000 500px) no-repeat;
  -svg-background: linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
  margin: 0 auto;
  font-size: 13px;
  font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  position: relative;
  width: 100%;
  min-height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  overflow: hidden;
  
}

valamint: (editor.css)
body
{
  background: #750000 url('../images/page.jpeg') scroll;
  background: -webkit-linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), -webkit-linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
  background: -moz-linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), -moz-linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
  background: -o-linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), -o-linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
  background: -ms-linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), -ms-linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
  background: linear-gradient(to bottom, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), linear-gradient(to bottom, #330000 0, #B80000 500px) no-repeat;
  -svg-background: linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
  margin: 0 auto;
  font-size: 13px;
  font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  min-height: 100%;
  left: 0;
  top: 0;
  cursor: default;
}

A kérdés hogy tudok beállítani egy méretre szabott képet? Hasonlóan mint ezen az oldalon: www.vidi.hu//index.php?set_lang_code=hu

Köszönöm!
Mellékletek:
Utolsó szerkesztés: 2014 aug. 29 17:24 Írta: kocsislaci.

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 aug. 29 18:38 - 2014 aug. 29 18:50 #2 Írta: Zotius
Zotius válaszolt a témára: DD Garden 40 téma hátterének megváltoztatása
A vidi oldalán a háttérképet ez a sor adja a css-ben:
body {
    background: url('../../_files/background/background_1408564614.jpg') no-repeat fixed center top #000;
}

Az utasítás tartalma:
no-repeat: a képet nem ismétli, ha a kép valamely mérete (szélessége és/vagy magassága) kisebb lenne a képernyő méreténél. Jelen esetben ennek nincs jelentősége, mert a kép a nagyobb, minden irányban túllóg a képernyőn.
fixed: a kép nem gördül scrollozáskor,
center top: a háttérkép fent középre lesz igazítva.

Az általad idézett kódból a többi, -webkit ... kezdetű sort akár törölheted is:
background: -webkit-linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), -webkit-linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
background: -moz-linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), -moz-linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
background: -o-linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), -o-linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
background: -ms-linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), -ms-linear-gradient(top, #330000 0, #B80000 500px) no-repeat;
background: linear-gradient(to bottom, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), linear-gradient(to bottom, #330000 0, #B80000 500px) no-repeat;
-svg-background: linear-gradient(top, rgba(18, 0, 0, 0.21) 0, rgba(217, 0, 0, 0.33) 500px) no-repeat, url('../images/page.jpeg'), linear-gradient(top, #330000 0, #B80000 500px) no-repeat;

Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius
Mellékletek:
Utolsó szerkesztés: 2014 aug. 29 18:50 Írta: Zotius.
A következő felhasználók mondtak köszönetet: kocsislaci

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 aug. 29 18:55 #3 Írta: kocsislaci
kocsislaci válaszolt a témára: DD Garden 40 téma hátterének megváltoztatása
Hát mit mondjak!!! Köszönöm!!! Abszolút sikerült :)

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 szept. 01 21:40 - 2014 szept. 01 21:43 #4 Írta: kocsislaci
kocsislaci válaszolt a témára: DD Garden 40 téma hátterének megváltoztatása
Nem nyitnék még egy témát amiatt hisz szervesen kapcsolódik a témához a következő kérdésem.

Adott a fent nevezett téma melynek a slider megjelenítője a sablonon belül konfigurálható kivéve annak méretét. Na mos bekerestem az összes css fájlt és semmi utalást nem találok a megadott méretre.... hol keressem, vagy esélytlen ennek beállítása? Lényegében a két oldalsáv szélének méretére szeretném összehúzni....

A sablonkezelőben az adott emnüben ez van feltüntetve:

Size photo must be 1920px to 417px! !

css:

nivo-slider.css
style.css
template.css
editor.css
template.responsive.css
template.ie7.css
print.css
custom.css

nivo slider: (erre gondolnék):
/*
 * jQuery Nivo Slider v2.6
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
 
 
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;

}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:50%;
	height:50%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
}
.nivo-box {
	display:block;
	position:absolute;
	
	z-index:5;
}
/* Caption styles */
.nivo-caption {
	margin-left:40%;
	margin-bottom:50px;
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.5; /* Overridden by captionOpacity setting */
	width:700px;
	z-index:8;
	border-radius:5px 5px 5px 5px;
	
}

.nivo-caption p {
	padding:10px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:70%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:9;
	cursor:pointer;
	margin-top:10px;
}
.nivo-controlNav a.active {
	font-weight:bold;
}




A képet a Képfeltöltés.hu tárolja. http://www.kepfeltoltes.hu


Köszönöm!!
Utolsó szerkesztés: 2014 szept. 01 21:43 Írta: kocsislaci.

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 szept. 02 08:00 - 2014 szept. 02 08:30 #5 Írta: Zotius
Zotius válaszolt a témára: DD Garden 40 téma hátterének megváltoztatása
Ha mindenáron le akarod venni a slider képméretét, akkor a style.css 2. sorában igazíthatsz rajta:
style.css 2. sor:
.theme-default #slider {
    width: 1920px;
    height: 417px;
}
helyett:
.theme-default #slider {
    width: 1070px !important;
    height: 417px !important;
    margin-left: auto;
    margin-right: auto;
}
Az !important azért fontos, mert van még egy inline definíció is, mely később érvényesül és felülírná ezt.

Egyébként a honlap végeredmény vizsgálatához javaslom a Firefox böngészőben pl. a Web Developer vagy a Firebug bővítmény telepítését és használatát. Sokat segít a működő honlap megjelenését befolyásoló css utasítások megváltoztatásának hatásvizsgálatában.

Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius
Utolsó szerkesztés: 2014 szept. 02 08:30 Írta: Zotius. Indoklás: kiegészítés, javítás
A következő felhasználók mondtak köszönetet: kocsislaci

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2014 szept. 02 19:54 #6 Írta: kocsislaci
kocsislaci válaszolt a témára: DD Garden 40 téma hátterének megváltoztatása
Először is nagyon köszönöm!!!

Igazad van, telepítettem és megtanulom használatát is!!

Köszi!!

Jelentkezz be, hogy te is részt vehess beszélgetésben!