Comic Fury Webcomic Hosting - Hopefully easy HTML question..

You are not logged in. Log in, Register, More info
Forum > Layouts, HTML, CSS & Javascript > Hopefully easy HTML question..
Pages: [1]

"Hopefully easy HTML question..", 31st May 2018, 5:15 PM #1
heckos

User avatar
Posts: 747
Registration date: 21st Nov 2014
Location: Baltimore
I have a Weebly site (here) and as you can see the home page has this opaque white bar across it. I think it would look much better if it was slightly translucent, but I'm not experienced enough with HTML to know how I might be able to make that happen.

I believe this is the bit that affects the white bar (they call it a "splash"), but please let me know if you need anything else:


Thanks so much!
_______________________
31st May 2018, 5:21 PM #2
kirstin

User avatar
Posts: 54
Registration date: 12th Mar 2018
I took a look at it, and I think in your CSS:


.birdseye-header{
opacity: .5; <--- change decimal to w/e you want, less than 1
position: fixed;
top: 0;
z-index: 12;
width: 100%;
max-width: 100%;
padding: 20px 40px;
color: #ffffff;
border-color: #ffffff;
box-sizing: border-box;
-webkit-transition: background-color 300ms ease, color 260ms ease, padding 180ms ease;
-moz-transition: background-color 300ms ease, color 260ms ease, padding 180ms ease;
-ms-transition: background-color 300ms ease, color 260ms ease, padding 180ms ease;
}


Should work!
_______________________
31st May 2018, 5:24 PM #3
Mothtrap
mouth blood
User avatar
Posts: 1399
Registration date: 9th Nov 2014
Do you have access to the css sheet?
find
.birdseye-header{

and change the background property to
background:rgba(255,255,255,0.5);

adjust the 0.5 to any valiue between 0 and 1 to adjust how transparent it is.

If you don't have access to the css you can do it inline like so:
<div class="birdseye-header" style="background:rgba(255,255,255,0.5)">

though it's usually better to avoid doing stuff inline.


Edit: (kirstin's way works too and makes text transparent as well instead of just background)
_______________________
31st May 2018, 7:25 PM #4
heckos

User avatar
Posts: 747
Registration date: 21st Nov 2014
Location: Baltimore
Thanks for the replies! I tried doing Mothtrap's method because I want the text to stay opaque.

This is what the editor looks like for me, am I doing something wrong? I tried making the value something different but it didn't change the appearance.

image
_______________________
31st May 2018, 7:36 PM #5
Mothtrap
mouth blood
User avatar
Posts: 1399
Registration date: 9th Nov 2014
You want it to look like this
<div class="birdseye-header" style="background:rgba(255,255,255,0.5)">

so the style bit: style="background:rgba(255,255,255,0.5)" is inside the <> (no {} needed)

Basically delete the curly braces and the > immediately after "birdseye-header"!
_______________________
31st May 2018, 7:51 PM #6
heckos

User avatar
Posts: 747
Registration date: 21st Nov 2014
Location: Baltimore
It looks good now, thank you!
_______________________
Forum > Layouts, HTML, CSS & Javascript > Hopefully easy HTML question..
Pages: [1]