• 0

HTML + CSS help


Question

So I'm updating this site for a friend and they want to put the hours of worship and their address in a box over the banner, thing is it's a pre-made wordpress template and I personally want it done in HTML + CSS because I know it can be done and it can be provided as a link to the directions...

Here's a mock up of what I want to do.

post-145092-12898092928137.png

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

You can easily do it in HTML/CSS, lol that's what the Twenty10 theme is based off of (and any other WordPress theme.)

Just go to the theme directory to edit the header.php file :)

Link to comment
Share on other sites

  • 0

*erm* I haven't done HTML and CSS in awhile... so... how would one go about this? -.-

And I'm not asking what to edit as I know where that is in the template I'm asking how to do that box as it's not part of the original theme...

Link to comment
Share on other sites

  • 0

*erm* I haven't done HTML and CSS in awhile... so... how would one go about this? -.-

And I'm not asking what to edit as I know where that is in the template I'm asking how to do that box as it's not part of the original theme...

This code is a bit messy but it should do the trick.

You'll need a transparent black image for the background. And you may need to change the measurements - I just measured your screenshot for this, but it's quite possible that the template will muck them up.

Ideally you'd put the styles in an external stylesheet and you wouldn't make the position absolute but there you go, it's yours to muck around with :)

<div style="position: absolute; left: 635px; top: 265px; width: 300px; height: 190px; background-image: url(images/transparent-black.png); z-index: 100;">
    Address
</div>

Or you could try using CSS for the transparency but you may have compatibility problems with browsers... Although to be fair, IE6 won't recognize a transparent PNG anyway so it's 6 of one and half a dozen of the other.

<div style="position: absolute; left: 635px; top: 265px; width: 300px; height: 190px; z-index: 100; background-color: #000000; opacity: 0.5; filter: alpha(opacity='50');">
    Address
</div>

Filter is for IE, opacity is for good browsers.

Link to comment
Share on other sites

  • 0

I would only use a transparent background image as a fall-back for browsers that don't support RGBA. Otherwise the transparency itself can just be done with background: rgba(0,0,0,.4);. Quick and easy.

Link to comment
Share on other sites

  • 0

I would only use a transparent background image as a fall-back for browsers that don't support RGBA. Otherwise the transparency itself can just be done with background: rgba(0,0,0,.4);. Quick and easy.

Yeah unfortunately that doesn't work in IE 8, 7, 6 etc... only in IE 9 Beta which very few people actually use at the moment.

Link to comment
Share on other sites

  • 0

Yeah unfortunately that doesn't work in IE 8, 7, 6 etc... only in IE 9 Beta which very few people actually use at the moment.

*facepalm* That's why I said use transparent background image as a fallback for browsers that don't support it. Read! :|

#name {
   background: transparent url(black50.png);
   background: rgba(0, 0, 0, 0.5) none;
}

Link to comment
Share on other sites

  • 0

*facepalm* That's why I said use transparent background image as a fallback for browsers that don't support it. Read! :|

#name {
   background: transparent url(black50.png);
   background: rgba(0, 0, 0, 0.5) none;
}

Ok, ok, keep your hair on!

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.