stylesheet.css Helppiä

[Karjala]

Kun se Blue Moon teema bugittaa, niin mun pitää yrittää säätää tuosta subsilveristä vastavaa.

Olen jotain muokannut stylesheet.css:stä mutta tuota headerin harmaata taustaa en osaa yhdistää mihinkään siellä???

Eli tuon taustan väriä yritän vaihtaa, mutta miten ja mistä?

[Jannek]

Puhdas arvaus: Olisiko harmaa tausta osa tuota logokuvaa?

[Karjala]

Puhdas arvaus: Olisiko harmaa tausta osa tuota logokuvaa?

Ei oo.

[Lurttinen]

Kokeile vielä common.css tai colours.css tiedostoja josko olis niissä.
Mikä tuon kuvan nimi on? Siitä voisi saada vinkkejä minkä alta se löytyy.

[Karjala]

Siinä se onkin prosilverin ja supsilverin ero, kun prosilverin teemoissa on paljon rojua ja supsilverin kansioissa on vain murto-osa. Eli common.css:ää ei ole.

Tällähän niitä värejä voi säätääja saan tummemmaksi sen harmaan taustan, mutta kun se ei ole sama asia. Koska säätöjen yhteydessä muuttuu koko foorumin väritys, ei vain sen logon alla oleva tausta.

[mr Metsä]

...vain sen logon alla oleva tausta.

Olen muutellut omien foorumieni väritykset muuhun sivustooni lähemmäksi sopivaksi usein ja joka kerta se tapahtuu eri tavalla riippuen tyylistä. Oikeastaan olen hiukan ihmetellyt tarpeettoman monimutkaisia virityksiä, mutta asiaan: Logo-kuvan tausta on usein kuva, joten etsi Styles-kansiosta po. tyylin kansiosta alakansiot theme/images. Siellä on tyylikohtaiset taustakuvat joita muokkaamalla saat just sellaisen taustan kun haluat. Selaa kuvat vaikka Irfanview-softalla tms. ja näet helposti taustat. Jos nimillä etsit niin löytyy jotain tämäntapaisia esim:

logo.gif = logotekstin taustakuva
navbar.gif = navigointipalkin tausta
bg_list.gif jne = taustalistan gradientti

Viritykset vaihtelevat tietenkin teemakohtaisesti joten looginen mielikuvitus kehiin

Omassa hässäkässäni väritin uudelleen logo.gif-kuvatiedoston. Tietysti tein itse omat logot ja niihin linkitykset kuten koko foorumini väritykset jne, mutta se onkin jo eri asia. Yläpalkissa on kaksi kuvaa joista vasen vie koko sivustoni alkuun ja toinen foorumin etusivulle. Jos kiinnostaa voit vilkaista foorumini etusivua, - sisälle et pääse koska foorumini on pienessä yksityiskäytössä: hops

[Karjala]

Kiitos vinkeistä, mutta oli se siellä stylesheet.css:ä

Tätä kun muokkaa, ni tuon taustan väri vaihtuu...


stylesheet.css

Koodi: Valitse kaikki

}

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

[mr Metsä]

Kiitos vinkeistä, mutta oli se siellä stylesheet.css:ä

Tätä kun muokkaa, ni tuon taustan väri vaihtuu...


stylesheet.css

Koodi: Valitse kaikki

}

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

Siellähän se normaalisti on, mutta käsitin että olit jo tutkinut peruskoodin. Näin määritellään tasaiset värit numerokoodina, mutta jos halutaan liukuvärejä niin tarvitaan taustakuva joka on käytössä monissa teemoissa. Taustakuviin saa helposti varjo-efektiä ja muuta 3-ulotteisuutta enemmän.

Hyvä kun löysit värikoodin jemman

[Karjala]

Nyt tulee pitkä lista, mutta pakko hiukan kysellä. Mistähän mää voisin säätää foorumin fontin kokoa?
Tuolla on niin monta mahdollista kohtaa, enkä viitsisi jokaiseen erikseen kokeilla...

Koodi: Valitse kaikki

/*  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
 ------------ */
@import url("memberlist_avatar.css");
* {
	/* 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: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #323D4F;
	background-attachment: fixed;
	background-image: url(http://www.taoft.fi/img/background.png);
	background-position: center center;
	font-size: 62.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('./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: #ECECEC;
	border-width: 1px;
	border-style: solid;
	border-color: #A9B8C2;
}

#logodesc {
	margin-bottom: 5px;
	padding: 5px 25px;
	background: #999999;
	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: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

.forumrules h3 {
	color: red;
}

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

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


/*  Text
 --------------------- */
h1 {
	color: black;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
	font-weight: bold;
	font-size: 1.8em;
	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 {
	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: "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;
}

.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: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

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

.error {
	color: red;
}


/* Tables
 ------------ */
th {
	color: #FFFFFF;
	font-size: 1.1em;
	font-weight: bold;
	background-color: #006699;
	background-image: url('./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('./images/cellpic2.jpg') repeat-y scroll top left;
}
.rtl .catdiv {
	background: white url('./images/cellpic2_rtl.jpg') repeat-y scroll top right;
}

.cat {
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: #C7D0D7;
	background-image: url('./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: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-size: 1.2em;
}

a.topictitle {
	margin: 1px 0;
	font-family: "Lucida Grande", Helvetica, Arial, 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: "Lucida Grande", Verdana, Helvetica, Arial, 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: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, 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: "Lucida Grande", Verdana, Helvetica, Arial, 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;
}

#msg > li.row1 {
	display: block;
	list-style-type: none;
	margin: 0;
	height: auto;
	width:98%;
	float: left;
}

#msg > li.row2 {
	display: block;
	list-style-type: none;
	margin: 0;
	height: auto;
	width:98%;
	float: left;
}

#msg > li > dl{
	vertical-align: middle;
	width: 100%;
}

#msg > li > dl > dt{
	width: auto !important;
	white-space: nowrap;
	margin-right: 2px;
}

#msg > li > dl > dd > input{
	margin: 3px;
}

#msg > li > dl > dd#msgbody{
	display: inline;
	padding: 3px 0 1px 0px !important;
	vertical-align: middle;
	float:none !important;
}

#base_ul
{
	list-style:none;
	margin-left: 0;
}

[tonza]

Nyt tulee pitkä lista, mutta pakko hiukan kysellä. Mistähän mää voisin säätää foorumin fontin kokoa?
Tuolla on niin monta mahdollista kohtaa, enkä viitsisi jokaiseen erikseen kokeilla...

Koodi: Valitse kaikki

/*  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/ )
    --------------------------------------------------------------
*/
[SNIP]

En ole vielä phpbb3 tyylejä muokannut, mutta voitko hiukan täsmentää minkä tekstin kokoa haluat muuttaa?
Firefox-selaimeen on saatavilla näppärä web developer -laajennus (chrispederick.com), jota käyttämällä saa selville kunkin tekstin, kuvan, taulukon ym ym. käyttämän tyylimäärittelyn. Siinä voi olla jonkin verran puuhaa kun alkaa säätämään, ellei sitten halua laittaa bodyyn suoraan fontiksi suurempi kuin tuo 62.5%. Joka tapauksessa on jonkin verran hommaa varmaa tiedossa. Viisautta siihen..

[mlehtola]

Jotenkin omituista että tässä on menty takapakkia näin paljon, phpBB2:ssa noi värit sai kuntoon kohtuullisen kätevästi, nyt on täysin hakuammuntaa kun css:n kryptisistä jutuista ei ota selvää, pitänee kokeilla tuota chrispederick.com:n työkalua, vai osaako joku neuvoa millä alueitten otsikon värin saa muutettua?

[mrl586]

Jotenkin omituista että tässä on menty takapakkia näin paljon, phpBB2:ssa noi värit sai kuntoon kohtuullisen kätevästi, nyt on täysin hakuammuntaa kun css:n kryptisistä jutuista ei ota selvää, pitänee kokeilla tuota chrispederick.com:n työkalua, vai osaako joku neuvoa millä alueitten otsikon värin saa muutettua?

Mikä tyyli?

[Lurttinen]

Tuskin nyt ihan takapakkia on otettu, jos katsellaan phpBB2 subSilveriä ja phpBB3 standardit täyttävää prosilver -tyyliä.
Puhumattakaan, että on kokonaan CSS pohjainen, niin muokkaus on osaavalle todella helppoa. Helpompaa, kuin kakkosessa ylläpidosta muokkaaminen on koskaan ollutkaan.

Jos tosin mittarina pidetään sitä, että tarvitaan joku graafinen käyttöliittymä prosilverin värien muokkaukseen, niin kait se sitten on paska.

Firefoxiin on saatavanan "web developer" -työkalu.
Asenna se ja sen jälkeen prosilver avautuu. Käytännössä haluat avata /theme -hakemistossa olevat tiedostot jossain kunnollisessa editorissa, kuten notepad++, ja niistä etsiä tuon web developerin ilmoittamat määritykset.

kun tuon CSS:n kerran opettelet (edes alkeet) saat tehtyä kaikenlaista kivaa sillä tyylillä jo ennen, kuin muokkaat mallineita ollenkaan.

[mlehtola]

Jotenkin omituista että tässä on menty takapakkia näin paljon, phpBB2:ssa noi värit sai kuntoon kohtuullisen kätevästi, nyt on täysin hakuammuntaa kun css:n kryptisistä jutuista ei ota selvää, pitänee kokeilla tuota chrispederick.com:n työkalua, vai osaako joku neuvoa millä alueitten otsikon värin saa muutettua?

Mikä tyyli?

subsilver2

[mlehtola]

Jos tosin mittarina pidetään sitä, että tarvitaan joku graafinen käyttöliittymä prosilverin värien muokkaukseen, niin kait se sitten on paska.

Firefoxiin on saatavanan "web developer" -työkalu.
Asenna se ja sen jälkeen prosilver avautuu. Käytännössä haluat avata /theme -hakemistossa olevat tiedostot jossain kunnollisessa editorissa, kuten notepad++, ja niistä etsiä tuon web developerin ilmoittamat määritykset.

kun tuon CSS:n kerran opettelet (edes alkeet) saat tehtyä kaikenlaista kivaa sillä tyylillä jo ennen, kuin muokkaat mallineita ollenkaan.

Juu, työkalu asennettu ja notepad++ on vakioeditorina, vaan ei auta kun toi työkalu ilmoittelee asioita joita ei sitten css:stä löydykkään. Ei tartte olla graafinen, mutta joku ".sep" ei paljoa kerro vaikka kuinka olisi css-guru, eli kaikenlainen ei pakollinen lyhentäminen yms. kyllä tämmösissä tappaa tekemisen ilon. "...td .cat > h4 > a", juu ei tunnu löytyvän sopivaa stylesheet.css:stä eikä tarina kerro että mistä pitäisi etsiä.