I am entering HTML and CSS and it won’t do anything!

  • wearpurdy

    (@wearpurdy)


    6 years, 7 months ago

    I am just trying to do a simple hero image that spans the page of my site.

    I use this site and it works great:

    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hero_image

    As soon as I enter it into the HTML section and refresh, it doesn’t do anything! What am I doing wrong???

    <html>
    <head>
    <style>
    body, html {
    height: 100%;
    margin: 0;
    }

    !important
    .hero-image {
    background-image: url(“http://sweaterbarnhockey.com/wp-content/uploads/2017/09/SB-Ice-Banner.jpg&#8221;);
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    }

    .hero-text {
    text-align: right;
    position: absolute;
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
    color: #1b2a5e;
    }

    .hero-text button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 10px 25px;
    color: #1b2a5e;
    background-color: #ddd;
    text-align: center;
    cursor: pointer;
    }

    .hero-text button:hover {
    background-color: #555;
    color: navy;
    }
    </style>
    </head>
    <body>

    <div class=”hero-image”>
    <div class=”hero-text”>
    <h1 style=”font-size:50px”>SweaterBarn</h1>
    <p>Simple Custom Hockey Jerseys</p>
    <button>Design Your Sweaters Now</button>
    </div>
    </div>

    <p></p>

    </body>
    </html>

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Pioneer Web Design

    (@swansonphotos)

    6 years, 7 months ago

    1. Do not enter CSS in the HTML editor. When adding CSS use the Theme Customizer CSS option, or a Custom CSS Plugin, or a Child Theme.
    Add just this:

    
body, html {
height: 100%;
margin: 0;
}

/* The !important line here is improper */

.hero-image {
background-image: url("http://sweaterbarnhockey.com/wp-content/uploads/2017/09/SB-Ice-Banner.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.hero-text {
text-align: right;
position: absolute;
top: 50%;
left: 65%;
transform: translate(-50%, -50%);
color: #1b2a5e;
}

.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: #1b2a5e;
background-color: #ddd;
text-align: center;
cursor: pointer;
}

.hero-text button:hover {
background-color: #555;
color: navy;
}

    2. You do not need to add the Body or html elements, these are done with your theme’s templates. So, add only this to the editor:

    
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">SweaterBarn</h1>
<p>Simple Custom Hockey Jerseys</p>
<button>Design Your Sweaters Now</button>
</div>
</div>
<p></p>

    How that all works with your theme depends on the theme.

    What did you intend the button to do?

    Also, always use a Plain Text Editor when copy and pasting code.

    • This reply was modified 6 years, 7 months ago by Pioneer Web Design. Reason: fix OP error in CSS
    Jacob Peattie

    (@jakept)

    6 years, 7 months ago

    You’re trying to put a full HTML document inside the Text editor of the page. That’s not how WordPress works. Firstly, the Text view of the post edit screen is not a true HTML editor, as not all tags are allowed, some empty elements are automatically removed, and paragraph tags are replaced with line breaks. Secondly, the post content is inserted into an existing HTML document so can’t contain <html>, <body>, or <style> elements.

    You might get most of the way there if you put the contents of the <style> tag into the Additional CSS section of the Customiser, and then the contents of <body> into the post editor. But it’s not a reliable way to do this.

    You should look into integrating this element into your theme’s templates, with a custom Page Template, or if you want to include elements like this in page or post content, a Shortcode.

    Thread Starter wearpurdy

    (@wearpurdy)

    6 years, 7 months ago

    Christ.

    Well clearly I was doing that wrong hahah.

    I entered the CSS part as you said into the Theme Customizer Custom CSS.

    Then, I added the HTML part into the HTML tab of the page editor.

    I end up with this:

    http://sweaterbarnhockey.com/ or link to screen shot https://ibb.co/mWVLmv

    Closer, but no cigar.

    Pioneer Web Design

    (@swansonphotos)

    6 years, 7 months ago

    This seems to work a bit better:

    
.hero-image {
    background-image: url("http://sweaterbarnhockey.com/wp-content/uploads/2017/09/Ice-Banner.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-text {
    text-align: right;
    color: #1b2a5e;
    margin: 1em;
    padding: 1em;
}
    Thread Starter wearpurdy

    (@wearpurdy)

    6 years, 7 months ago

    Beautiful.

    So here is where we are now:

    https://ibb.co/fVQ9Da

    I can’t thank you enough Pioneer for getting me this far.

    I basically want to that that image and do this with it:

    https://ibb.co/cLqy6v

    I made that in Photoshop and I am hoping there is a way to pay with the CSS to do that.

    Thread Starter wearpurdy

    (@wearpurdy)

    6 years, 7 months ago

    I am no realizing that something in the theme is blocking me from having a max width image.

    I added max-width 100% to the above and it did not work.

    Underneath the custom css, I checked off “Start Fresh, don’t use the theme’s CSS”.

    It worked, but every other style in the entire site was off.

    Does anyone have a way to override the “global” CSS to let this custom css have a max-width image?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘I am entering HTML and CSS and it won’t do anything!’ is closed to new replies.