• Rozwiązano dezmont

    (@dezmont)


    Chciałbym aby moje tło działało na podobnej zasadzie co na ten stronie – link, czyli u góry po środku obrazek, reszta w danym kolorze (tutaj białym).

    Problem polega na tym, że nie mogę dodać kodu poprzez Custom CSS motywu. Jedyną opcją jaką widzę jest dodanie bezpośrednio do style.css i ponowne wgranie go na stronę.

    Aktualnie zrobiłem tak, że cały obraz tła jest w rozmiarze 1920×3500 i nie zdaje to w pełni egzaminu gdyż rozjeżdża się (tło z slajderem) na mniejszych rozdzielczościach innych monitorów.

    Kawałek kodu z style.css

    * {
    	margin: 0;
    	padding: 0px;
    	font-family: "Open Sans";
    }
    body {
    	background: #f8f8f8;
    	margin: 0;
    	height: 100%;
    	z-index: 1000;
    	color: #555;
    }
    img	{
    	border: 0;
    	padding: 0 0 0 0;
    }
    a {
    	outline: none;
    	font-weight: 600;
    }
    a:hover, a:visited, a:link, a:active {
    	text-decoration: none;
    	color: #666;
    }
    a:hover {
    	color: #333;
    }
    ul, li {
    	padding: 0 0 0 0;
    	margin: 0;
    	list-style-type: none;
    }
    hr {
    	border: 0;
    	border-bottom: 1px dashed #ddd;
    }
    p {
    	width: 100%;
    	padding: 0 0 0 0;
    	margin-bottom: 22px;
    	font-family: "Open Sans" !important;
    	font-weight: 300;
    	font-size: 13px;
    	line-height: 24px;
    	color: #777;
     	margin-top: 0;
    }
    strong {
    	font-weight: 600;
    }
    iframe {
    	border: none !important;
    }
    p a {
    	color: #333 !important;
    }
    h1, h2, h3, h4, h5, h6 {
    	font-family: "Open Sans" !important;
    	font-weight: 500;
    	padding: 0 0 0 0;
    	margin-top: 0; margin-bottom: 22px; margin-left: auto; margin-right: auto;
    	color: #50575E;
    	letter-spacing: -0.4px;
    }
    .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {
    	margin-bottom: 12px;
    }
    blockquote {
    	border-left: 5px solid #ddd;
    	padding: 0px 14px 0px 14px;
    	margin: 22px 0 22px 22px;
    }
    blockquote p {
    	font-style: italic;
    	color: #555;
    	font-weight: 500;
    }
    address, pre {
    	margin-bottom: 12px;
    	font-size: 12px;
    }
    .no-space [class*="span"] {
        margin-left: 0;
    }
    .no-margin {
    	margin: 0px !important;
    }
    .margin-bottom0 {
    	margin-bottom: 0px !important;
    }
    .margin-bottom {
    	margin-bottom: 22px;
    }
    .margin-top {
    	margin-top: 22px;
    }
    .padding-bottom0 {
    	padding-bottom: 6px !important;
    }
    .center {
    	text-align: center;
    }
    .center-position {
    	text-align: center;
    }
    .right {
    	text-align: right;
    }
    .left {
    	text-align: left;
    }
    .float-left {
    	float: left;
    }
    .float-right {
    	float: right;
    }
    .align-left {
    	float: left !important;
    }
    .align-right {
    	float: right !important;
    }
    .center {
    	margin-left: auto;
    	margin-right: auto;
    	text-align: center;
    }
    .page-template .content-container, .blog .content-container {
    	padding-top: 30px;
    	padding-bottom: 30px;
    }
    .single .content-container, .category .content-container, .archive .content-container {
    	padding-top: 30px;
    	padding-bottom: 30px;
    }
    .page-template .widget-right, .page-template .widget-left {
    	margin-top: -30px;
    }
    .category .widget-right, .category .widget-left {
    	margin-top: -30px;
    }
    .tag .widget-right, .tag .widget-left {
    	margin-top: -30px;
    }
    .content-container {
    	transition: all 1s;
    	-webkit-transition: all 1s; /* Safari */
    	-ms-transition: all 1s;
    	z-index: 3;
    	position: relative;
    	overflow: hidden;
    	background-color: #fff;
    	padding-top: 0px;
    	padding-bottom: 0px;
    }
    .content-container > .container {
    	padding-top: 0px;
    }
    .content-heading {
    	margin-bottom: 30px;
    	font-family: "Open Sans";
    	color: #555;
    	font-size: 18px;
    }
    .content-heading a {
    	color: #4DD2B8;
    	font-weight: 400;
    }
    .content-heading a:hover {
    	color: #444;
    }
    .heading {
    	font-size: 16px;
    	font-family: "Open Sans";
    	margin-bottom: 0px;
    	color: #555;
    }
    .single .heading {
    	font-size: 22px;
    	width: 65%;
    	display: inline-block;
    }
    .heading {
    	font-size: 16px;
    	font-family: "Open Sans";
    	margin-bottom: 30px;
    	color: #555;
    }
    .isotope .heading {
    	margin-bottom: 6px;
    	word-wrap: break-word;
    }
    .isotope .heading a {
    	width: 55%;
    	display: inline-block;
    }
    .heading a {
    	color: #51BAB6;
    	width: 65%;
    	display: inline-block;
    	line-height: 28px;
    	font-weight: 600;
    	transition: all 0.2s;
    	-webkit-transition: all 0.2s; /* Safari */
    }
    .heading a:hover {
    	color: #4C5359;
    }
    .isotope-loadmore {
    	margin-bottom: 40px;
    	margin-top: 30px;
    	width: 100%;
    	text-align: center;
    	transition: all 0.2s;
    	-webkit-transition: all 0.2s; /* Safari and Chrome */
    
    }
    .isotope-loadmore a {
    	background: #51BABE;
    	text-align: center;
    	font-size: 10px;
    	color: #fff;
    	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    	transition: all 0.2s;
    	-webkit-transition: all 0.2s; /* Safari */
    	padding: 14px 18px;
    	border-radius: 3px;
    	transition: all 0.2s;
    	-webkit-transition: all 0.2s; /* Safari and Chrome */
       text-transform: uppercase;
       letter-spacing: 3px;
    }
    .isotope-loadmore a:hover {
    	background: #444;
    }
    #toTop {
    	display:none;
    	text-decoration:none;
    	position:fixed;
    	bottom:30px;
    	right:30px;
    	overflow:hidden;
    	width:50px;
    	height:50px;
    	border:none;
    	text-indent:100%;
    	background-color: #111;
    	background-image: url(assets/img/backtotop.png);
    	background-repeat: repeat;
    	background-position: 0px 0px;
    	border-radius: 5px;
    	z-index: 700;
    	transition: all 0.4s;
    	-moz-transition: all 0.4s; /* Firefox 4 */
    	-webkit-transition: all 0.4s; /* Safari and Chrome */
    	-o-transition: all 0.4s; /* Opera */
    	z-index: 100000;
    }
    #toTop:hover {
    	background-color: #000;
    	background-image: url(assets/img/backtotop.png);
    	background-position: 0px -50px;
    }
    #toTop:active, #toTop:focus {
    	outline:none;
    }
    .no-comments p {
    	text-align: center;
    }
    .entry table {
    	border: 1px solid #ddd;
    	margin-bottom: 22px;
    }
    .entry th {
    	padding: 14px 18px 14px 18px !important;
    	text-align: center !important;
    }
    .entry tr:first-child {
    	border-bottom: 1px solid #ddd;
    	background: #f1f1f1;
    }
    .entry td {
    	padding: 14px 18px 14px 18px !important;
    	color: #888;
    	text-align: center !important;
    	font-size: 11.5px;
    }
    .entry .th-black {
    	background: #444;
    }
    dl {
    	font-size: 12px;
    }
    dt {
    	color: #333;
    }
    dd {
    	color: #888;
    	margin-bottom: 12px;
    }
    pre {
    	white-space: pre-wrap;       /* css-3 */
    	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    	white-space: -pre-wrap;      /* Opera 4-6 */
    	white-space: -o-pre-wrap;    /* Opera 7 */
    	word-wrap: break-word;       /* Internet Explorer 5.5+ */
    	background: #f1f1f1;
    	padding: 22px 22px 22px 22px;
    	border: 1px solid #ccc;
    	font-family: "Open Sans" !important;
    	font-size: 12px;
    	background: #f7f7f7 !important;
    	color: #555 !important;
    	margin-bottom: 22px;
    }
    footer {
    	z-index: 10000;
    }
    .hidden {
    	position: absolute;
    	left: -999999px;
    }
    
    pre {
    	background: #fff;
    	border-radius: 0px;
    	border: 1px solid #e7e7e7;
    }
    .empty-space {
    	width: 100%;
    	height: 30px;
    }
    .boxed {
    	background: #fff;
    	padding: 22px 22px 22px 22px;
    }
    .drop-shadow {
    	position:relative;
    }
    .drop-shadow:before,
    .drop-shadow:after {
        content:"";
        position:absolute;
        z-index:-2;
    }
    .curved:before {
        top:10px;
        bottom:10px;
        left:0;
        right:50%;
        box-shadow:20px 0 10px #ccc;
        -moz-border-radius:200px / 10px;
        border-radius:100px / 10px;
        top:50;
        bottom:50;
        left:12px;
        right:12px;
        -moz-border-radius:10px / 100px;
        border-radius:20px / 100px;
    }
    
    /

Viewing 3 replies - 1 through 3 (of 3 total)
  • A może by tak link do strony? ….bo z samego tylko jednego css’a to trochę jak diagnostyka lekarska pacjenta na podstawie zdjęcia paszportowego.

    Cuda na kiju normalnie 😛

    @dezmont zacznij od tego, podglądnij jak to jest zrobione na tamtej stronie.

    Pod znacznik body podstawiasz grafikę (tło):

    body#home {
    background: #fff
    url(http://www.parajet.com/images/backgrounds/bg_store_clouds.jpg)
     no-repeat center top;
    }

    Reszta to już czysty przypadek i zależy od tego, gdzie wstawisz ten slider 😉

    Twórca wątku dezmont

    (@dezmont)

    Już sobie poradziłem sam 😛

    Wystarczyło dodać !important; do linijki

Viewing 3 replies - 1 through 3 (of 3 total)
  • Temat ‘Problem z tłem’ jest zamknięty na nowe odpowiedzi.