Archief - Header background website doorzichtig maken?

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
S

SpiritBE

Legacy Member
Beste 9 livers,

Ben opzoek naar welke code ik moet verranderen om een stukje header van een wordpress website doorzichtig te maken.

Vond css attribuut die dit zou moeten kunnen verwezenlijken:
*
bijvoorbeeld:
header {opacity: 1; }


maar ik krijg het echt niet voor mekaar, aangezien het css bestand zo ontzettend groot is en dus niet weet waar iets te verranderen ;(

kan iemand mij hier verder helpen?

Hieronder de stukken css die over de header gaan

Code: 
#header{padding:0 10px 0px; }
.avada-row{
	margin:0 auto;
	max-width:940px;
}
.avada-row:after{
	content:"";
	display:block;
	clear:both;
}
#header .logo{
	float:left;
	overflow:hidden;
	margin:31px 0 0px;
}
#header .logo a{
	height:100%;
	display:block;
}
nav#nav{
	float:right;
	font:14px/16px 'MuseoSlab500Regular', arial, helvetica, sans-serif;
	z-index: 99999
}
#nav ul{
	list-style:none;
	margin:0;
	padding:0;
}
#nav ul li{
	float:left;
	padding: 0 35px 0 0;
	margin: 0;
}
ul#nav > li:last-child{padding-right:0;}
#nav ul a,#nav li.current-menu-ancestor a{
	display:block;
	height:83px;
	line-height:83px;
	border-top:3px solid #fff;
}
#nav ul .current_page_item a, #nav ul .current-menu-item  a, #nav ul > .current-menu-parent a{
	color:#a0ce4e;
	text-decoration:none;
	border-color:#a0ce4e;
}
#nav ul li{
	position:relative;
}
#nav ul ul{
	display:none;
	position:absolute;top:86px;left:0px;
	width:170px;
	background:#edebeb;
	z-index:100000;
	border-top:3px solid #a0ce4e;
	z-index: 99999;
}
#nav ul li:hover ul{
	display:block;
}
#nav ul li ul li{
	display:block;
	float:none;
	margin:0;
	padding: 0;
}
#wrapper #nav ul li ul li a{
	border:0;
	border-bottom:1px solid #dcdadbf;
	height:auto;
	text-indent:0px;
	font:13px/30px 'PTSansRegular', Arial, Helvetica, sans-serif;
	color:#333333 !important;
	padding:7px 20px;
	line-height:19px;
}
#wrapper #nav ul li ul li a:hover,#wrapper #nav ul li ul li.current-menu-item a{
	background-color:rgba(255,255,255,0.5);
}
#nav ul ul ul{
	display:none !important;
}
#nav ul ul li:hover ul{
	display:block !important;
	top:-3px;left:170px;
}
#nav .dd-container,.top-menu .dd-container{
	max-width:100%;
	display:none;
}

Code: 
/* New Headers */

.header-social{
	line-height:42px;
	border-bottom:1px solid #e1e1e1;
	padding:10px 0px;
}
.header-social { padding: 0px; }
.header-social .sep{padding: 0 6px;}
.header-social .social-networks{margin-top:11px; width: 400px;}
.header-social .social-networks li{float:left; margin-bottom:6px;}
.header-v2 .header-social .alignleft, .header-v2 .header-social .alignleft a{color:#b3b3b3 !important;}
.header-v2 .header-social .alignleft a:hover{}
.header-v2 #header{border-bottom:1px solid #e1e1e1;}
.header-v2 .social-networks li{}
.header-v2 .social-networks a{opacity:0.2;}
.header-v2 .social-networks a:hover{opacity:0.5;}
.header-v2{border-top:4px solid #a0ce4e;}

.header-v3 .header-social{background-color:#a0ce4e;}
.header-v3 .header-social .alignleft,.header-v3 .header-social .alignleft a{color:#fff !important;}
.header-v3 .header-social .alignleft a:hover{}
.header-v3 #header{border-bottom:1px solid #e1e1e1;}
.header-v3 .social-networks li{float:right;}
.header-v3 .social-networks img {
}
.header-v3 .social-networks a{opacity:0.5;}
.header-v3 .social-networks a:hover{opacity:1;}
.header-v3 #nav ul a, .header-v3 #nav li.current-menu-ancestor a{border-top:0px; padding-top:3px;}

.header-v4 .header-social{background-color:#a0ce4e;}
.header-v4 .header-social .alignleft,.header-v3 .header-social .alignleft a,.header-v4 .header-social .alignright .menu li a{color:#fff !important;}
.header-v4 #header{border-bottom:1px solid #e1e1e1;}
.header-v4 .social-networks li{margin-left:0; margin-right:22px;}
.header-v4 .social-networks img {
}
.header-v4 .social-networks a{opacity:0.5;}
.header-v4 .social-networks a:hover{opacity:1;}

.header-v4 #header{padding:30px 0px;}
.header-v4 #header .logo{margin:0;}
.header-v4 #header .tagline{float:right; margin:0 !important; padding:0; margin-right:15px !important; line-height:32px; text-align:right;}
.header-v4 #header .search{width:220px; float:right;}
.header-v4 #small-nav{border-bottom:1px solid #e1e1e1;}
.header-v4 #nav{float:left;}
.header-v4 #nav ul a, .header-v4 #nav li.current-menu-ancestor a{border-top:0; padding-top:3px;}
.header-v4 #nav li:last-child{padding-right:0;}
#header-banner{float:right;}

.header-v5 .header-social{background-color:#a0ce4e;}
.header-v5 .header-social .alignleft,.header-v5 .header-social .alignleft a,.header-v5 .header-social .alignright .menu li a{color:#fff !important;}
.header-v5 #header{border-bottom:1px solid #e1e1e1;}
.header-v5 .social-networks li:last-child{margin-right:0;}
.header-v5 .social-networks img {
}
.header-v5 .header-social .social-networks li{float:right;}
#.header-v5 .social-networks a{opacity:0.5;}
.header-v5 .social-networks a:hover{opacity:1;}
.header-v5 .header-social .alignright .menu, .header-v5 .header-social .alignright .menu ul{list-style:none; margin:0; padding:0;}
.header-v5 .header-social .alignright .menu li{margin:0; padding:0; padding: 0 8px; float:left; border-left:1px solid #fff; line-height:12px; }
.header-v5 .header-social .alignright .menu li:first-child{border-left:0;}
.header-v5 #header{padding:30px 0px;}
.header-v5 #header .logo{margin:0; text-align:center;}
.header-v5 #header .tagline{width:300px; float:right; margin:0; margin-right:15px; line-height:32px;}
.header-v5 #header .search{width:220px; float:right;}
.header-v5 #small-nav{border-bottom:1px solid #e1e1e1;}
.header-v5 #nav{float:none;}
.header-v5 #nav > ul{float:none; text-align:center;}
.header-v5 #nav > ul > li,.header-v5 #nav > ul > li > a{float:none;display:inline-block;}
.header-v5 #nav > ul ul{text-align:left;}
.header-v5 #nav ul a, .header-v5 #nav li.current-menu-ancestor a{border-top:0; padding-top:3px;}
.header-v5 #header .logo{float:none !important;}

#header .tagline{font-weight:normal; font-family:'MuseoSlab500Regular', arial, helvetica, sans-serif !important; margin-top:7px !important;}

.header-social .alignleft .social-networks li{float:left;margin-left:0;margin-right:20px;}
.header-social .alignright .social-networks li{float:right;}

.header-social .menu,.header-social .menu ul{list-style:none; margin:0; padding:0;}
.header-social .menu li{position:relative;margin:0; padding:0; padding:0 8px; display:inline-block; border-left:1px solid #fff;}
.header-social .menu li:first-child{border-left:0;}
.header-social .menu li .sub-menu{display:none;z-index:100000;}
.header-social .menu > li:hover .sub-menu{display:block;position:absolute;left:0;}
.header-social .menu .sub-menu{background:#ffffff;
	-webkit-border-bottom-right-radius: 2px;
	-webkit-border-bottom-left-radius: 2px;
	-moz-border-radius-bottomright: 2px;
	-moz-border-radius-bottomleft: 2px;
	border-bottom-right-radius: 2px;
	border-bottom-left-radius: 2px;
	border:1px solid #e0dfdf;
	width:100px;
	line-height:normal !important;
}
#wrapper .header-social .menu .sub-menu li{
	float:none;
	display:inline-block;
	border:0;
	border-bottom:1px solid #e0dfdf !important;
	line-height:normal !important;
	padding:0 !important;
}
#wrapper .header-social .menu .sub-menu li a{
	width:80px;
	padding:7px 10px;
	display:inline-block;
}
#wrapper .header-social .menu .sub-menu li a:hover{
	background-color:#fafafa;
}
#wrapper .header-social .menu .sub-menu li:last-child{
	border-bottom:0 !important;
}
#wrapper .header-social .menu .sub-menu li,#wrapper .header-social .menu .sub-menu li a{
	color:#333333 !important;
}
.header-social .alignleft .menu li:last-child{padding-left:0;}
.header-social .alignright .menu li:last-child{padding-right:0;}


.widget_wooslider_slideshow_slides li a{background:none !important; border:0 !important; margin:0 !important; padding:0 !important;}

#sidebar .flickr_badge_image img{width:66px; height:66px; float:left; padding:3px;}
.footer-area .flickr_badge_image img{width:44px; height:44px; float:left; padding:5px;}
.footer-area .social-networks{float:left;}
.footer-area .social-networks li{float:left;margin-left:0;margin-right:20px;padding:0;}
.footer-area .social-networks li, .footer-area .social-networks a{background-image:none;}
.footer-area .social-networks li:first-child{padding:0;}
.footer-area .flexslider .slides > li{padding-top:0; padding-bottom:0;}
.chat-icon{display:inline-block; width:26px; height:19px; background-image:url(../images/speech-bubble.png); margin-top:9px;}
p

profound

Legacy Member
Opacity: 1 wilt zeggen 100% ondoorzichtig.
Dus probeer is opacity: 0.5
-

-BVR-

Legacy Member
Gebruik inderdaad webdevtools van uw browser en probeer gewoon op wat elementen die opacity te veranderen, dan ziet ge wel welke de juiste is.
-

-BVR-

Legacy Member
Fransz zei:
en !important kan soms wonderen doen :)
Klik om te vergroten...

En dat dien je zo veel mogelijk te vermijden. Als je't kan oplossen zonder !important, doe het dan zonder, en gebruik het niet als luiaardij-oplossing. Het zal je code enkel nog onduidelijker maken, en nog voller steken met crap die niet nodig is.
a

adrianhates

Legacy Member
BramVanroy zei:
En dat dien je zo veel mogelijk te vermijden. Als je't kan oplossen zonder !important, doe het dan zonder, en gebruik het niet als luiaardij-oplossing. Het zal je code enkel nog onduidelijker maken, en nog voller steken met crap die niet nodig is.
Klik om te vergroten...

nog nooit bewust !important gebruikt de laatste 3 jaar denk ik ..
C

Carrion

Legacy Member
Fransz zei:
en !important kan soms wonderen doen :)
Klik om te vergroten...

Een !important gebruikt ge enkel als het probleem hoogdringend is en op vrijdag om half 6 's avonds gemeld wordt.

't is een beetje als het ontsmettingsmiddel voor ge naar de dokter gaat.
p

profound

Legacy Member
Important is nochtans zeer handig als ge met meerdere mensen aan 1 project werkt en ge gegarandeerd een bepaalde structuur in uw layout wilt behouden. Maar dan nog zult ge hebt in de praktijk inderdaad zeer weinig en indien mogelijk helemaal niet gebruiken.
-

-BVR-

Legacy Member
profound zei:
Important is nochtans zeer handig als ge met meerdere mensen aan 1 project werkt en ge gegarandeerd een bepaalde structuur in uw layout wilt behouden. Maar dan nog zult ge hebt in de praktijk inderdaad zeer weinig en indien mogelijk helemaal niet gebruiken.
Klik om te vergroten...

Het is "handig" ja, als je snel iets moet fixen en geen zin hebt om achter de lijn wilt zoeken die ge overschrijft, maar in principe zou het niet eens nodig mogen zijn. (Wel bij bv. @media print waar dat gewoon moét zijn.)
p

profound

Legacy Member
BramVanroy zei:
maar in principe zou het niet eens nodig mogen zijn.
Klik om te vergroten...

So? Der zijn zoveel zaken in IT die 'niet nodig zouden mogen zijn'...in een professionele omgeving is da helaas meestal van ondergeschikt belang aan tijd en geld.
S

SpiritBE

Legacy Member
Die "firebug" heeft mij al een heel pak geholpen, super handige tool!
Maar slaag er nog steeds niet in om de witte achtergrond transparant te maken zodat het logo zeg maar zweeft..

"http://www.scooterevents.be/"

Is dit eigenlijk wel mogelijk met de css?

probeerde "opacity:0;" en "background-color:transparent;" uit op volgende divs ".header" & ".header-v5" maar zonder het gewenste resultaat...
A

Albireo

Legacy Member
Dit stukje code in je CSS helpt niet:

Code: 
#header, #small-nav {
background-color: #ffffff !important;
}

bedenk ook dat je wrapper een witte achtergrondkleur heeft, dus als je de achtergrond van je logo transparant maakt, zie je het wit van de wrapper...
-

-BVR-

Legacy Member
profound zei:
So? Der zijn zoveel zaken in IT die 'niet nodig zouden mogen zijn'...in een professionele omgeving is da helaas meestal van ondergeschikt belang aan tijd en geld.
Klik om te vergroten...

Wat is dat nu voor een opmerking. "So". Dat kan allemaal goed zijn dat er geen tijd en geld voor is, dat maakt niet uit. Het blijft bad practice en het zorgt voor onoverzichtelijk code. Als je overal gewoon snel even !important zou gebruiken waar je te lui bent (of geen tijd hebt) om te zoeken naar een betere oplossing, dan wordt je stylesheet al snel meer dan enkele bytes groter dan dat het zou moeten zijn. (Ja, alle bytes tellen wel zeker.)

At TS: Misschien toch even verduidelijken wat je nu juist transparant wil maken?
p

profound

Legacy Member
BramVanroy zei:
Wat is dat nu voor een opmerking. "So". Dat kan allemaal goed zijn dat er geen tijd en geld voor is, dat maakt niet uit. Het blijft bad practice en het zorgt voor onoverzichtelijk code. Als je overal gewoon snel even !important zou gebruiken waar je te lui bent (of geen tijd hebt) om te zoeken naar een betere oplossing, dan wordt je stylesheet al snel meer dan enkele bytes groter dan dat het zou moeten zijn. (Ja, alle bytes tellen wel zeker.)
Klik om te vergroten...

Ik zei toch duidelijk "en indien mogelijk helemaal niet gebruiken.", dus ik ga akkoord hoor....
Ik vind gewoon dat er onterecht een groot spel van gemaakt wordt, en ik snap niet waarom. Het feit dat ge important überhaupt gebruikt wilt zeggen dat uwe stijl ergens anders overschreven wordt, en ge dus sowieso me overbodige code zit (= meer bytes). In dat geval wilt dat zeggen dat ge ofwel lui zijt inderdaad ofwel geen toegang hebt tot de andere code en het dus handig is dat gij zegt dat uwe stijl nie overschreven mag worden. Ik snap echt niet wat daar zo fout aan is.


edit: uw header wordt niet doorzichtbaar omdat uwe #wrapper een background color heeft. Als ge uwen header transparant maakt, misschien de groene kleur van uw links wat lichter maken, of gewoon het contrast vergroten.
-

-BVR-

Legacy Member
Mijn bedoeling was niet om er een groot spel van te maken, ik vermeldde gewoon even dat het geen goede gewoonte is om dat te doen. Aangezien het bij de TS precies om een beginner gaat, lijkt het me beter hem geen slechte gewoontes aan te kweken.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan