phpBB.nl

Nederlandstalige phpBB Support
https://www.phpbb.nl/forums/

Waar vind ik de kleur codes voor deze veranderingen?

https://www.phpbb.nl/forums/viewtopic.php?f=54&t=59234

Pagina 1 van 1

Waar vind ik de kleur codes voor deze veranderingen?

Geplaatst: 26 mar 2014, 13:13
door psychokai
Afbeelding

Wil een paar kleine veranderingen maken dus ik probeer de codes te vinden waar ik de hover kleur(oranje) en de standaardkleur(grijs) kan veranderen naar hover zwart en standaard wit, de kleur van 0 (voor nieuwe berichten) en ook waar de code van de oranje strepen staan in de witte en rode ovale cirkel.

Wanneer ik element inspecteren doe kan ik dat allemaal aanpassen maar ik kan het nergens in de colours.css

http://www.rebelshouse.nl/forum

Re: Waar vind ik de kleur codes voor deze veranderingen?

Geplaatst: 26 mar 2014, 13:49
door Theriddler
Als ik het helemaal goed heb kun je de classes vinden in theme/alpha.css

Code: Selecteer alles

.navigation ul li.active > a, .navigation ul li a:hover {
	border-bottom-color: #e0591e;
	text-decoration: none;
}

Code: Selecteer alles

ul.userlinks {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-right: 20px;
	margin-top: 20px;
}

ul.userlinks li {
	float: left;
	margin-left: 10px;
}

ul.userlinks li a {
	display: block;
	font-size: 1.3em;
	background: rgba(247,247,247,0.5);
	font-family: "beb", Arial, Helvetica, sans-serif;
	word-spacing: 5px;
	border-bottom: 3px solid #e0591e;
	line-height: 80px;
	padding: 0 30px;
}

ul.userlinks li a:hover {
	text-decoration: none;
}

ul.userlinks li a strong {
	color: #e0591e;
	margin-right: 5px;
}

Re: Waar vind ik de kleur codes voor deze veranderingen?

Geplaatst: 26 mar 2014, 14:17
door psychokai
Is dit gelijk alles?

Ik ga er mee aan de slag.

Bedankt voor je snelle reactie!

Re: Waar vind ik de kleur codes voor deze veranderingen?

Geplaatst: 26 mar 2014, 14:51
door psychokai
Ik heb het 1 en ander veranderd maar de kleuren zijn nog hetzelfde

Code: Selecteer alles

body {
	border-top: 2px solid #e0591e;
}

.fl {float: left;}
.fr {float: right;}
.cb {clear: both;}

a#logo {
	/* See: https://www.phpbb.com/kb/article/changing-your-board-logo/
	for changing logo image */
	margin-top: 10px;
	margin-left: 10px;
}

#banner {
	padding-bottom: 20px;
	background: url("{T_THEME_PATH}/images/example-banner.png") repeat left top;
}

ul.userlinks {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-right: 20px;
	margin-top: 20px;
}

ul.userlinks li {
	float: left;
	margin-left: 10px;
}

ul.userlinks li a {
	display: block;
	font-size: 1.3em;
	background: rgba(247,247,247,0.5);
	font-family: "beb", Arial, Helvetica, sans-serif;
	word-spacing: 5px;
	border-bottom: 3px solid #C20F0F;
	line-height: 80px;
	padding: 0 30px;
}

ul.userlinks li a:hover {
	text-decoration: none;
}

ul.userlinks li a strong {
	color: #ffffff;
	margin-right: 5px;
}

.navigation {
	background: #1e2025;
	font-family: "beb", Arial, Helvetica, sans-serif;
	word-spacing: 5px;
	margin-bottom: 20px;
}

.navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.navigation ul li {
	float: left;
}

.navigation ul li a {
	display: block;
	border-bottom: 3px solid #1e2025;
	padding: 16px 16px 12px;
	font-size: 1.3em;
	color: #ffffff;
}

.navigation ul li.active > a, .navigation ul li a:hover {
	border-bottom-color: #000000;
	text-decoration: none;
}

.navigation ul li.parent > a {
	background: url("{T_THEME_PATH}/images/drop.png") no-repeat right 50%;	
}

.navigation ul li a span { /* wrap nav items in <span> for orange text */
	color: #e0591e;
}

/* Optional: Keep navbar parent link underlined when hovering over sub-menu items */
/* .navigation ul li:hover > a {
	border-bottom-color: #e0591e;
}*/

.navigation ul li ul { /* main menu drop down */
	position: absolute;
	background: #1E2025;
	display: none;
	z-index: 9999;
}

.navigation ul li:hover > ul {
	display: block;
}

.navigation ul li ul li {
	float: none;
}

.forumbg span.corners-top, .forumbg span.corners-bottom, .forabg span.corners-top, .forabg span.corners-bottom {
	display: none;
}

li.header {
	background: #1e2025;
	padding: 10px;
}

li.header dl.icon dt {
	font-weight: normal;
}


li.header dl.icon dt a:hover {
	text-decoration: none;
}

.alpha-copyright {
	text-align: center;
	font-size: 1.3em;
	color: #ffffff;
	text-shadow: 0 -1px 0 #000000;
}

.alpha-copyright a {
	color: #ff4e00;
}

.breadcrumbs {
	font-size: 1.3em;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 20px;
}

table#memberlist th {
     background: #1E2025;
     padding: 10px;
}

Re: Waar vind ik de kleur codes voor deze veranderingen?

Geplaatst: 27 mar 2014, 20:49
door Theriddler
/styles/Alpha/theme/alpha.css

Zoek:

Code: Selecteer alles

ul.userlinks li a {
   display: block;
   font-size: 1.3em;
   background: rgba(247,247,247,0.5);
   font-family: "beb", Arial, Helvetica, sans-serif;
   word-spacing: 5px;
   border-bottom: 3px solid #e0591e;
   line-height: 80px;
   padding: 0 30px;
}
vervang met:

Code: Selecteer alles

ul.userlinks li a {
   display: block;
   font-size: 1.3em;
   background: rgba(255,255,255,1.0);
   font-family: "beb", Arial, Helvetica, sans-serif;
   word-spacing: 5px;
   border-bottom: 3px solid #e0591e;
   line-height: 80px;
   padding: 0 30px;
}
Nu zijn de grijze blokken wit.

in diezelfde code vindt je ook de oranje streep:

Code: Selecteer alles

border-bottom: 3px solid #e0591e;
Verander de hex kleur code naar een kleur die je zou willen

Dan heb je nog de navigatie balk
De oranje streep kun je in de volgende code aanpassen:

Code: Selecteer alles

.navigation ul li.active > a, .navigation ul li a:hover {
   border-bottom-color: #e0591e;
   text-decoration: none;
}
Verander ook hier weer de hex kleur code

Code: Selecteer alles

border-bottom-color: #e0591e;
De oranje kleur van de tekst wanneer je hovert over links en de knoppen worden geregeld in: /styles/Alpha/theme/colours.css

Code: Selecteer alles

--------------------------------------------------------------
Colours and backgrounds for links.css
-------------------------------------------------------------- */

a:link	{ color: #585858; }
a:visited	{ color: #585858; }
a:hover	{ color: #d33f11; }
a:active	{ color: #939393; }
het gaat dan om de hover:

Code: Selecteer alles

a:hover	{ color: #d33f11; }
Verander ook hier weer de hex kleur code.

Na bewerking upload je de css bestanden terug naar hun oorspronkelijke plaats en vernieuw je het thema in het admin paneel onder stijlen. Als je niet direct de verandering ziet zul je de cache van de browser nog moeten legen met CTRL + F5

Re: Waar vind ik de kleur codes voor deze veranderingen?

Geplaatst: 29 mar 2014, 13:16
door psychokai
bedankt ik ga het proberen :mrgreen:

Re: Waar vind ik de kleur codes voor deze veranderingen?

Geplaatst: 29 mar 2014, 14:11
door psychokai
Werkt helemaal top! bedankt man, zit alleen nog met die 0 voor 'nieuwe berichten' die kleurcode is #e0591e volgens inspecteren maar heb die colors lijst 2x doorgelezen maar kan em niet vinden, zal wel scheel aan het worden zijn haha

Re: Waar vind ik de kleur codes voor deze veranderingen?

Geplaatst: 29 mar 2014, 14:30
door vacla
Dit is het juiste: http://www.colorhexa.com/e0591e

Re: Waar vind ik de kleur codes voor deze veranderingen?

Geplaatst: 29 mar 2014, 15:13
door psychokai
Dat zeg ik maar die kleur van die 0 wil ik dus veranderen maar kan em niet vinden

Re: Waar vind ik de kleur codes voor deze veranderingen?

Geplaatst: 30 mar 2014, 12:56
door Theriddler
heb je misschien een test account voor me zodat ik het wat beter kan zien, gegevens kun je naar me toe sturen middels een PB

Re: Waar vind ik de kleur codes voor deze veranderingen?

Geplaatst: 31 mar 2014, 16:36
door psychokai
Heb ik voor je ;)
Alle tijden zijn UTC+01:00
Pagina 1 van 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/