xa-media.com | Support Forum

[Fliegzeuger]

Hallo, Ihr...

Eure Hilfe ist hier wirklich top. Möchte auch nicht wirklich nerven... aber ich bin derzeit dran, bzw. ich möchte ein wenig das Aussehen des Forums verändern, etwas personalisieren... Ich habe nun ein Problem, daß für den einen oder einen wohl keins ist, aber meines ist das Problem, daß ich kein Englisch kann.

Daher habe ich eine Bitte. Vielleicht hat ja mal jemand Lust und Zeit, mir hierbei zu helfen. Der Code für den Theme Subsilver2 ist jener hier: Ich würde nun gern wissen, was sich hinter jedem Absatz verbirgt, welche Veränderung ich also bewirken würden. habe zwar schon bissl getestet, aber bis auf den eigentlichen Hintergrund konnte ich noch nicht viel verändern. Wäre jemand bereit, mir zwischen jedem Absatz eine kleine Erklärung über die Auswirkung einer Veränderung einzufügen...? Am besten in andere Farbschrift!

Ich weiß, daß dies sehr aufwendig ist, vielleicht ist es auch zu viel verlangt, aber vielleicht macht dies ja auch jemandem Spaß. Würde mich sehr freuen. Ein klein wenig HTML-Kenntnisse habe ich zwar, die bringen mich hier aber nicht weiter!

Im Voraus schon mal vielen Dank!

Code: Alles auswählen

/*  phpBB 3.0 Style Sheet
    --------------------------------------------------------------
   Style name:      subsilver2
   Based on style:   subSilver (the default phpBB 2 style)
   Original author:   subBlue ( http://www.subBlue.com/ )
   Modified by:      psoTFX and the phpBB team ( http://www.phpbb.com )
   
   This is an alternative style for phpBB3 for those wishing to stay with
   the familiar subSilver style of phpBB version 2.x
   
   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%;
}

body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: Verdana, Helvetica, Arial, "Lucida Grande", tahoma;
   color: #000033;
   background-color: #CCCCCC;
   font-size: 67.5%; /* This sets the default font size to be equivalent to 10px */
   margin: 0;
}

#wrapheader {
   min-height: 120px;
   height: auto !important;
   height: 120px;
/*   background-image: url('styles/subsilver2/theme/images/background.gif');
   background-repeat: repeat-x;*/
/*   padding: 0 25px 15px 25px;*/
   padding: 0;
}

#wrapcentre {
   margin: 15px 25px 0 25px;
}

#wrapfooter {
   text-align: center;
   clear: both;
}

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

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

#menubar {
   margin: 0 25px;
}

#datebar {
   margin: 10px 25px 0 25px;
}

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

.forumrules {
   background-color: #F9CC79;
   border-width: 1px;
   border-style: solid;
   border-color: #BB9860;
   padding: 4px;
   font-weight: normal;
   font-size: 1.1em;
   font-family: Verdana, Helvetica, Arial, "Lucida Grande", sans-serif;
}

.forumrules h3 {
   color: red;
}

#pageheader { }
#pagecontent { }
#pagefooter { }

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


/*  Text
 --------------------- */
h1 {
   color: black;
   font-family: Verdana, "Lucida Grande", "Tahoma", sans-serif;
   font-weight: bold;
   font-size: 1.8em;
   text-decoration: none;
}

h2 {
   font-family: Verdana, Helvetica, Arial, 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: Verdana, Helvetica, Arial, sans-serif;
   line-height: 120%;
}

h4 {
   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;
   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 {
   padding: 2px 0;
   white-space: nowrap;
}

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

.rtl p.searchbarreg {
   float: left;
}

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

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;
}

.postbody {
   font-size: 1.3em;
   line-height: 1.4em;
   font-family: Verdana, Helvetica, Arial, "Lucida Grande", "Trebuchet MS", 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;
}

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

.cattitle {

}

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

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

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

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

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

.error {
   color: red;
}


/* Tables
 ------------ */
th {
   color: #FFA34F;
   font-size: 1.1em;
   font-weight: bold;
   background-color: #006699;
   background-image: url('styles/subsilver2/theme/images/cellpic3.gif');
   white-space: nowrap;
   padding: 7px 5px;
}

td {
   padding: 2px;
}
td.profile {
   padding: 4px;
}

.tablebg {
   background-color: #A9B8C2;
}

.catdiv {
   height: 28px;
   margin: 0;
   padding: 0;
   border: 0;
   background: white url('styles/subsilver2/theme/images/cellpic2.jpg') repeat-y scroll top left;
}
.rtl .catdiv {
   background: white url('styles/subsilver2/theme/images/cellpic2_rtl.jpg') repeat-y scroll top right;
}

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

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

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

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

.spacer {
   background-color: #D1D7DC;
}

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

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

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

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

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

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

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

a.topictitle:visited {
   color: #5493B4;
   text-decoration: none;
}

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

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


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

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

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

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

option {
   padding: 0 1em 0 0;
}

option.disabled-option {
   color: graytext;
}

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

input.radio {
   border: none;
   background-color: transparent;
}

.post {
   background-color: white;
   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-color: #EFEFEF;
   border: 1px solid #666666;
}

.btnmain {
   font-weight: bold;
   background-color: #ECECEC;
   border: 1px solid #A9B8C2;
   cursor: pointer;
   padding: 1px 5px;
   font-size: 1.1em;
}

.btnlite {
   font-weight: normal;
   background-color: #ECECEC;
   border: 1px solid #A9B8C2;
   cursor: pointer;
   padding: 1px 5px;
   font-size: 1.1em;
}

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

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


/* BBCode
 ------------ */
.quotetitle, .attachtitle {
   margin: 10px 5px 0 5px;
   padding: 4px;
   border-width: 1px 1px 0 1px;
   border-style: solid;
   border-color: #A9B8C2;
   color: #333333;
   background-color: #A9B8C2;
   font-size: 0.85em;
   font-weight: bold;
}

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

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

.attachcontent {
   font-size: 0.85em;
}

.codetitle {
   margin: 10px 5px 0 5px;
   padding: 2px 4px;
   border-width: 1px 1px 0 1px;
   border-style: solid;
   border-color: #A9B8C2;
   color: #333333;
   background-color: #A9B8C2;
   font-family: Verdana, Helvetica, Arial, "Lucida Grande", sans-serif;
   font-size: 0.8em;
}

.codecontent {
   direction: ltr;
   margin: 0 5px 10px 5px;
   padding: 5px;
   border-color: #A9B8C2;
   border-width: 0 1px 1px 1px;
   border-style: solid;
   font-weight: normal;
   color: #006600;
   font-size: 0.85em;
   font-family: Monaco, 'Courier New', monospace;
   background-color: #FAFAFA;
}

.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;
}

.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;
}

[friendly]

Ich glaube, ich hab mittlerweile alle Themes durch, aber das ist mir eine Nummer zu anstrengend!
Wenn du konkrete Fragen stellst, dann werd ich gerne versuchen, die zu beantworten.

[Fliegzeuger]

Ja, kann ich verstehen...

Zunächst würde ich gerne den Kalender farblich verändern. Ich habe über dem gesamten Forum die Wochenansicht. Diese soll sich farblich stärker hervorheben, denn momentan geht sie farblich unter...jetzt ist alles Ton in Ton. Also nicht auffällig.

Dann würde ich gerne einen weiblichen Touch rein bekommen... andere Schriftarten, generell eine andere Farbe...nein, kein rosa... Das fällt mir so auf Anhieb ein..

[friendly]

Füg mal beim Style (NWO-red, oder?) diesen Code ganz unten rein:

Code: Alles auswählen

    /* -------------------------
       calendar mod additions...
       ------------------------- */

    .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;
    }

    /* 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%; }   
       
       
    /* The following are part of the calendar mod.
       They follow the same format as the reply-icon, post-icon, locked-icon, pmreply-icon, newpm-icon, and forwardpm-icon.
       If you are trying to implement a style other then prosilver, look at how your existing style defines
       those icons, and do the same for the new calendar icons.
    */
    .calendar-new-icon span    { background: transparent none 0 0 no-repeat; }
    .calendar-day-icon span    { background: transparent none 0 0 no-repeat; }
    .calendar-week-icon span   { background: transparent none 0 0 no-repeat; }
    .calendar-month-icon span  { background: transparent none 0 0 no-repeat; }

    /* The following are part of the calendar mod.
       They follow the same format as the reply-icon, post-icon, locked-icon, pmreply-icon, newpm-icon, and forwardpm-icon.
       If you are trying to implement a style other then prosilver, look at how your existing style defines
       those icons, and do the same for the new calendar icons.
       
       Note the "text-align: left" was added because there were a few instances where the icons were cut in half...
       adding the text align property helps reserve enough space to fully display the icon.
    */
    .buttons div.calendar-new-icon   { width: {IMG_BUTTON_CALENDAR_NEW_WIDTH}px; height: {IMG_BUTTON_CALENDAR_NEW_HEIGHT}px; text-align: left; }
    .buttons div.calendar-day-icon   { width: {IMG_BUTTON_CALENDAR_DAY_WIDTH}px; height: {IMG_BUTTON_CALENDAR_DAY_HEIGHT}px; text-align: left; }
    .buttons div.calendar-week-icon   { width: {IMG_BUTTON_CALENDAR_WEEK_WIDTH}px; height: {IMG_BUTTON_CALENDAR_WEEK_HEIGHT}px; text-align: left; }
    .buttons div.calendar-month-icon   { width: {IMG_BUTTON_CALENDAR_MONTH_WIDTH}px; height: {IMG_BUTTON_CALENDAR_MONTH_HEIGHT}px; text-align: left; }

       
    /* uses border-top-color = .bg3 background-color
    (the line between events in the month display) */
    hr.hrCal {
       border-top-color: #cadceb;
    }

    /* uses color from h1
       (calendar header previous and next links) */
    .calH1 {
       color: #000000;
       font-weight: bold;
       font-size:200%
    }

    /* The from and to times take up a lot of
      space in the calendar display.
      Use this to shrink them */
    .smCalText{font-size:85%}

    /* bg4 is just slightly darker then bg3
      days of the week name headers
      (used in calendar headers) */
    .bg4   {    height: 28px;
       margin: 0;
       padding: 0;
       border: 0;
       background-color: #C7D0D7;
       background-image: url('styles/subsilver2/theme/images/cellpic1.gif');
       text-indent: 4px; }

    /* uses background-color of .bg3
       this is "normal" day header color
        (used to display the numbers and icons for
        each day in the month and week view displays ) */
    table tbody td.bg3_calMonH{
       background-color: #DCE1E5;
       font-size:85%
    }

    /* uses background-color of .bg4
       this is "today/selected" header color
        (used to display the numbers and icons for
        each day in the month and week view displays ) */
    table tbody td.bg4_calMonH{
       background-color: #C0C8D0;
       font-size:85%
    }

    /* uses background-color of .bg1
       these are "normal" days
       (used to display days in calendar month/week view) */
    table.table1 tbody td.bg1_calMon {
       background-color: #ECECEC;
       padding-top: 2px;
       padding-bottom: 5px;
       padding-left: 4px;
       padding-right: 4px;
    }
    /* uses background-color of .bg2
       this is "current/slected" day
       (used to display days in calendar month/week view) */
    table.table1 tbody td.bg2_calMon {
       background-color: #DCE1E5;
       padding-top: 2px;
       padding-bottom: 5px;
       padding-left: 4px;
       padding-right: 4px;
    }
    /* uses background-color of .bg3
       these are "dummy" days
       (used to display days in calendar month/week view) */
    table.table1 tbody td.bg3_calMon {
       background-color: #f2f2f2;
       padding-top: 2px;
       padding-bottom: 5px;
       padding-left: 4px;
       padding-right: 4px;
    }


    /* uses background-color of .bg1
       uses border-top-color = .forumbg background-color
       (used to display events in calendar day view) */
    table.table1 tbody td.bg1_calDay {
       background-color: #DCE1E5;
       border-top-color: #C0C8D0;
       padding-top: 10px;
       padding-bottom: 10px;
       padding-left: 3px;
       padding-right: 3px;
    }

    /* uses background-color of .bg3
       uses border-top-color = .forumbg background-color
       (used to display negative space in calendar day view) */
    table.table1 tbody td.bg3_calDay {
       background-color: #f2f2f2;
       border-top-color: #C0C8D0;
    }

    /* The following are part of the calendar mod.
       They follow the same format as the reply-icon, post-icon, locked-icon, pmreply-icon, newpm-icon, and forwardpm-icon.
       If you are trying to implement a style other then prosilver, look at how your existing style defines
       those icons, and do the same for the new calendar icons.
    */
    .calendar-new-icon span    { background-image: url("{IMG_BUTTON_CALENDAR_NEW_SRC}") ;}
    .calendar-day-icon span     { background-image: url("{IMG_BUTTON_CALENDAR_DAY_SRC}") ;}
    .calendar-week-icon span    { background-image: url("{IMG_BUTTON_CALENDAR_WEEK_SRC}") ;}
    .calendar-month-icon span   { background-image: url("{IMG_BUTTON_CALENDAR_MONTH_SRC}") ;}

    /* -------------------------
       calendar mod end
       ------------------------- */

Mit ein paar Englisch- und HTML-Kenntnissen kannst du da schon ein bißchen was machen, denke ich!
Ein bißchen heller ist der Kalender damit auch so schon!

[Fliegzeuger]

@friendly: mein Englisch ist wirklich kaum brauchbar. Ich muß sehr viel den Translator nutzen, was bei solchen Dingen oft wirklich nicht hilfreich ist.

Danke für Deine Hilfe. Habe den Code ganz unten eingefügt... bei NWO-red sieht man kaum einen Unterschied. Kann ich den auch für Subsilver2 anwenden? Ist doch eher der meist eingestellte Style. Darf mich ja nicht allein nach mir richten.

Für diesen Code NWO-red würde ich gerne noch mehr verändern. Wenn man ein Zitat im Beitrag hat, sieht man Dieses kaum. Hätte da auch gerne eine farbliche Veränderung, also mehr hervorheben, daß man sieht, daß da auch ein Zitat im Beitrag ist.

[friendly]

Code: Alles auswählen

.quotecontent, .attachcontent {
   margin: 0 5px 10px 5px;
   padding: 5px;
   border-color: #1A1A1A;
   border-width: 1px 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: #000000;
   color: #DDDDDD;
}

müsste hier entweder die letzte oder die vorletzte Zeile sein (die Zitatbox)

[Fliegzeuger]

@Friendly:

Ähm... für was ist das jetzt? Hatte ja zwei Anliegen geschildert!

[friendly]

Für die Zitate!

Den Code für den Kalender kannst du natürlich auch in subsilver2 packen.

[Fliegzeuger]

Für die Zitate!

Den Code für den Kalender kannst du natürlich auch in subsilver2 packen.

Irgendwie steh ich grad auf dem Schlauch... Der eben genannte Code soll was tun? Und wo genau füge ich den ein? Nicht böse sein, aber irgendwie ist es vielleicht für mich hilfreicher, etwas detaillierte zu schreiben.

[friendly]

Du suchst im Theme diese Stelle:

Code: Alles auswählen

.quotecontent, .attachcontent {
   margin: 0 5px 10px 5px;
   padding: 5px;
   border-color: #1A1A1A;
   border-width: 1px 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: #000000;
   color: #DDDDDD;
}

Musst du also nicht einfügen, das steht da schon drin!
Und dann den Farbcode in der letzten/vorletzten Zeile ändern.