|
Zmiana układu strony i obramowanie w skórce Aer
|
| anatol16 |
Dodany dnia 05.04.2010 11:55:05
|
Przedszkolak
Postów: 4
Data rejestracji: 05.04.2010 11:30
|
Witam,
Po przeglądięciu waszego forum udało mi się ustawić na sztywno szerokość mojej strony. Po zmianie paru linijek kodu w styles.css do skórki Aer doszedłem do tego miejsca (głównie zamiana plików graficznych na inne).
Problem:
Chciałbym zmniejszyć z lewej i prawej strony stopkę (chyba tak to się nazywa) tak aby usunąć to podświetlenie dla całej strony (link do zrzutu). Wiem że strona źle się wyświetla w IE (jeszcze tego nie poprawiłem - zmiana odcieni kolorów, może jak znajdę informację na forum to może wtedy)
http://img63.imag...tuuqkq.png
I aby lepiej zobrazować o co mi chodzi to pokaże to na tym rysunku niżej. Żółtym kolorem zaznaczyłem poszczególne komórki(tak jak mi sie wydaje, że jest to zbudowane). I myślałem o obcięciu tych bocznych komórek (tak do czerwonej linii bo na ten czas tam jest wrzucona grafika odpowiedzialna za cienie - oryginalnie było to białe).
http://img683.ima...ytuu2y.png
Ogólnie chodziło mi o to aby to białe tło co jest miało cień dookoła swojej obwódki na kilka pixeli. To ze stopka jest taka szeroka to mi nie przeszkadza.
PW od moderatora:
- Zmiana nazwy tematu - Chemikpil 05.04 - 12:03
Edytowane przez anatol16 dnia 05.04.2010 12:26:46
|
| |
|
|
| Wścibski Gość |
Dodany dnia 23.11.2024 03:55:28
|
Pan Kontekstualny
Postów: n^x
Data rejestracji: Zawsze
|
|
| IP: localhost |
|
|
| karoldinho |
Dodany dnia 05.04.2010 17:01:52
|
Przedszkolak
Postów: 78
Pomógł: 7
Ostrzeżeń: 1
Data rejestracji: 11.08.2009 14:36
|
Daj cały kod theme.php, bo samo z siebie się nie weźmie.
Edytowane przez khaman dnia 05.04.2010 17:09:34
|
| |
|
|
| anatol16 |
Dodany dnia 05.04.2010 17:05:29
|
Przedszkolak
Postów: 4
Data rejestracji: 05.04.2010 11:30
|
<?php
/*.aer Theme for PHP-Fusion v7.......*|
|*.Author: Max "Matonor" Toball......*|
|*.Released under the Affero GPLv3...*/
//Theme Settings
define("THEME_WIDTH", "95%"); // było "95%" theme width. Make sure to adapt the margin-left in the first div (-width/2).
define("THEME_BULLET", "<span class='bullet'>·</span>"); //bullet image
$enable_colour_switcher = true; //true=enable colour switcher | false=disable colour switcher
$enable_fontsize_switcher = true; //true=enable fontsize switcher | false=disable fontsize switcher
$enable_column_switcher = true; //true=enable column switcher | false=disable column switcher
//Theme Settings /
if (!defined("IN_FUSION")) { header("Location: ../../index.php"); exit; }
require_once INCLUDES."theme_functions_include.php";
require_once THEMES."templates/switcher.php";
$colour_switcher = new Switcher("select", "colour", "png", "blue", "switcherbutton");
if(!$enable_colour_switcher){
$colour_switcher->disable();
}
$column_switcher = new Switcher("select", "columns", "png", "both", "switcherbutton");
if(!$enable_column_switcher){
$column_switcher->disable();
}
$fontsize_switcher = new Switcher("increment", "fontsize", "png", 1, "switcherbutton", "", true, array("step" => 0.1, "max" => 1.5));
if(!$enable_fontsize_switcher){
$fontsize_switcher->disable();
}
redirect_img_dir(THEME."forum", THEME."forum/".$colour_switcher->selected);
set_image("pollbar", THEME."images/navbg.jpg");
function get_head_tags(){
global $colour_switcher, $fontsize_switcher, $column_switcher;
echo $colour_switcher->makeHeadTag();
echo $column_switcher->makeHeadTag();
echo "<style type='text/css'>body{font-size: ".$fontsize_switcher->selected."em;}</style>";
echo "<!--[if lte IE 7]><style type='text/css'>.clearfix {display:inline-block;} * html .clearfix{height: 1px;}#subheader ul {display:inline-block;}#subheader ul {display:inline;}#subheader ul li {float:left;}</style><![endif]-->";
}
function render_page($license=false) {
global $aidlink, $locale, $settings, $colour_switcher, $fontsize_switcher, $column_switcher, $main_style;
echo "\t<div id='body2'>
<div id='header' class='clearfix'>
<div class='resized'>
<div id='userbar' class='floatfix'>
<ul id='anchors' class='flleft'><li><a href='#content'>".$locale['global_210']."</a></li></ul>
<ul id='links' class='clearfix flright'>\n";
if(iMEMBER){
echo "\t\t\t\t\t\t\t<li><a href='".BASEDIR."edit_profile.php'>".$locale['global_120']."</a> </li>
<li> | <a href='".BASEDIR."messages.php'>".$locale['global_121']."</a></li>
".(iADMIN ? "<li> | <a href='".ADMIN."index.php".$aidlink."' >".$locale['global_123']."</a></li>" : "")."
<li> | <a href='".BASEDIR."setuser.php?logout=yes'>".$locale['global_124']."</a></li>\n";
}else{
echo "\t\t\t\t\t\t\t<li><a href='".BASEDIR."login.php'>".$locale['global_104']."</a></li>
".($settings['enable_registration'] ? "<li> | <a href='".BASEDIR."register.php'>".$locale['global_107']."</a></li>\n" : "");
}
echo "\t\t\t\t\t\t</ul>
</div>
<div id='mainheader' class='clearfix'>".showbanners()."</div>
</div>
</div>
<div id='subheader' class='floatfix'>
<div class='resized flleft'>
".
preg_replace("^(li)( class='(first-link)')*(><a href='(\.\./)*".preg_quote(START_PAGE)."')^i", "\\1 class='active \\3'\\4", showsublinks(""))."
</div>
<div id='switcher' class='flright'>
".$colour_switcher->makeForm("flright")."
".$column_switcher->makeForm("flright")."
".$fontsize_switcher->makeForm("flright")."
</div>
</div>
<div id='main'>
<div id='cont_r'>
<div id='cont_l'>
<div id='cont' class='clearfix $main_style'>
".(LEFT ? "<div id='side-border-left'>".LEFT."</div>" : "")."
".(RIGHT ? "<div id='side-border-right'>".RIGHT."</div>" : "")."
<div id='main-bg'><div id='container'>".
U_CENTER.
CONTENT.
L_CENTER."
</div></div>
</div>
</div>
</div>
</div>
</div>
<div id='closer'></div>
<div id='footer' class='floatfix'>
".(!$license ? "<div class='flleft' style='width: 50%'>".showcopyright()."<br />\n Theme designed by <a href='http://matonor.com'>Max Toball</a></div>" : "")."
<div class='flright' style='width: 50%; text-align: right;'>".stripslashes($settings['footer'])."</div>
</div>
<div id='subfooter' class='clearfix'>
<div class='flleft' style='width: 50%'>".sprintf($locale['global_172'], substr((get_microtime() - START_TIME),0,4))."</div>
<div class='flright' style='width: 50%; text-align: right;'>".showcounter()."</div>
</div>";
}
function render_news($subject, $news, $info) {
global $locale;
opentable($subject);
echo "<div class='floatfix'>".$news."</div>
<div class='news-footer'>
".newsposter($info," ·").newsopts($info,"·").itemoptions("N",$info['news_id']).
"</div>\n";
closetable();
}
function render_article($subject, $article, $info) {
global $locale;
opentable($subject);
echo "<div class='floatfix'>".($info['article_breaks'] == "y" ? nl2br($article) : $article)."</div>
<div class='news-footer'>
".articleposter($info," ·").articleopts($info,"·").itemoptions("A",$info['article_id']).
"</div>\n";
closetable();
}
function opentable($title) {
echo "\n
<div class='lbg'><div class='rbg'>
<div class='tbg'><div class='bbg'>
<div class='ctl'><div class='cbl'><div class='ctr'><div class='cbr'>
<div class='panelbody'>".(!empty($title) ? "<h2 class='panelcap'>$title</h2>" : "")."\n";
}
function closetable() {
echo "\t</div>
</div></div></div></div></div></div></div></div>\n";
}
$panel_collapse = true;
function openside($title, $collapse = false, $state = "on") {
static $box_id = 0; $box_id++;
global $panel_collapse, $p_data; $panel_collapse = $collapse;
if($p_data['panel_filename'] == "css_navigation_panel") $title = "";
opentable(($collapse ? panelbutton($state,$box_id) : "").$title);
echo ($collapse ? panelstate($state, $box_id) : "");
}
function closeside() {
global $panel_collapse, $p_data;
echo ($panel_collapse ? "\t</div>" : "");
closetable();
}
?>
Edytowane przez anatol16 dnia 05.04.2010 17:05:58
|
| |
|
|
| karoldinho |
Dodany dnia 05.04.2010 17:19:15
|
Przedszkolak
Postów: 78
Pomógł: 7
Ostrzeżeń: 1
Data rejestracji: 11.08.2009 14:36
|
Hehe ale sobie wybrałeś skórkę  Nie ma żadnej grafiki zawartej w theme, wszystko jest przypisane przez styles.css. Moja rada: jak chcesz ją tak modyfikować to już lepiej ją skleić i zrobić od nowa. |
| |
|
|
| anatol16 |
Dodany dnia 05.04.2010 17:28:13
|
Przedszkolak
Postów: 4
Data rejestracji: 05.04.2010 11:30
|
To ja prześle jeszcze styles.css. Ogólnie się nie znam na php (w małym stopniu na html'u) I jedyne co zmieniłem to szerokość - ustawiona na sztywno, podmieniłem pliki w katalogu images (ale nie mogłem gdzieś znaleźć od tego cienia na dole i wydaje mi sie ze to jest inaczej zrobione (może być???)). I chyba coś z kolorami robiłem dla tła (aby u góry pod logiem był "pasujący" obrazek i jednolite tło). To chyba tyle z tego co pamiętam.
/*Aer Theme for PHP-Fusion 7 by Max "Matonor" Toball*/
/*General*/
html {font-size: 75%;}
body {
margin: 0 auto;
width: 1200px;
background: #3c3c3c url(/images/Dumi_back/ppa.png) repeat-x top;
color: #fff;
}
* html body{
width: 100%;
overflow: hidden;
}
#body2 {
background: #fff;
color: #3d3d3d;
}
* {
font-family: Verdana, Arial, Sans, sans-serif;
margin: 0;
padding: 0;
border: 0;
font-size: 1em;
}
ul, ol, dl {margin: 0.5em 1em}
li {margin-left: 1.5em; line-height: 1.5em;}
option {padding-left: 0.75em}
#subheader ul, #subheader li, #userbar ul, #userbar li, #navigation ul, #navigation li {
margin: 0;
line-height: inherit;
}
/*Links*/
a {text-decoration: none;}
a:hover {text-decoration: underline;}
#subheader a, #links a{
color: #fff;
text-decoration: none;
}
#subheader a{
display: block;
float: left;
color: #242424;
margin-right: 0.75em;
margin-bottom: -2px;
background: #e5e5e5 url(images/tabbg.png) repeat-x top right;
}
* html #subheader a {margin: 0 0.2em;}
#subheader a span{
display: block;
float:left;
height: 2em;
line-height: 2em;
padding: 0 0.5em;
background: transparent url(images/tabl.png) no-repeat top left;
}
#subheader a:hover, #subheader .active a{
background: #fff url(images/tabhbg.png) repeat-x top right;
}
#subheader a:hover span, #subheader .active a span{
background-image: url(images/tabhl.png);
}
#links a{
line-height: 1.6em;
height: 1.6em;
font-size: 0.9em;
margin-right: 0.3em;
}
#links a:hover {
color: #ccc;
}
#footer a {
color: #aaa;
}
#anchors a {
line-height: 1.6em;
font-size: 1em;
color: #444;
margin-left: 0.5em;
}
#anchors a:active, #anchors a:focus, #anchors a:hover{color: #fff;}
/*Structure*/
#subheader {
background: url(images/subheadbg.png) repeat-x;
padding-top: 0.7em;
padding-left: 1em;
overflow: hidden;
height: 1.8em;
}
#subheader ul {
display: table;
white-space: nowrap;
right: 0 !important;
padding: 0 !important;
}
#subheader li {
display: table-cell;
}
#mainheader {
padding: 0 1em 1em 1em;
}
#switcher {
width: 220px;
padding-right: 55px;
}
#userbar{
height: 1.8em;
position: relative;
font-family: "Trebuchet MS", "Lucida Grande", sans-serif;
}
#userbar ul li, #subheader ul li {
float: left;
list-style: none;
}
#links {
position: absolute;
right: 0.5em;
top: 0;
}
#tab {
position: absolute;
right: -13px;
bottom: 0;
margin-top: 0.1em;
width: 210px;
height: 23px;
background: transparent url(images/tab_l.gif) repeat-x bottom left;
}
#tab_r {
height: 23px;
line-height: 23px;
padding: 0 1em;
}
#footer {
color: #888;
margin: -1em auto 0 auto;
padding: 1em;
font-size: 0.8em;
}
#subfooter {
margin: 0 auto;
padding: 1em;
color: #888;
font-size: 0.75em;
}
#closer {
background: url(images/closer.png) repeat-x top;
height: 1em;
}
.resized {
padding: 0 38px;
}
#cont_l {
padding-left: 45px;
background: url(images/shadowl2.png) repeat-y left;
}
#cont_r {
padding-right: 45px;
background: url(images/shadowr2.png) repeat-y right;
}
#main-bg {
line-height: 1.45em;
padding: 0.5em 0.25em;
z-index: 3;
}
#side-border-left {
width: 16.75em;
max-width: 16.75em;
padding: 0.5em 0 0 0.5em;
z-index: 1;
float: left;
display: inline;
}
#side-border-right {
width: 16.75em;
max-width: 16.75em;
padding: 0.5em 0.5em 0 0;
z-index: 2;
float: right;
display: inline;
}
.side-both #main-bg {margin: 0 17em;}
.side-left #main-bg {margin: 0 0.5em 0 17em;}
.side-right #main-bg {margin: 0 17em 0 0.5em;}
/*Navigation Panel*/
#navigation {margin: 0 -0.45em 0 -0.45em;}
#navigation h2, .side-label {
color: #444;
font-size: 1.1em;
padding: 0.25em;
margin-bottom: 1px;
font-weight: 700;
}
#navigation ul {
margin: 0;
display: block;
list-style-type: none;
line-height: 1.2em;
}
#navigation .bullet {display: none;}
* html #navigation ul li, #navigation a {height: 1%;}
#navigation a {
background: #f0f0f0 url(images/navbg.jpg) repeat-x center right;
display: block;
text-decoration : none;
margin-bottom: 1px;
}
#navigation a span{
display: block;
height: 1.7em;
line-height: 1.7em;
padding: 0 0.5em;
}
#navigation a:hover {
background-image: url(images/navhbg.jpg);
}
/*Misc Styles*/
.pagenav {padding: 0.4em;}
.pagenav span, .pagenav a, .pagenav a:hover {
color: #ccc;
border: 1px solid #ccc;
padding: 0.2em 0.4em 0.2em 0.4em;
margin: 0.2em;
text-decoration: none;
}
.pagenav a {
color: #333;
}
.switcherbutton {
height: 16px;
width: 16px;
}
.textbox, .button {
color: #555;
background: #fff;
border: 1px solid #ddd;
font-size: 1em;
margin-top: 0.1em;
padding: 0.25em;
}
.textbox:focus {
color: #333;
border-color: #999;
}
.button{
color: #aaa;
}
.bbcode{
background: #fff;
border: 1px solid #ddd;
}
.news-category {
float: left;
margin: 0.2em 0.5em 0 0;
}
.news-footer-img {vertical-align: middle;}
.panelcap {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #fff;
font-size: 1.2em;
padding-bottom: 0.25em;
display: block;
font-weight: 500;
}
.panelbody{
padding: 0 0.5em;
}
#side-border-right .panelbody {
border-right: 3px solid #ccc;
}
#side-border-left .panelbody {
border-left: 3px solid #ccc;
}
.lbg {background: url(images/lbg.png) repeat-y left;}
.rbg {background: url(images/rbg.png) repeat-y right;}
.tbg {background: url(images/tbg.png) repeat-x top;}
.bbg {background: url(images/bbg.png) repeat-x bottom;}
.ctl {background: url(images/ctl.png) no-repeat top left;}
.cbl {background: url(images/cbl.png) no-repeat bottom left;}
.ctr {background: url(images/ctr.png) no-repeat top right;}
.cbr {
background: url(images/cbr.png) no-repeat bottom right;
height: 1%;
padding: 0.95em 0.95em;
}
#side-border-right .ctr {background: url(images/ctr2.png) no-repeat top right;}
#side-border-right .ctl, #main-bg .ctl {background: url(images/ctl2.png) no-repeat top left;}
#side-border-right .cbl {background: url(images/cbl2.png) no-repeat bottom left;}
#side-border-right .cbr, #main-bg .cbr {
background: url(images/cbr2.png) no-repeat bottom right;
padding-left: 0.75em;
}
.code_bbcode div{
border: 1px solid #ddd;
border-left: 3px solid #ccc;
}
.code_bbcode div.tbl2{border-bottom: none;}
.quote,.admin-message {
border: 1px solid #ddd;
border-left: 3px solid #ccc;
background: #f3f3f3;
margin: 0 2em;
padding: 3pt;
}
.admin-message{
color: #999;
padding: 0.5em;
margin: 1em auto;
width: 80%;
}
code, pre {
font-family: monospace;
font-size: 1.1em;
}
.poll {
height: 1em;
border: 1px solid #ccc;
background: #f5f5f5;
}
.shoutboxname, .comment-name {font-weight: 700;}
.shoutboxdate {
color: #888;
font-size: 0.8em;
}
.small,.small2,.side-small {font-size: 0.9em;}
.tbl-border{
background: #f0f0f0;
border: 1px solid #f5f2eb;
}
.tbl,.tbl1,.tbl2,.forum-caption {padding: 3pt;}
.forum-caption {
color: #666;
font-variant: small-caps;
font-weight: 700;
background: #eee;
}
.tbl1 {background: #f6f6f6;}
.tbl2 {background: #f2f2f2;}
hr {
border: solid #ccc 1pt;
height: 1pt;
}
.setuser_body{
background: #3a3a3a;
color: #333;
}
.news-footer {
padding: 0.5em;
font-size: 0.9em;
text-align:right;
}
.panelbutton{
float: right;
margin: 0.15em -0.25em 0 0;
}
h1,h2,h3,h4,h5,h6 {font-size: inherit;}
/*Helpers*/
.center {margin: 0 auto;}
.content_center {text-align: center;}
.flleft {float: left !important;}
.flright {float: right !important;}
.clear {clear: both;}
.inline {display:inline;}
#container{
width: 100%;
overflow-x: auto;
overflow-y: visible;
}
/*IE Fixes*/
* html #main-bg {
height: 1%;
width: auto;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
.floatfix {overflow:hidden;}
* html .floatfix {width:100%;}
.center, *[align="center"] {margin: 0 auto;}
|
| |
|
|
| karoldinho |
Dodany dnia 05.04.2010 21:22:42
|
Przedszkolak
Postów: 78
Pomógł: 7
Ostrzeżeń: 1
Data rejestracji: 11.08.2009 14:36
|
Weź naszkicuj jeszcze raz (pokaż dokładniej) co ma być usunięte bo gubię się  Zakreskuj obszar bo nie chcę czegoś co ma zostać usunąć. |
| |
|
|
| anatol16 |
Dodany dnia 05.04.2010 21:33:36
|
Przedszkolak
Postów: 4
Data rejestracji: 05.04.2010 11:30
|
To co na czerwono to tego może nie być, To co na zielono zostaje (wiem logo się przesunie i stopka się ściśnie). A dookoła białego pola wewnątrz chciałbym cień (taki jaki jest po bokach ale wiem ze to można w CSS już zdefiniować - chyba że znowu coś pokręciłem :/ )
http://img693.ima...ytuubd.png
Przepraszam ze tak namotałem. |
| |
|
|
| karoldinho |
Dodany dnia 07.04.2010 11:30:37
|
Przedszkolak
Postów: 78
Pomógł: 7
Ostrzeżeń: 1
Data rejestracji: 11.08.2009 14:36
|
W załączniku masz poprawiony theme, tak jak pokazałeś zostawiłem troszkę czarnego pola po lewej i prawej stronie Jakbyś coś nie wiedział to możesz napisać to Ci podpowiem.
karoldinho dodał/a następującą plik:
|
| |
|
