Melmac hat geschrieben:Hallo Lukardo,
hast Du Deine Anpassungen ausschließlich in der_custom_configuration.scss
vorgenommen?
Wenn ja, dann gibt bitte ihren jetzigen Inhalt in der Pastebin ein oder füge dirt die komplette Datei ein und verlinke das dann hier, damit ich ihn mir mal anschauen kann - es hängt bei diesen Style auch etwas davon ab, was wo geändert und wie es gemacht wurde![]()
Vielleicht kurz eine Info zum Unterschied in der Funktion zwischen der_custom_configuration.scss
und der_custom.scss
, am besten vielleicht am Beispiel der Farbgebung:
Es sind aktuell 4 Farbschemata vorbereitet, für die jeweis ein "Basisfarbwert" vorgegeben ist: für das Schema "blue" wäre dies zum Beispiel der Farbcode#0B2958
.
Dieser Basiswert wird dann einer Variablen (hier:$col_base
) zugewisen, die dann als "Ausgangswert" diverser Berechnungen genommen wird, in denen die weiteren Farbwerte ermittelt werden, die innerhalb eines Schemas für die einzelnen Elemente zum Einsatz kommen sollen.
Es werden dabei auch keine "fixen" Farbcodes ausgeworfen, sondern die so berechneten Werte weiteren, sekundären, Variablen zugewiesen. Erst diese werden dann im eigentlichen CSS anstelle fester Farbcodes eingesetzt und beim Kompilieren durch den berechneten Farbcode ersetzt.
Alle im CSS des Styles verwendeten Variablen und SASS-Funktionen, die grundlegenden Berechnungen vornehmen, sind in der_style_configuration.scss
angelegt und definiert. Diese Datei stellt somit eine Art "funktionale Steuerzentrale" dar, weswegen an ihr auch nichts geändert werden sollte.
Um jetzt die Vorgabewerte der Basisvariablen anzupassen (Bsp.: um auf das Schema "red" umzuschalten), ohne in die_style_configuration.scss
einzugreifen => hierfür ist die Datei_custom_configuration.scss
vorgesehen.
Du fügst dort bei Bedarf, wie in den bereits enthaltenen Beispieldaten angezeigt, die für die jeweilige Variable alternativ vorgesehenen optionalen Werte ein.
Hier also: stattblue
dannred
.
Dies sorgt jetzt dafür, dass in den Berechnungsfunktionen für die sekundären Farbwerte der Farbcode für "red" (#48100C) als Ausgangswert verwendet wird statt, wie bisher der für "blue".
Solltest Du eigene SASS-Funktionen erstellen woillen, also welche, die bisher noch nicht im Style vorhanden sind, dann machst Du dies ebenfalls in dieser Datei.
Der Hintergrund für diese, auf den ersten Blick vielleicht umständlich aussehende, Vorgangsweise ist, dass somit eine klare, auf Dateiebene stattfindende Trennung zwischen "Basiscode" des Styles und den eigenen Codeanpassungen gewährleistet wird.
Wenn Du jetzt aber gezielt einzelne Klassen des CSS oder bei einzelne Klassen die Werte bestimmter Eigenschaften anpassen willst (= die vorgegebenen oder berechneten Werte überschreiben), dann machst Du dies in der_custom.scss
.
Es ist das gleiche Vorgehen wie in anderen, "klassisch" aufgebauten Styles auch, nur eben in einer gesonderten Datei, die explizit hierfür vorgesehen ist.
[Da somit alle eigenen = "custom" CSS-Anpassungen in zwei_custom*.scss
Dateien zusammengefasst sind, reicht es, diese bei einem Styleupdate nicht zu überschreiben, um alle diese eigenen Anpassungen zu erhalten - es entfällt also das manuelle Nachtragen der eigenen Änderungen]
-----------------
@Joyce&LunaStimmt, er ist ja auch noch nicht fertig entwickelt: einige Features fehlen noch, andere sind zwar in den Grundzügen fertig, müssen aber noch "feingetunt" werden - und andere können sich nochmals ändern.Joyce&Luna hat geschrieben:Dies ist eine Alpha Version
Die Sache mit den Farbschemata funktioniert, nur die Ausarbeitung ins Detail hat noch nicht stattgefunden: es fehlen noch diverse Berechnungen für weitere sekundäre Variablen.
Momentan bin ich auch am überlegen, dieses Konzept nochmals zu überarbeiten, um es schlanker zu machen.
Auf eigene Anpassungen dürfte dies aber kaum Auswirkungen haben, da die anpassbaren Basisvariablen erhalten bleiben werden.
Dies würde ich jetzt aber anders formulieren: da er sich noch in Entwicklung befindet und sich noch einiges ändern kann, da noch Features fehlen bzw. einige noch nicht vollständig (= "final") umgesetzt sind, kann das natürlich optische Auswirkungen beim Einsatz in einem Live-Board haben, wenn eine neue Revision aufgespielt wird.Joyce&Luna hat geschrieben:und so noch gar nicht für das Liveboard zu gebrauchen.
Dessen sollte man sich dann auch bewusst sein - nur: "nicht zu gebrauchen" passt da nicht so richtig. Er ist "nicht zu empfehlen", wenn man nach einem Style sucht, an dem man, einmal auf die eigenen Bedürfnisse angepasst, keine Änderungen mehr vornehmen will und der "fertig" und ohne Ecken und Kanten ist.
Was aber bei jedem Style der Fall ist, auch validierten.Joyce&Luna hat geschrieben:Da muss du entweder selber Hand anlegen oder halt warten bis Melmac soweit ist.
Es bist ja auch nicht Du, der im Ernstfall den Support leisten muss; und was ein "Fass ohne Boden" ist, darfst Du daher ruhig mir selbst überlassenJoyce&Luna hat geschrieben:Jetzt speziell hier für jeden einzelnen zu diesem Style Support zu leisten, wäre ein Fass ohne Boden.![]()
Was wäre, wenn ich dies als Chance sehe, hier feed back zu erhalten, auf Fehler, Ungereimtheiten oder nicht berücksichtigte Funktionen hingewiesen zu werden?
Der Style ist noch in Entwicklung, stimmt, mit Sicherheit auch nicht fehlerfrei und in einigen Bereichen noch "lückenhaft umgesetzt" - aber gerade deswegen ist es absolut okay, sogar wichtig (!), dass hier solche Fragen gestellt werden!
Ich mache dies hier ja nicht, um mich irgendwie als toll bestätigt zu sehen: letztendlich, neben dem Lerneffekt, der dabei auch für mich anfällt, soll es ein Style werden, der ein paar Möglichkeiten mehr bietet und dennoch in grundlegenden Dingen, die immer wieder nachgefragt werden, im Rahmen des sinnvoll machbaren möglichst einfach anzupassen ist.
Dazu braucht es aber die Perspektive des Anwenders, der letztendlich mit diesem Style arbeiten will/muss: ich bin jedem dankbar, der ihn testet und mir feed back gibt.
Hi,
danke für die Antwort: Hier mal meine _custom_configuration:
Code: Alles auswählen
/* Custom configuration file
* -------------------------------------------------------------------- */
$switch-width-wrap: 1152px; // "Board width" - any value is okay as longs as the unit is "px"
$switch-col-scheme: red; // Board colour scheme; available schemes: blue, red, green, black
$define-postprofile-side: left; // postprofile right or left
$width-postprofile: 240px; // Maximum width of pstprofile at resolutions of 1100px and above
$switch-col-wrap-off: yes; // Set value to "yes" if you want to switch background colour of #wrap to transparent
$switch-opacity-wrap: 0.6;
// The following variables control the display of background images in "html, body", "wrap-header" and "headerbar"
// Default values are "none" - all images have to be stored in the theme's image folder
// NOTE: To allocate a image replace "none" with the complete image name wrapped in single quotes - eg: 'my_background_image.png'
// $img-bg-html-body: 'bg_body.jpg';
// $img-bg-headerbar: none;
Code: Alles auswählen
/* phpBB3 Style Sheet
--------------------------------------------------------------
Style name: SassySilver
Based on style: prosilver (the default phpBB 3.1.x style)
Original author: Tom Beddard ( http://www.subblue.com/ )
Modified by: Melmac
--------------------------------------------------------------
*/
/* Custom configuration file
* -------------------------------------------------------------------- */
/* --------------------------------------------------------------------
* Central configuration file - DO NOT CHANGE !
* Copy the code you want to change and paste it into _custom_configurations.scss
* and do your edits there.
* -------------------------------------------------------------------- */
@import url("../../prosilver/theme/stylesheet.css");
@media (max-width: 325px) {
.wrap-headerbar .extra-wrapper-width, .wrap-menue .extra-wrapper-width {
max-width: 310px !important; } }
@media (max-width: 485px) {
.wrap-headerbar .extra-wrapper-width, .wrap-menue .extra-wrapper-width {
max-width: 470px !important; } }
@media (max-width: 605px) {
.wrap-headerbar .extra-wrapper-width, .wrap-menue .extra-wrapper-width {
max-width: 590px !important; } }
@media (max-width: 770px) {
.wrap-headerbar .extra-wrapper-width, .wrap-menue .extra-wrapper-width {
max-width: 758px !important; } }
@media (max-width: 805px) {
.wrap-headerbar .extra-wrapper-width, .wrap-menue .extra-wrapper-width {
max-width: 790px !important; } }
@media (max-width: 1030px) {
.wrap-headerbar .extra-wrapper-width, .wrap-menue .extra-wrapper-width {
max-width: 1014px !important; } }
@media (max-width: 1370px) {
.wrap-headerbar .extra-wrapper-width, .wrap-menue .extra-wrapper-width {
max-width: 1356px !important; } }
@media (max-width: 1605px) {
.wrap-headerbar .extra-wrapper-width, .wrap-menue .extra-wrapper-width {
max-width: 1590px !important; } }
/* ---------------------------------------------------------------
* Mixins and other stuff exept for functions and calculations
* --------------------------------------------------------------- */
/* phpBB3 Style Sheet
--------------------------------------------------------------
Style name: SassySilver
Based on style: prosilver (the default phpBB 3.1.x style)
Original author: Tom Beddard ( http://www.subblue.com/ )
Modified by: Melmac
--------------------------------------------------------------
*/
/* -----------------------------------------------------------------
Overrides to the original prosilver classes
listed by file name
-------------------------------------------------------------------- */
/* common.css */
body {
padding: 12px 0; }
h1 {
font-size: 2em; }
h2 {
font-size: 2em; }
h3 {
font-size: 1.05em; }
h4 {
font-size: 1.3em; }
p {
font-size: 1.1em; }
.wrap {
max-width: 1152px; }
ul.linklist > li {
font-size: 1.1em; }
table.table1 thead th {
font-size: 1em; }
table.table1 td {
font-size: 1.1em; }
dl.details {
font-size: 1.1em; }
fieldset.fields1 ul.recipients input.button2 {
font-size: 0.8em; }
.phpbb_alert div.alert_text > p,
.phpbb_alert div.alert_text > label,
.phpbb_alert div.alert_text > select,
.phpbb_alert div.alert_text > textarea,
.phpbb_alert div.alert_text > input {
font-size: 1.1em; }
.error {
font-size: 1em; }
div.rules {
font-size: 1.1em; }
.member-search strong {
font-size: 0.95em; }
.dropdown-extended ul li {
font-size: 0.95em; }
.dropdown-extended .footer {
font-size: 1.1em; }
.notification_list ul li p {
font-size: 1em; }
.notification_list p.notification-time {
font-size: 0.9em; }
.notification_list p.notifications_title {
font-size: 1.2em !important; }
.notification_list p.notifications_time {
font-size: 0.9em !important; }
.linklist.compact .rightside > a > span span {
display: none; }
/* content.css */
ul.topiclist dt {
font-size: 1.1em; }
li.header dt, li.header dd {
font-size: 1em; }
dd.posts, dd.topics, dd.views, dd.extra, dd.mark {
font-size: 1.2em; }
/* colours.css */
ul.navlinks {
border-top: none; }
.headerbar, .forumbg {
background-image: none; }
.wrap {
background-color: #FFFFFF; }
/* Additional code, not included in original prosilver */
/* Provides the code changes required to separate the menue part of navbar_header via configfile */
html, body {
min-height: 101%;
height: auto;
background-color: #d71a3e;
background: -webkit-linear-gradient(to bottom, #9e001f 250px, #d71a3e 60%);
background: -o-linear-gradient(to bottom, #9e001f 250px, #d71a3e 60%);
background: linear-gradient(to bottom, #9e001f 250px, #d71a3e 60%); }
#wrap {
box-shadow: inset 3px 3px 7px -2px rgba(0, 0, 0, 0.75), inset -3px -3px 7px -2px rgba(0, 0, 0, 0.75); }
.headerbar-separate {
max-width: 1182px;
margin: 0 auto;
background: transparent; }
.site-description {
color: #FFFFFF; }
.wrap-menue {
max-width: 1182px;
margin: 4px auto; }
.wrap-menue .navbar {
padding: 1px 5px;
background-color: #000000;
border: 1px solid #818385;
border-radius: 0; }
.wrap-menue .navbar a {
color: #FFFFFF;
font-size: 1.2em;
padding: 5px;
border-radius: 2px; }
.wrap-menue .navbar a:hover {
background-color: grey; }
.dropdown .dropdown-contents {
background-color: grey; }
.headerbar {
background-color: #9e001f; }
.headerbar a {
color: #FFFFFF;
font-style: italic;
font-weight: 600;
font-size: 1.1em; }
.headerbar a:link, .headerbar a:visited {
color: inherit;
text-decoration: none; }
.headerbar a:hover {
color: #CCCCCC;
text-decoration: underline; }
.copyright {
border: 1px solid #9e001f;
border-radius: 7px;
padding: 15px 10px;
background-color: #dc3354;
margin: 0;
margin: 10px 0 0;
color: #000000;
box-shadow: inset 3px 3px 7px -2px rgba(0, 0, 0, 0.75), inset -3px -3px 7px -2px rgba(0, 0, 0, 0.75); }
/* Sidebar - controlled via configfile */
.sidebar {
display: block;
float: right;
width: 180px;
min-height: 100px;
height: auto;
background-color: #dc3354; }
@media all and (min-width: 1100px) {
.postprofile, .search .postprofile {
width: 240px; }
.postbody, .search .postbody {
width: 872px; } }
.post {
box-shadow: 7px 7px 10px 0px rgba(0, 0, 0, 0.75);
margin-bottom: 10px; }
.panel {
box-shadow: inset 3px 3px 7px -2px rgba(0, 0, 0, 0.75), inset -3px -3px 7px -2px rgba(0, 0, 0, 0.75);
padding: 7px 12px; }
.action-bar {
margin: 6px 0 10px; }
.page-footer .navbar, #page-header .navbar {
padding: 5px 10px;
box-shadow: inset 3px 3px 7px -2px rgba(0, 0, 0, 0.75), inset -3px -3px 7px -2px rgba(0, 0, 0, 0.75); }
/* New forabg/forumbg design */
.forabg, .forumbg, .stat-container {
border: none;
border-radius: 7px;
padding: 8px 8px 0;
margin-bottom: 8px;
background: -webkit-linear-gradient(to bottom, #9e001f 45px, #9e001f 46px, rgba(255, 255, 255, 0) 52px, rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(to bottom, #9e001f 45px, #9e001f 46px, rgba(255, 255, 255, 0) 52px, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to bottom, #9e001f 45px, #9e001f 46px, rgba(255, 255, 255, 0) 52px, rgba(255, 255, 255, 0) 100%); }
.forabg .inner, .forumbg .inner, .stat-container .inner {
padding: 0;
border-radius: 7px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-color: #000000; }
.forabg .inner ul.topiclist, .forumbg .inner ul.topiclist, .stat-container .inner ul.topiclist {
padding: 3px 0 0; }
.forabg .inner ul.topiclist li.header, .forumbg .inner ul.topiclist li.header, .stat-container .inner ul.topiclist li.header {
text-align: center; }
ul.forums {
border-radius: 5px; }
ul.topiclist li:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-color: transparent; }
ul.topiclist li:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-color: transparent; }
/* Enclosing statistic blocks in stat-container */
#login-container {
border: 1px solid #9e001f;
border-radius: 7px;
padding: 15px 10px;
background-color: #dc3354;
margin: 0;
margin: 0 5px;
background-color: #bfdfbf; }
.stat-container {
margin-top: 15px; }
.stat-container .stat-block {
border: 1px solid #9e001f;
border-radius: 7px;
padding: 15px 10px;
background-color: #dc3354;
margin: 0; }
.stat-container .stat-block:first-child {
margin-top: 5px; }
.stat-container .stat-block:last-child {
margin-bottom: 15px; }
.stat-container h3, .stat-container p {
margin: 0; }
.headerspace, .headerspace h3 {
margin: 0; }
/* Diverse */
/* Topic & Forum Titles */
.topic-title, .forum-title {
text-align: center; }
.topic-title a, .forum-title a {
min-width: 33%;
width: auto;
padding: 5px 15px;
border: 1px solid #ffffff;
border-radius: 10px;
background-color: #f8d9df; }
h2.topic-title, h2.forum-title {
margin: 10px 0; }
.action-bar a.rightside {
padding: 1px 8px;
border: 1px solid #e6e9ed;
border-radius: 7px;
background-color: #f8d9df; }
.action-bar .jumpbox-return {
padding: 1px 8px;
border: 1px solid #e6e9ed;
border-radius: 7px;
background-color: #f8d9df; }
.action-bar .pagination {
padding: 1px 8px;
border: 1px solid #e6e9ed;
border-radius: 7px;
background-color: #f8d9df; }
.action-bar .pagination > a {
padding: 5px 0; }
/* -------------------------------------------------
* Overrides, Mixins and other stuff ...
* ------------------------------------------------- */
/* Switches postprofile/postbody right<->left */
.postprofile {
border-width: 0 1px 0 0;
float: left; }
.postprofile dd, .postprofile dl {
margin-right: 8px; }
.postbody {
float: right; }
/*# sourceMappingURL=stylesheet.css.map */
Danke