Forums

mwdewitt

Okay, I created a new custom page on my WordPress website, located here. I am trying to make it look like this. I created a new custom page and a new stylesheet called "minter.css," but it does not seem to be recognizing it. Any help would be greatly appreciated!

I would like to do a tiled background of this and place this in the bottom left-hand side of the page wrap. Then I would like to put text in the middle of the window, saying, "Who is Minter Tweed?"

Again, any help would be appreciated! Thank you!

Bob

Are you looking for something like this?


<html>

<head>

<style type="text/css">

body { background: url('minter-body-bg.png'); }

img { position: absolute; bottom: 0; left 0; }

#text { margin:0 auto; width: 400px;}

</style>

</head>

<body>

<div id="text">
<h1>Who is Minter Tweed?</h1>
</div>

<img src="minter-blur.png" />

</body>

</html>

mwdewitt

Yeah, that works after a little modification to the background URL and image source. So, I do not need to reference a new CSS file? So, how do I tell the website that I want it to be 960 pixels wide? Sorry if these are stupid questions. I have always relied on a CSS file to handle such things. Thank you!

This is what I have so far...

<?php
    /* Template Name: Minter */
?>

<html>

    <head>

        <style type="text/css">

            body { background: url('/wp-content/themes/blank/images/minter-body-bg.png'); }

            img { position: absolute; bottom: 0; left 0; }

            #text { margin:0 auto; }

            h1 { font-family: Myriad Pro, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 2.45em; font-weight: bold; text-shadow: #000000 0px 0px 6px; }

        </style>

    </head>

<body>

<div id="text">
    <h1 align="center">Who is Minter Tweed?</h1>
</div>

<img src="/wp-content/themes/blank/images/minter-blur.png" />

</body>

</html>

Is there any way to align the centered text vertically on a website? I found this here, but I can not seem to implement it properly. Thank you again for any help you can provide!

Bob

Well this was just a quick example I tested on my laptop - of course, you can just add the css code to your css stylesheet you already have, but then you would need to give the body for this template a special id (like ) and reference to it accordingly in the css: body#mycustompage { background: url('...'); }. Otherwise all of your pages on your website would have that background. Same goes for the css for the img, the #text and the h1 of course. I think it's just personal taste how you want to do it - the way I see it, if it's only such a small page with only so little css, you can do it internal like I did above.

Also, what exactly do you want to be 960px wide? Because you said you wanted the background image over the whole page... If you want the image of the person (minter-blur.png) to be on the bottom left of a 960px wide site, just wrap it in a 960px wide div.

Regarding the vertical aligning - I have no clue. I've actually been wondering about that for a while as well, but couldn't find any good resources for that.

mwdewitt

Thank you, once again. Yeah, I have been looking around Google for a good answer to the vertical alignment issue and there does not seem to be a good solution for it. The one provided by W3 Schools is dependent on an image source. Oh, well, thank you for getting me this far.

Okay, final question. How do I make it so the blurry image is non-selectable? This is what I have so far...

Bob

You can add

-moz-user-select: none;
-webkit-user-select: none;
user-select: none;

to your img tag. So it would be like

img { position: absolute; bottom: 0; left 0; -moz-user-select: none; -webkit-user-select: none; user-select: none; }

I've never used that before though - so don't sue me if I'm wrong. Glad to help you though :)

mwdewitt

It sort of works. It makes it so you can not highlight the image, which is good enough for me. But you can still take your mouse and click on the image and drag it to your desktop. C'est la vie. Thanks, once again!

mwdewitt

Okay, one more tiny, little question. This is what I have thus far. I used a countdown generator from here. How do I lessen the space between the title and countdown? I know this has to be something really simple...

Adman

@mwdewitt

Are you trying to protect your image for copyright reasons? None the less you can do this through jQuery...

http://davidwalsh.name/image-protector-plugin-for-jquery

*edit*

Just input margin-bottom: and then how ever many pixels/em you need it to be spaced by. Since it is a header it automatically put's in the space.

mwdewitt

It is purely for aesthetic reasons. I was highlighting my text and if I took my mouse too far to the left it would highlight the image, placing a big, blue transparent square over the image. So, the code that @Bob gave me works fine for what I want. And thank you for pointing out that all I needed to do was add "margin-bottom" to my code. Everything is the way I want it now. Thank you, guys!

treehouse : what would you like to learn today?

Forums

[Solved] HTML & CSS Issues