2Mb Header für ein Forum?

7Quaresma90 · 30.06.2009

Hallo
Ich wollte mal Fragen ob ein animierter gif Header gut für ein phpbb3 (html) Forum ist. Er ist ca. 2,3 Mb Groß. Oder wird das bei einigen User/Gäste zu Probleme kommen?

MamiyaRB67 · 30.06.2009

AW: 2Mb Header für ein Forum?

Bei der Dateigröße solltet ihr euch sicherlich Gedanken machen. Auch wenn heute 2,3 MB meistens schnell heruntergeladen sind gibt es immer noch Anwender mit schmalbandigem DSL bzw. ISDN/Analog.

Außerdem solltet ihr den entstehenden Traffic im Auge haben. Bei "nur" tausend Zugriffen pro Tag entstehen 2,3 GB Traffic!!!

Silvio · 30.06.2009

AW: 2Mb Header für ein Forum?

Der muss auf jeden Fall kleiner gemacht werden, wenn euch die Besucher(-zahlen) wichtig sind. Ich würde sagen, allerhöchstens 1 MB...Kannst Du das nicht noch komprimieren?

7Quaresma90 · 30.06.2009

AW: 2Mb Header für ein Forum?

nein soviel zugriffe haben wir nicht.
danke erstmal. ich hab aber noch eine frage. ich ändere gerade die farben meines boardes.den hintergrund hab ich schon geändert. jetzt kann man aber solche sachen wie :

Code:

Powered by phpBB Arcade © 2008 JRSweets
            [ Administrations-Bereich ]

phpBB skin developed by: phpBB Headquarters
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Almsamim WYSIWYG
    
Deutsche Übersetzung durch phpBB.de

nicht mehr lesen. wo ändere ich die schriftfarbe davon?
das ist mal mein stylesheet.css :

HTML:

/*  phpBB 3.0 Style Sheet
    --------------------------------------------------------------
    Style name:    AeroRed
    Based on style:    subSilver (the default phpBB 2 style)
    Original author: subBlue ( http://www.subBlue.com/ )
    
    Copyright 2006 phpBB Group ( http://www.phpbb.com/ )
    --------------------------------------------------------------
*/

/* Layout
 ------------ */
* {
    /* Reset browsers default margin, padding and font sizes */
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;    
}

form { margin: 0px; padding: 0px; }

body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    color: #000000;
    background-color: #560107;
    background-image: url('./images/bg.gif');
    background-repeat: repeat-x;
    background-position: top;
    background-attachment: scroll;
    font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
    margin: 0 auto;
}

.wrap {
    width: 97%;
    margin: 0 auto;
    min-width: 850px;
    margin-top: 5px;
}

#wrapheader {
}

.midlink {
    padding-right: 8px;
}

.logo {
    padding-left: 8px;
    padding-bottom: 5px;
}

#wrapsimple {
    margin: 25px 25px 0 25px;
}

#wrapnav {
    width: 100%;
    margin: 0;
    background-color: #881010;
    border-width: 1px;
    border-style: solid;
    border-color: #A9B8C2;
}

#logodesc {
    margin-bottom: 5px;
    padding: 5px 25px;
    background: #D9DFE4;
    border-bottom: 1px solid #4787A7;
}

#menubar {
    margin: 0 25px;
}

#datebar {
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.bc {    
    margin-left: 10px;
    margin-right: 10px;
}

.forumbar {
    margin-left: 10px;
    margin-right: 10px;
}

.tablebg {
    background-color: #000000;
}

#findbar {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.forumrules {
    margin-left: 10px;
    margin-right: 10px;
    background-color: #EFF7FB;
    border-width: 1px;
    border-style: solid;
    border-color: #3A4955;
    padding: 4px;
    font-weight: normal;
    font-size: 1.1em;
    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

.forumrules h3 {
    color: #AA0000;
    font-size: 1.3em;
}

#pageheader { 
    margin-left: 10px;
    margin-right: 10px;
}

.navspacel {
    display: block;
    position: relative;
    float: left;
    width: 2px;
    height: 24px;
}

.navspacer {
    display: block;
    position: relative;
    float: right;
    width: 2px;
    height: 24px;
}

a.squarebuttonl {
    background: transparent url('./images/navl.png') no-repeat top left;
    display: block;
    float: left;
    font-size: 10px; /* Change as desired */
    line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
    height: 24px; /* Height of button background height */
    padding-left: 8px; /* Width of left menu image */
    text-decoration: none;
}

a.squarebuttonr {
    background: transparent url('./images/navl.png') no-repeat top left;
    display: block;
    float: right;
    font-size: 10px; /* Change as desired */
    line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
    height: 24px; /* Height of button background height */
    padding-left: 8px; /* Width of left menu image */
    text-decoration: none;
}

a:link.squarebuttonl, a:visited.squarebuttonl, a:active.squarebuttonl, a:link.squarebuttonr, a:visited.squarebuttonr, a:active.squarebuttonr {
    color: #FFFFFF; /*button text color*/
    text-decoration: none;
}

a.squarebuttonl span, a.squarebuttonr span {
    background: transparent url('./images/navr.png') no-repeat top right;
    display: block;
    padding: 4px 8px 4px 0; /*Set 8px below to match value of 'padding-left' value above*/
}

a.squarebuttonl:hover, a.squarebuttonr:hover { /* Hover state CSS */
    background-position: bottom left;
}

a.squarebuttonl:hover span, a.squarebuttonr:hover span { /* Hover state CSS */
    background-position: bottom right;
    color: #FFFFFF;
}

.buttonwrapper { /* Container you can use to surround a CSS button to clear float */
    overflow: hidden;
    height: 24px;
    width: 100%;
}

#pagecontent { }
#pagefooter { }

#poll { }
#postrow { }
#postdata { }

/* Search box
--------------------------------------------- */
#search-box {
   color: #FFFFFF;
   float: right;
   padding-top: 13px;
   text-align: right;
   white-space: nowrap; /* For Opera */
}

#search-box #keywords {
   width: 121px;
   height: 16px;
   background: transparent url("./images/searchbg.gif");
   background-repeat: no-repeat;
   color: #999999;
   font-size: 11px;
   font-style: italic;
}

#search-box input {
   border: none;
}

/* .button1 style defined later, just a few tweaks for the search button version */
#search-box input.button1 {
   padding: 1px 5px;
}

#search-box li {
   text-align: right;
}

#search-box img {
   vertical-align: middle;
   margin-right: 3px;
}

input.search {
   padding-left: 20px;
   padding-top: 4px;
}

input.forumsearch {
   background-image: url("./images/icon_textbox_search.gif");
   background-repeat: no-repeat;
   background-position: left 1px;
   border-color: #3A4955;
   color: #999999;
   font-size: 11px;
   font-style: italic;
   padding-left: 17px;
   padding-top: 2px;
   padding-bottom: 2px;
}

/*  Text
 --------------------- */
h1 {
    color: white;
    font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
    font-weight: bold;
    font-size: 2.0em;
    text-decoration: none;
}

h6 {
    color: #002A46;
    font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
    font-weight: bold;
    font-size: 2.0em;
    text-decoration: none;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.5em;
    text-decoration: none;
    line-height: 120%;
}

h3 {
    font-size: 1.3em;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 120%;
}

h4 {
    color: white;
    margin: 0;
    font-size: 1.1em;
    font-weight: bold;
}

h5 {
    color: #002A46;
    margin: 0;
    font-size: 1.1em;
    font-weight: bold;
}

p {
    font-size: 1.1em;
}

p.moderators {
    margin: 0;
    float: left;
    color: black;
    font-weight: bold;
}

.rtl p.moderators {
    float: right;
}

p.linkmcp {
    margin: 0;
    font-size: 1em;
    float: right;
    white-space: nowrap;
}

.rtl p.linkmcp {
    float: left;
}

p.breadcrumbs {
    margin: 0;
    float: left;
    color: black;
    font-weight: bold;
    white-space: normal;
    font-size: 1em;
}

.rtl p.breadcrumbs {
    float: right;
}

p.datetime {
    margin: 0;
    float: right;
    white-space: nowrap;
    font-size: 1em;
}

.rtl p.datetime {
    float: left;
}

p.searchbar {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 2px;
    padding: 2px 0;
    white-space: nowrap;
} 

p.searchbarreg {
    margin: 0;
    float: right;
    white-space: nowrap;
}

.rtl p.searchbarreg {
    float: left;
}

p.forumdesc {
    padding-bottom: 2px;
}

p.topicauthor {
    margin: 1px 0;
}

p.topicdetails {
    margin: 1px 0;
}

.postreported, .postreported a:visited, .postreported a:hover, .postreported a:link, .postreported a:active {
    margin: 1px 0;
    color: red;
    font-weight:bold;
}

.postapprove, .postapprove a:visited, .postapprove a:hover, .postapprove a:link, .postapprove a:active {
    color: green;
    font-weight:bold;
}

.postapprove img, .postreported img {
    vertical-align: bottom;
}

.postauthor {
    color: #000000;
}

.postdetails {
    color: #000000;
}

.postlink, a.postlink, a.postlink:visited, a.postlink:link, a.postlink:active {
    color: #002A46;
    text-decoration: none;
}

a.postlink:hover {
   color: #005893;
   text-decoration: underline;
}

.signature, a.signature:link, a.signature:visited, a.signature:active {
   color: #002A46;
   text-decoration: none;
}

a.signature:hover {
   color: #005893;
   text-decoration: underline;
}

.postbody {
    font-size: 1.3em;
    line-height: 1.4em;
    font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
}

.postbody li, ol, ul {
    margin: 0 0 0 1.5em;
}

.rtl .postbody li, .rtl ol, .rtl ul {
    margin: 0 1.5em 0 0;
}

.posthilit {
    background-color: yellow;
}

.nav {
    margin: 0;
    color: black;
    font-weight: bold;
}

.nav:hover {
    margin: 0;
    color: black;
    font-weight: bold;
}

.pagination {
    color: black;
    font-size: 1em;
    font-weight: bold;
}

.gen {
    margin: 1px 1px;
    font-size: 1.2em;
}

.genmed {
    margin: 1px 1px;
    font-size: 1.1em;
}

.headw {
    color: #FFFFFF;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    margin: 1px 1px;
    font-size: 2.0em;
}

.genmedw {
    color: #FFFFFF;
    margin: 1px 1px;
    font-size: 1em;
}

a.genmedw, a.genmedw:visited, a.genmedw:link, a.genmedw:active, a.genmedw:hover {
    color: #FFFFFF;
    margin: 1px 1px;
    font-size: 1em;
}

.gensmall {
    margin: 1px 1px;
    font-size: 1em;
}

.genspace {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 1em;
}

.copyright {
    color: #444;
    font-weight: normal;
    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

#footer {
    text-align: center;
}

.titles {
    font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 1.3em;
    text-decoration: none;
}

.error {
    color: #AA0000;
}


/* Tables
 ------------ */
th {
    color: #FFFFFF;
    font-size: 1.1em;
    font-weight: bold;
    background-color: #006699;
    background-image: url('./images/cellpic1.gif');
    white-space: nowrap;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
}

td.profile {
    padding: 4px;
    border-right: 1px solid #A7BAC5;
}

.tbspace {
    padding: 10px;
}

.bcbg {
    background-color: #3A4955;
}

.attachbg {
    background-color: #A7BAC5;
}

.attachrow {
    background-image: url('./images/rowh.gif');
    padding: 4px;
}

.catdiv {
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
}

.cat {
    color: #FFFFFF;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #002A46;
    background-image: url('./images/cellpic1.gif');
    text-indent: 4px;
}

.catb {
    color: #FFFFFF;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #031A2F;
    background-image: url('./images/cellpic3.gif');
    text-indent: 4px;
}

.forums {
    background-color: #EFF7FB;
    background-image: url("./images/gradient.gif");
    background-repeat: repeat-x;
}

.forumrow {
    padding: 6px;
}

.row1 {
    background-color: #EFF7FB;
    padding: 4px;
}

.row1h {
    border: 1px solid transparent;
    padding: 4px;
}

.row1h:hover {
    background-color: #E4F4FE;
    border: 1px solid #D4EEF9;
    padding: 4px;
}

.row2 {
    background-color: #E4F4FE;
    padding: 4px;
}

.row3 {
    background-color: #DEF1FC;
    padding: 4px;
}

.row3h {
    background-color: #D8ECF6;
    background-image: url('./images/rowh.gif');
    background-repeat: repeat-x;
    background-position: top;
    border-bottom: 1px solid #96D9F9;
    padding: 4px;
}

.row4 {
    background-color: #EFF7FB;
}

.tabtable {
    background: url("./images/tabsbg.gif") repeat-x;
    border-bottom: 1px solid #A7BAC5;
}

#tabs {
    line-height: normal;
    margin: 0 0 0 0;
    min-width: 570px;
}

#tabs ul {
    margin:0;
    padding: 0;
    list-style: none;
}

#tabs li {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-weight: bold;
}

#tabs a {
    float: left;
    background: url("./images/bg_tabs1.gif") no-repeat 0% -35px;
    margin: 0 0 0 0;
    padding: 0 0 0 5px;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    border-left: 1px solid #D5D5D5;
    border-right: 1px solid #D5D5D5;
}

#tabs a span {
    float: left;
    display: block;
    background: url("./images/bg_tabs2.gif") no-repeat 100% -35px;
    padding: 6px 10px 6px 5px;
    color: #727272;
    white-space: nowrap;
}

#tabs a:hover span {
    color: #000000;
}

#tabs .activetab a {
    background-position: 0 0;
    border-left: 1px solid #96D9F9;
    border-right: 1px solid #96D9F9;
}

#tabs .activetab a span {
    background-position: 100% 0;
    color: #333333;
}

#tabs a:hover {
    background-position: 0 -70px;
    border-left: 1px solid #93C9E3;
    border-right: 1px solid #93C9E3;
}

#tabs a:hover span {
    background-position:100% -70px;
}

#tabs .activetab a:hover {
    background-position: 0 0;
}

#tabs .activetab a:hover span {
    color: #000000;
    background-position: 100% 0;
}

#navigation {
    width: 100%;
    padding-top: 15px;
    padding-bottom: 14px;
}

#navigation ul {
    list-style: none;
}

/* Default list state */
#navigation li {
    margin: 0;
    padding: 0;
    font-weight: bold;
    display: inline;
}

/* Link styles for the sub-section links */
#navigation a {
    display: block;
    padding: 3px;
    margin: 0;
    text-decoration: none;
    font-weight: bold;
    color: #333333;
    background: #EFF7FB none repeat-y 100% 0;
    border: 1px solid #EFF7FB;
}

#navigation a:hover {
    text-decoration: none;
    background-color: #E8F5FD;
    color: #000000;
    background-image: none;
    border: 1px solid #D8F0FA;
}

#navigation #active-subsection a {
    display: block;
    color: #333333;
    background-color: #D5EFFC;
    background-image: none;
    border: 1px solid #99DEFD;
}

#navigation #active-subsection a:hover {
    color: #000000;
}

.pollbg { background: #EFF7FB url('./images/pollbg.gif') repeat-x;
    padding: 4px;
}

.spacer {
    background-color: #A7BAC5;
}

hr {
    height: 1px;
    border-width: 0;
    background-color: #D1D7DC;
    color: #D1D7DC;
}

.legend {
    text-align:center;
    margin: 0 auto;
}

/* Links
 ------------ */
a:link {
    color: #002A46;
    text-decoration: none;
}

a:active, a:visited {
    color: #002A46;
    text-decoration: none;
}

a:hover {
    color: #002A46;
    text-decoration: underline;
}

a.forumlink, a.forumlink:visited, a.forumlink:link, a.forumlink:active {
    color: #002A46;
    font-weight: bold;
    font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size: 1.3em;
}

a.forumlink:hover {
    color: #005893;
    font-weight: bold;
    font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size: 1.3em;
}

a.topictitle, a.topictitle:link, a.topictitle:active {
    color: #002A46;    
    margin: 1px 0;
    font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 1.2em;
}

a.topictitle:visited, a.topictitle:hover {
    color: #005893;    
    margin: 1px 0;
    font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 1.2em;
}

th a, th a:visited {
    color: #FFFFFF !important;
    text-decoration: none;
}

th a:hover {
    text-decoration: underline;
}


/* Form Elements
 ------------ */
form {
    margin: 0;
    padding: 0;
    border: 0;
}

input {
    background-color: #FAFAFA;
    color: #000000;
    font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    padding: 1px;
    border: 1px solid #566877;
}

textarea {
    background-color: #FAFAFA;
    color: #000000;
    font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    font-size: 1.3em; 
    line-height: 1.4em;
    font-weight: normal;
    border: 1px solid #566877;
    padding: 2px;
}

select {
    color: #000000;
    background-color: #FAFAFA;
    font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    border: 1px solid #3A4955;
    padding: 1px;
}

option {
    padding: 0 1em 0 0;
}

option.disabled-option {
    color: graytext;
}

.rtl option {
    padding: 0 0 0 1em;
}

input.radio {
    margin-top: 2px;
    margin-left: 0px;
    margin-right: 0px;
    border: none;
    background-color: transparent;
}

.post {
    background-color: #FAFAFA;
    background-image: url('./images/bginput.gif');
    background-repeat: repeat-x;
    border-style: solid;
    border-width: 1px;
}

.btnbbcode {
    color: #000000;
    font-weight: normal;
    font-size: 1.1em;
    font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
    background-image: url("./images/bg_button.gif");
    background-repeat: repeat-x;
    background-position: -0px -0px;
    border: 1px solid #3A4955;
}

.btnbbcode:hover {
    color: #000000;
    font-weight: normal;
    font-size: 1.1em;
    font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
    background-image: url("./images/bg_button.gif");
    background-repeat: repeat-x;
    background-position: -0px -17px;
    border: 1px solid #3C7FB1;
}

.btnmain {
    color: #000000;
    font-weight: bold;
    background-image: url("./images/bg_button.gif");
    background-repeat: repeat-x;
    background-position: -0px -0px;
    border: 1px solid #3A4955;
    cursor: pointer;
    font-size: 1.1em;
}

.btnlite {
    color: #000000;
    font-weight: normal;
    background-image: url("./images/bg_button.gif");
    background-repeat: repeat-x;
    background-position: -0px -0px;
    border: 1px solid #3A4955;
    cursor: pointer;
    font-size: 1.1em;
}

.pmbutton  {
    overflow: visible;
}

.btnmain:hover {
    color: #000000;
    font-weight: bold;
    background-image: url("./images/bg_button.gif");
    background-repeat: repeat-x;
    background-position: -0px -17px;
    border: 1px solid #3C7FB1;
    cursor: pointer;
    font-size: 1.1em;
}

.btnlite:hover {
    color: #000000;
    font-weight: normal;
    background-image: url("./images/bg_button.gif");
    background-repeat: repeat-x;
    background-position: -0px -17px;
    border: 1px solid #3C7FB1;
    cursor: pointer;
    font-size: 1.1em;
}

.btnfile {
    font-weight: normal;
    background-color: #FFFFFF;
    border: 1px solid #3C7FB1;
    padding: 1px 5px;
    font-size: 1.1em;
}

.helpline {
    background-color: #E4F4FE;
    border-style: none;
}


/* BBCode
 ------------ */
.quotetitle {
    margin: 10px 5px 0 5px;
    padding: 1px 0px 1px 5px;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #A7BAC5;
    color: #000000;
    background-image: url('./images/rowh.gif');
    border-bottom: 1px solid #96D9F9;
    font-size: 0.85em;
    font-weight: bold;
}

.attachtitle {
    margin: 10px 5px 0 5px;
    padding: 4px;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #A7BAC5;
    color: #000000;
    background-color: #EFF9FE;
    font-size: 0.85em;
    font-weight: bold;
}

.quotetitle .quotetitle {
    font-size: 1em;
}

.quotecontent, .attachcontent {
    margin: 0 5px 10px 5px;
    padding: 1px 5px 1px 5px;
    border-color: #A7BAC5;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    font-weight: normal;
    font-size: 1em;
    line-height: 1.4em;
    font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
    background-color: #EFF9FE;
    color: #002A46;
}

.attachcontent {
    font-size: 0.85em;
}

.codetitle {
    margin: 10px 5px 0 5px;
    padding: 1px 0px 1px 5px;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #A7BAC5;
    color: #000000;
    background-image: url('./images/rowh.gif');
    border-bottom: 1px solid #96D9F9;
    font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    font-size: 0.8em;
}

.codecontent code {
   overflow: auto;
   display: block;
   height: auto;
   max-height: 200px;
   white-space: normal;
   margin: 0 5px 10px 5px;
   padding: 1px 5px 1px 5px;
   border-color: #A7BAC5;
   border-width: 0 1px 1px 1px;
   border-style: solid;
   font-weight: normal;
   color: #15A400;
   font-size: 0.85em;
   font-family: Monaco, 'Courier New', monospace;
   background-color: #EFF9FE;
}

.syntaxbg {
    color: #FFFFFF;
}

.syntaxcomment {
    color: #FF8000;
}

.syntaxdefault {
    color: #0000BB;
}

.syntaxhtml {
    color: #000000;
}

.syntaxkeyword {
    color: #007700;
}

.syntaxstring {
    color: #DD0000;
}


/* Private messages
 ------------------ */
.pm_marked_colour {
    background-color: #000000;
}

.pm_replied_colour {
    background-color: #A9B8C2;
}

.pm_friend_colour {
    background-color: #007700;
}

.pm_foe_colour {
    background-color: #DD0000;
}


/* Misc
 ------------ */
img {
    border: none;
}

.nb {
    border: none;
    background: none;
}

.sep {
    color: black;
    background-color: #FFA34F;
}

table.colortable td {
    padding: 0;
}

pre {
    font-size: 1.1em;
    font-family: Monaco, 'Courier New', monospace;
}

.nowrap {
    white-space: nowrap;
}

.username-coloured {
    font-weight: bold;
}

.buttons {
    float: left;
    width: auto;
    height: auto;
}

/* Rollover state */
.buttons div {
    float: left;
    margin: 0 5px 0 0;
    background-position: 0 100%;
}

/* Rolloff state */
.buttons div a {
    display: block;
    width: 100%;
    height: 100%;
    background-position: 0 0;
    position: relative;
    overflow: hidden;
}

.profile-icons {
    float: right;
    width: auto;
    height: auto;
}

/* Rollover state */
.profile-icons div {
    float: right;
    margin: 0 0 5px 5px;
    background-position: 0 100%;
}

/* Rolloff state */
.profile-icons div a {
    display: block;
    width: 100%;
    height: 100%;
    background-position: 0 0;
    position: relative;
    overflow: hidden;
}

.review-icons {
    float: right;
    width: auto;
    height: auto;
}

/* Rollover state */
.review-icons div {
    float: right;
    margin: 5px 5px 5px 0;
    background-position: 0 100%;
}

/* Rolloff state */
.review-icons div a {
    display: block;
    width: 100%;
    height: 100%;
    background-position: 0 0;
    overflow: hidden;
}

/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
/*.buttons div span        { display: none; }*/
/*.buttons div a:hover    { background-image: none; }*/
.buttons div span            { position: absolute; width: 100%; height: 100%; cursor: pointer;}
.buttons div a:hover span    { background-position: 0 100%; }

/* Big button images */
.reply-icon span, .post-icon span, .locked-icon span    { background: transparent none 0 0 no-repeat; }
.pmreply-icon span, .newpm-icon span, .forwardpm-icon span    { background: none 0 0 no-repeat; }

/* Set big button dimensions */
.buttons div.reply-icon, .buttons div.post-icon, .buttons div.locked-icon, .buttons div.pmreply-icon, .buttons div.newpm-icon, .buttons div.forwardpm-icon        { width: 91px; height: 30px; }

/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
.profile-icons span { display:none; }
.profile-icons a:hover { background: none; }
.review-icons span { display:none; }
.review-icons a:hover { background: none; }

/* Profile & navigation icons */
.quote-icon, .quote-icon a, .report-icon, .report-icon a, .warn-icon, .warn-icon a, .edit-icon, .edit-icon a, .delete-icon, .delete-icon a, .info-icon, .info-icon a    { background: none top left no-repeat; }

/* Set profile icon dimensions */
.profile-icons div.quote-icon, .review-icons div.quote-icon    { width: 43px; height: 18px; }
.profile-icons div.report-icon, .profile-icons div.info-icon, .profile-icons div.warn-icon    { width: 19px; height: 18px; }
.profile-icons div.edit-icon, .review-icons div.edit-icon    { width: 34px; height: 18px; }
.profile-icons div.delete-icon, .review-icons div.delete-icon    { width: 17px; height: 18px; }

.reply-icon span    { background-image: url("{T_IMAGESET_LANG_PATH}/button_topic_reply.png"); }
.post-icon span        { background-image: url("{T_IMAGESET_LANG_PATH}/button_topic_new.png"); }
.locked-icon span    { background-image: url("{T_IMAGESET_LANG_PATH}/button_topic_locked.png"); }
.pmreply-icon span    { background-image: url("{T_IMAGESET_LANG_PATH}/button_pm_reply.png"); }
.newpm-icon span     { background-image: url("{T_IMAGESET_LANG_PATH}/button_pm_new.png"); }
.forwardpm-icon span    { background-image: url("{T_IMAGESET_LANG_PATH}/button_pm_forward.png"); }

/* Profile & navigation icons */
.quote-icon, .quote-icon a        { background-image: url("{T_IMAGESET_LANG_PATH}/icon_post_quote.png"); }

/* Moderator icons */
.report-icon, .report-icon a        { background-image: url("{T_IMAGESET_LANG_PATH}/icon_post_report.png"); }
.edit-icon, .edit-icon a            { background-image: url("{T_IMAGESET_LANG_PATH}/icon_post_edit.png"); }
.delete-icon, .delete-icon a        { background-image: url("{T_IMAGESET_LANG_PATH}/icon_post_delete.png"); }
.info-icon, .info-icon a            { background-image: url("{T_IMAGESET_LANG_PATH}/icon_post_info.png"); }
.warn-icon, .warn-icon a            { background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_warn.png"); }

es geht un dem header :

kann ich da irgendwas machen an der mb größe ?

sokie · 30.06.2009

AW: 2Mb Header für ein Forum?

das kannst du allerdings. Gif ist das ungeeignetse Format zur Darstellung von Bildern(Fotos) mit vielen Farben und Farbverläufen.
erstelle die einfachen Bilder als normale jpgs und animier die Sache mit flash oder Javascript,und du wirst sehen, dass das ganze nur max 200k braucht.
was darüber hinaus geht, ist kein header, sondern ein Download.

PS:Bitte die Edit-funktion benutzen um Doppelposts zu vermeinden.

big_B · 30.06.2009

AW: 2Mb Header für ein Forum?

...ich weiss nicht ob es dir hilft, aber ich hab deinen header grade mal zu ner flash-animation gewandelt und da ist das teil gerade noch 290k gross.

Grusz
bodo

7Quaresma90 · 30.06.2009

AW: 2Mb Header für ein Forum?

big_B schrieb:
...ich weiss nicht ob es dir hilft, aber ich hab deinen header grade mal zu ner flash-animation gewandelt und da ist das teil gerade noch 290k gross.

Grusz
bodo

super,danke. werd das gleich mal versuchen. wird dabei die qualität schlechter meines headers?achja und kann jemand meine zweite frage beantworten?
Edit:
Hab es jetzt in swf umgewandelt , hochgeladen und in der overall_header angepasst.Allerdings scheint es jetzt zu problemen zu kommen. mein header wird nicht mehr angezeigt. Muss ich vll den header etwas umbauen weil es jetzt swf und nicht mehr gif ist ?
Hier der wichtigste teil aus der overall_Header :

HTML:

<a name="top"></a>

<table class="wrap" width="100%" cellpadding="0" cellspacing="0">
<tr><td>

    <div id="datebar">
  <div id="wrapheader">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
<td width="1200" height="157" align="right" valign="center" style="background:url('{T_THEME_PATH}/images/KBHeader46165.swf');">
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div class="midlink">
<div id="search-box">
<form action="{U_SEARCH}" method="post" id="search">
<fieldset class="nb">
<input name="keywords" style="opacity:0.8;filter:alpha(opacity=80)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" type="text" class="inputbox search" id="keywords" title="{L_SEARCH_KEYWORDS}" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" maxlength="50" />
<input class="nb" name="submit" type="image" src="{T_THEME_PATH}/images/search.png" align="absmiddle" /><br />
<a class="genmedw" href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
</div>
<!-- ENDIF -->
</td>
  </tr>
</table>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
<td height="24" align="left" style="background:url('{T_THEME_PATH}/images/bottomm.png');">

<div class="buttonwrapper">
<div class="navspacel"></div>
<!-- IF S_USER_LOGGED_IN -->
<!-- ELSEIF S_REGISTER_ENABLED -->
<a class="squarebuttonl" href="{U_REGISTER}"><span>{L_REGISTER}</span></a><div class="navspacel"></div>
<!-- ENDIF -->
<!-- IF S_USER_LOGGED_IN -->
<a class="squarebuttonl" href="{U_PROFILE}"><span>{L_PROFILE}</span></a><div class="navspacel"></div>
<!-- IF S_DISPLAY_PM -->
<a class="squarebuttonl" href="{U_PRIVATEMSGS}"><span>{PRIVATE_MESSAGE_INFO}</span></a><div class="navspacel"></div>
<!-- ENDIF -->
<!-- ENDIF -->
<!-- IF U_RESTORE_PERMISSIONS -->
<a class="squarebuttonl" href="{U_RESTORE_PERMISSIONS}"><span>{L_RESTORE_PERMISSIONS}</span></a>
<!-- ENDIF -->
</div>

</td>
<td width="431" height="24" align="right" style="background:url('{T_THEME_PATH}/images/bottomr.png');">

<div class="buttonwrapper">
<div class="navspacer"></div>

kann mir bitte jemand helfen. style="background:url('{T_THEME_PATH}/images/KBHeader46165.swf , dass ist der header.

sokie · 30.06.2009

AW: 2Mb Header für ein Forum?

Die andere Frage lässt sich nicht beantworten, ohne dein html für den Bereich zu kennen.Grundsetzlich lässtsich das natürlich über die Class oder ID des Containers erreichen und formatieren, die css Eigenschaft ist 'color'.
Also einfach malselber in den Quelltext schauen, welche ID oder Class der Beriech hat in dem der Text steht.

7Quaresma90 · 30.06.2009

AW: 2Mb Header für ein Forum?

hmm das mit der ID ist zu kompliziert ...

.
und wieso wird mein header jetzt nicht mehr angezeigt ? hab in overal_header einfach statt gif , swf hingeschrieben und natürlich vorher hochgeladen ... .

TheDon0Ne · 30.06.2009

AW: 2Mb Header für ein Forum?

de header bindest du so ein

Code:

<object data="[COLOR=Red]name[/COLOR].swf" type="application/x-shockwave-flash" width="1200" height="157">
  <param name="movie" value="[COLOR=Red]name[/COLOR].swf">
  <param name="quality" value="high">
  <param name="scale" value="exactfit">
  <param name="menu" value="false">
</object>

das sollte direct vor


die frage ist ob diese nachfolgende suchfunktion über dem header liegt
diese wäre dann nicht mehr sichtbar weil das flash objekt da drüber liegt

7Quaresma90 · 30.06.2009

AW: 2Mb Header für ein Forum?

danke , wird aber leider immer noch nicht angezeigt . so sieht es aus :

HTML:

    <div id="datebar">
  <div id="wrapheader">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
<td width="1200" height="157" align="right" valign="center" style="background:url('{T_THEME_PATH}/images/KBHeader46165.swf');">
<object data="name.swf" type="application/x-shockwave-flash" width="1200" height="157">
  <param name="movie" value="name.swf">
  <param name="quality" value="high">
  <param name="scale" value="exactfit">
  <param name="menu" value="false">
</object>
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div class="midlink">

Edit:
ok es hat geklappt!
Aber irgendwie klappt das mit dem umwandeln von gif auf swf nicht. Alles ist total schnell , schlechte grafiken , kein transparent ... .

heyman200 · 30.06.2009

AW: 2Mb Header für ein Forum?

also würde das definitiv versuchen zu komprimieren. Sonst dauert es bei den meisten immer ewig es anzuzeigen und belastet die Badbreite unnötig

7Quaresma90 · 30.06.2009

AW: 2Mb Header für ein Forum?

ja stimmt. aber wie ? kann ich das in photoshop nicht irgendwie mit swf abspeichern? mit dem programm wo der user mit hier gegeben hat , scheint das nicht zu klappen. die verzögerungen sind nicht da, nicht tranparent ... .

sokie · 30.06.2009

AW: 2Mb Header für ein Forum?

7Quaresma90 schrieb:

danke , wird aber leider immer noch nicht angezeigt . so sieht es aus :

HTML:

    <div id="datebar">
  <div id="wrapheader">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
<td width="1200" height="157" align="right" valign="center" style="background:url('{T_THEME_PATH}/images/KBHeader46165.swf');">
<object data="name.swf" type="application/x-shockwave-flash" width="1200" height="157">
  <param name="movie" value="name.swf">
... .

du solltest name.swf durch den tatsächlichen Dateinamen ersetzen. der heisst ja bei dir sowas wie : KBHeader46165.swf

7Quaresma90 · 30.06.2009

AW: 2Mb Header für ein Forum?

ja danke das hab ich aber auch schon gemerkt

. wie gesagt , der umgewandelte gif header in swf funktioniert nicht. die eingestellten verzögerungen in photoshop funktionen nicht mehr , kein trasparenten hintergrund , grafiken schlecht .

TheDon0Ne · 30.06.2009

AW: 2Mb Header für ein Forum?

du solltest wenn dann den header neu in flash aufbauen

ich mag diese ganzen umwandler und converter und wie sich alle schimpfen auch nicht ... resultate sind meistens schlecht

wenn du eine komplete cs besitzt solltest du dort auch nach einem program zum erstellen für flash animationen fündig werden

Silvio · 30.06.2009

AW: 2Mb Header für ein Forum?

TheDon0Ne schrieb:
du solltest wenn dann den header neu in flash aufbauen

ich mag diese ganzen umwandler und converter und wie sich alle schimpfen auch nicht ... resultate sind meistens schlecht

wenn du eine komplete cs besitzt solltest du dort auch nach einem program zum erstellen für flash animationen fündig werden

Da stimm ich voll zu, bau einfach das ganze nochmal in Flash nach, lege Deine bewegungstweens rein und fertig ist die Sache...und mehr als 400 KB dürfte der Header dann nicht haben. Flash schreibt Dir auch noch eine HTML-Datei, vond er Du dann einfach die Inhalte aus dem Quelltext für Deine seite kopieren kannst.

7Quaresma90 · 01.07.2009

AW: 2Mb Header für ein Forum?

ich hab adobe illustrator. damit müsste das doch auch gehen oder ? kann mir jemand mal ne kleine anleitung schreiben ?ich hab in dem programm unter "hilfe" schon alles unter swf flash animationen durchgelesen aber komm nicht weiter , bzw. weis trotzdem nichtmal wie ich anfangen soll ... .

7Quaresma90 · 06.07.2009

AW: 2Mb Header für ein Forum?

kann mir keiner helfen??

Ronja6 · 07.07.2009

AW: 2Mb Header für ein Forum?

Hi,

ich fürchte Du wirst Dich ingesamt mal ein bisschen mehr mit dem Thema auseinander setzen müssen, wenn du sowas "basteln" willst.
Für die Erstellung einer Flash-Datei brauchst du z.b. Adobe Flash. Das gibt es auch relativ günstig in alten Macromedia-Versionen zu erstehen, die sind für das was du machen willst, genau so gut.

LG Ronja