Úprava CSS v programu zdarma
úprava CSS v free režimu
Dlouho jsem přemýšlel, čím bych mohl vyrazit lidem dech, jakým článkem, až mě napadl tenhle téměř jednoduchý......
Jediná potíž tady je v tom, že než se načte ta stránka, pár vteřinek tam bude naskakovat to pžednastavené css.
Pokud máte neplacený režim Estránek, a chcete vlastní šablonu, stačí si do KAŽDÉHO příspěvku či stránky včetně Úvodu voložit HTML kód podobný tomuto:
<style type="text/css" id="page-skin-1"><!--
xxx
--></style>
kde xxx je šablona, kterou chcete použít.
Ukažme si to na příkladu:
Vytvořil jsem podstránku, do které jsem vložil normálně v editoru tento HTML kód:
<style type="text/css" id="page-skin-1"><!--
@media screen,projection {
* {
margin: 0;
padding: 0;
}
body {
font-family: Tahoma, Arial, sans-serif;
color: #9EE5EB;
text-align: center;
font-size: small;
fo\nt-size: middle;
background: #000000 url("") repeat-x;
}
#lista .listaprbg {
background-color: #000000;
}
a{
color: white;
}
a:hover{
text-decoration: none;
}
#page {
width: 760px;
font-size: 95%;
margin: 0 auto;
text-align: left;
background-color: #000000;
position: relative;
}
* html #page {
font-size: 80%;
fo\nt-size: 90%;
}
#logo {
width: 760px;
height: 229px;
background: #000000 url("http://www.panickov.estranky.cz/archiv/logo/703210.jpg") 50% 0 no-repeat;
}
#nazev {
height: 229px;
heig\ht: 99px;
padding: 130px 0 0 20px;
font-family: Georgia, serif;
font-size: 240%;
font-weight: normal;}
#nazev a{
text-decoration: none;
color: white;
}
#submenu {
width: 190px;
float: left;
font-size: 100%;
overflow: hidden;
}
* html #main {
height: 10px;
}
#submenu-in {
margin-top: 20px;
}
#obrazek {
margin-bottom: 15px;
}
#submenu .img {
padding: 0 0 5px 15px;
}
#posledni .ilustrace {
padding: 0 0 5px 0;
}
#posledni {
text-align: center;
}
#posledni a{
color: white;
}
#submenu .img img, #posledni .ilustrace img {
padding: 15px 10px;
background-color: #000000;
border: 5px solid #FFFF00;
margin-bottom: 3px;
}
#posledni .navysku{
padding-top: 0px !important;
height: auto !important;
}
.box {
padding: 3px 0 40px 0;
background: url() 0 100% repeat-x;
}
#posledni .img{
text-align: center;
}
#submenu h3{
background: #000000;
padding: .4em 0 .4em 20px;
font-size: 120%;
color: white;
font-family: Georgia, serif;
text-transform: uppercase;
}
#submenu li{
border-bottom: 1px solid #000000;
list-style-type: none;
}
#submenu a{
color: #CCFFFF;
}
#fotoalbum a, #menu a, #odkazy a{
display: block;
padding: 5px 0 5px 25px;
text-decoration: none;
}
* html #fotoalbum a, * html #menu a, * html #odkazy a{
height: 10px;
}
#fotoalbum a:hover, #menu a:hover, #odkazy a:hover{
color: white;
background: #141E21;
}
#kalendar table{
font-size: 90%;
color: #488A90;
width: 170px;
}
#kalendar table strong{
color: #6DB2B8;
}
#kalendar table td{
text-align: center;
}
#kalendar table th{
text-align: center;
font-weight: bold;
color: #6DB2B8;
}
#text {
float:right;
margin-left: -200px;
width: 100%;
color: #9EE5EB;
}
#text-in {
margin-left: 200px;
padding: 3px 10px 0 0;
line-height: 150%;
}
#path{
padding: 7px 0 12px 7px;
margin-bottom: 30px;
color: #488A90;
background-color: #1B272A;
}
#path a{
color: #488A90;
}
#path strong{
color: #7CC3C9;
}
#text .nadpis{
padding: 5px 0 5px 0;
font-size: 170%;
margin: 0 0 3px 0;
color: white;
clear: both;
border-top: 5px solid #397B81;
font-weight: normal;
font-family: Georgia, serif;
float: left;
}
#text .nadpis a{
color: white;
text-decoration: none;
}
#text .podnadpis{
font-size: 220%;
padding: 0 0 5px 7px;
margin: 20px 0 0 0;
color: white;
clear: both;
font-weight: normal;
font-family: Georgia, serif;
}
#text .content{
margin: 3px 0 15px 0;
padding: 3px 4px;
line-height: 170%;
clear: both;
}
#text #spot, #text .spot{
border-top: 1px solid #397B81;
margin: 20px 0 0 3px;
clear: both;
}
* html #spot{
height: 10px;
}
#text #spot .datum{
color: white;
}
* html .content, * html #text .spot{
height: 10px;
}
#text .content p{
margin-bottom: 5px;
}
#text .spot .datum{
float: left;
color: #397B81;
padding-right: 15px;
}
#text .ilustrace{
float: left;
padding: 0 10px 0 0;
}
#text .ilustrace img{
border: 4px solid #1B272A;
}
#text .spotfoot{
padding: 3px 0;
clear: both;
color: #2798A2;
}
#text .spotfoot a, #text .spotfoot strong{
color: white;
}
#text .spotfoot span{
padding: 0 5px;
}
#uvod {
background-color: #1B272A;
color: #7CC3C9;
padding: 7px;
margin-bottom: 3px;
}
.fotogalerie{
width: 250px;
widt\h: 240px;
border: 1px solid #E6E6E7;
padding: 10px 0 10px 10px;
margin: 10px;
min-height: 10em;
float: left;
display: inline;
}
#fotogalerie{
clear: both;
border-top: 1px solid #397B81;
}
#fotogalerie .content{
margin: 0;
padding: 0;
white-space: nowrap;
}
* html #fotogalerie{
height: 10px;
}
* html .fotogalerie{
height: 12em;
}
.fotogalerie h4{
font-size: 120%;
margin-bottom: 10px;
font-family: Georgia, serif;
}
.fotogalerie ul {
width: 140px;
overflow: hidden;
text-overflow: ellipsis;
}
.fotogalerie li {
list-style-type: none;
margin: 0 0 4px 0;
}
.fotogalerie .ilustrace{
float: left;
padding: 0;
height: 9em;
}
#album{
clear: both;
margin-top: 30px;
border-top: 1px solid #397B81;
}
* html #album{
height: 10px;
}
.galerie{
float: left;
background: url("http://www4.estranky.cz/img/user/05galerie.gif") 0 10px no-repeat;
padding: 10px 5px 0 30px;
width: 250px;
wid\th: 220px;
min-height: 7em;
}
* html .galerie{
height: 7em;
}
.galerie h4{
font-size: 110%;
margin-bottom: 5px;
white-space: nowrap;
}
#komentare{
margin: 25px 0;
border-top: 1px solid #397B81;
}
#komentare .content{
margin: 0;
padding: 0 15px 5px 15px;
background-color: #182327;
}
#komentare .nadpis{
color: #6DB2B8;
}
#komentare .podnadpis{
color: white;
background-color: #10181A;
font-size: 140%;
padding: 3px 5px 5px 5px;
}
.pridat{
margin: 3px 0 15px 0;
padding: 3px 7px;
line-height: 130%;
color: white;
background-color: #182327;
}
* html .pridat{
height: 10px;
}
.pridat label {
display: block;
float: left;
width: 50px;
padding: 3px 5px;
clear: both;
}
.pridat input, .pridat textarea {
background-color: #223034;
color: white;
border: 0;
}
.pridat .button{
border: 2px solid #225054;
background-color: #397B81;
color: white;
margin: 10px 0 0 62px;
}
#jmeno, #nadpis, #txt {
display: block;
margin-left: 60px;
width: 450px;
}
.inf {
padding: 3px 5px;
}
.comment {
font-size: 110%;
font-weight: bold;
padding: 10px 0 5px 15px;
margin: 5px 0 0 0;
color: white;
background-color: #182327;
clear: both;
}
* html .comment {
height: 10px;
}
.comment span{
color: #397B81;
font-weight: normal;
font-size: 90%;
}
#foto-1, #foto-prehled{
border-top: 1px solid #397B81;
clear: both;
}
#foto-1 .content {
padding-top: 0px;
margin-top: 0px;
}
* html #foto-1, * html #foto-prehled {
height: 10px;
}
.fotky{
margin: 20px 0 0 0;
}
.image{
width: 99px;
height: 99px;
heig\ht: 77px;
text-align: center;
float: left;
display: inline;
margin: 0 10px 30px 10px;
padding-top: 22px;
background: #355058;
border: 5px solid #1B272A;
}
.navysku{
padding-top: 12px;
height: 99px;
heig\ht: 87px;
}
.fotka{
text-align: center;
clear: both;
}
.vfotka{
background-color: #182327;
margin-top: 5px;
padding: 15px 0 10px 0;
}
.fotka p{
padding: 0 40px 0 35px;
color: white;
}
.navfoto{
width: 90px;
height: 99px;
heig\ht: 77px;
text-align: center;
float: left;
display: inline;
margin: 0 5px 30px 5px;
padding-top: 22px;
background: #355058;
border: 4px solid #1B272A;
}
.fotka .navysku{
padding-top: 12px;
height: 99px;
heig\ht: 87px;
}
.fotka .seznam .navysku{
padding-top: 0px;
}
.fotka h2{
font-size: 110%;
font-weight: normal;
margin-bottom: 10px;
color: white;
text-transform: uppercase;
}
.fotka .nav{
margin: 20px auto;
height: 100px;
}
.fotka .seznam{
margin: 20px auto;
width: 530px;
overflow: auto;
overflow-y: visible;
white-space: nowrap;
clear: both;
}
.fotka .spotfoot{
background-color: #1B272A;
}
.fotka .tac{
margin: 0 10px;
}
.fotka .spotfoot a{
color: wehite !important;
}
.seznam img{
border: 2px solid #1B272A;
margin: 14px;
}
.tac {
text-align: center;
}
.clear {
clear: both;
}
#footer {
clear: both;
padding: 0px 0;
background: url() repeat-x;
text-align: right;
color: #000000;
}
#footer a{
color: #000000;
}
img {
border: none;
}
hr {
display: none;
}
.left {
float: left;
}
.right {
float: right;
}
.vlevo-float{
float: left;
margin: 5px 15px 5px 0;
}
.vpravo-float{
float: right;
margin: 5px 0 5px 15px;
}
.vpravo{
text-align: right;
margin: 5px 0;
width: 530px;
}
* html .vpravo, * html .vlevo, * html .uprostred, , * html .seznam, * html .table{
padding-bottom: 20px;
}
.vlevo{
text-align: left;
margin: 5px 0;
width: 530px;
}
.uprostred{
text-align: center;
margin: 5px 0;
width: 530px;
}
.obrazek{
overflow: auto;
overflow-y: visible;
}
.table{
margin: 5px 0;
width: 530px;
overflow: auto;
overflow-y: visible;
}
.clear{
clear: both;
height: 1px;
font-size: 1px;
}
.userarea ul, .userarea ol{
margin-left: 30px;
}
.userarea font{
line-height: 110%;
}
.userarea h1, .userarea h2, .userarea h3, .userarea h4, .userarea h5, .userarea h6{
line-height: 130%;
}
.overflow{
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
}
.userarea .safemargin{
margin-right: 2px;
}
fieldset{
border: none;
clear: both;
}
#searchbox fieldset {
border:none; width:100%;text-align:center;padding: 5px 0;
}
#searchbox br{
display:none;
}
#searchbox #key{
width:80%;margin: 0 auto 5px auto;
}
#searchbox #sendsearch{
cursor:pointer;cursor:hand;padding: 2px 5px;
}
}
--></style>
Ale vzhledem k tomu, že mé stránky jsou neustále pod dohledem, je jen otázkou času, kdy tuto možnost administrátoři Estránek zastaví.