Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS HTML & CSS Issues

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #34694
    mwdewitt
    Member

    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!

    #88749
    Bob
    Member

    Are you looking for something like this?













    Who is Minter Tweed?








    #88754
    mwdewitt
    Member

    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…

    
    /* Template Name: Minter */
    ?>












    Who is Minter Tweed?








    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!

    #88757
    Bob
    Member

    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.

    #88758
    mwdewitt
    Member

    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…

    #88759
    Bob
    Member

    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 :)

    #88762
    mwdewitt
    Member

    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!

    #88767
    mwdewitt
    Member

    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…

    #88769
    mwdewitt
    Member

    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!

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.