Centric Pro: free-banner not working

[Coding Newbie]

I have the following CSS for free-banner-wrapper and free-banner:

.free-banner-wrapper {
    width: 85px;
    height: 80px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 2;
}

.free-banner {
    font: 400 16px/1.1 'Oswald', 'Helvetica Neue', Helvetica, sans-serif;
    color: #ffffff !important;
    text-align: center;
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
    position: relative;
    padding: 22px 0 5px 0;
    left: 14px;
    top: -9px;
    width: 120px;
    background-color: #59B285;
}

And I put in the following HTML to display the image with the free banner:

<div class="free-banner-wrapper"><div class="free-banner">FREE</div></div>
<div class="portfolio-featured-image first alignnone"><a href="http://www.codingnewbie.com"><img src="http://codingnewbie.com/wp-content/gallery/video-cover-images/Tutorial-1-IDE.png" alt="" /></a></div>

I'm quite new to HTML/CSS, so I apologize if I'm missing something obvious here. Thank you in advance for your help!

http://www.codingnewbie.com/courses/cpp

[jbergen]

Hi,

Your HTML/CSS look okay, but where did you put the HTML? I looked at the HTML on your site and couldn't find it anywhere.

Jamie

---

Jamie @ Ladebug Studios

[Coding Newbie]

First of all, thank you for the reply. I posted the HTML in the 'Edit Page' page, in the text tab. I'm not even sure if this is the right way to go about doing it.

[jbergen]

Okay, just so I'm clear, did you go to Appearance -> Editor in the admin panel and edit a text file there? If so, which one did you add the HTML to? It will say under "Edit Themes" which file you're editing, and there's a list of files you can edit on the right.

The next question is where you want the banner to go. Often, you can find a hook in the Genesis framework that will allow you to insert the content in a specific position.

Jamie

---

Jamie @ Ladebug Studios

[Coding Newbie]

I didn't add any HTML to the Editor. I went to Pages -> All Pages -> C++ Tutorial Series (the page we're talking about) to add the HTML. When I use the Inspect Element feature on the page it looks like the "entry-header" header class isn't wrapping around the image like it's supposed to. If I'm right then that is the main reason why the free banner isn't shown in the upper right hand side of the image like it's supposed to (that's where I want it, btw). Here is the new HTML I have for it, which still isn't working:

<header class="entry-header">
<div class="free-banner-wrapper">
<div class="free-banner">FREE</div>
</div>
<div class="portfolio-featured-image first alignnone"><a href="http://www.codingnewbie.com/ide-visual-studio-13"><img src="http://codingnewbie.com/wp-content/gallery/video-cover-images/Tutorial-1-IDE.png" alt="" /></a></div>
</header>

[jbergen]

Okay! I think I got it. The element is there, but it's hidden underneath the red menu bar. To fix this, make two tweaks to the CSS:

1) Change the .free-banner-wrapper rule to have top: 160px; as follows:

.free-banner-wrapper {
    width: 85px;
    height: 80px;
    overflow: hidden;
    position: absolute;
    top: 160px;
    right: 0px;
    z-index: 2;
}

2) Remove position: relative; from .free-banner:

.free-banner {
    font: 400 16px/1.1 "Oswald","Helvetica Neue",Helvetica,sans-serif;
    color: #FFF !important;
    text-align: center;
    transform: rotate(45deg);
    padding: 22px 0px 5px;
    left: 14px;
    top: -9px;
    width: 120px;
    background-color: #59B285;
}

Now the only issue is when the red menu bar collapses on small screens. You'll need to use a media query to adjust the absolute positioning of the New banner in that case.

Jamie

---

Jamie @ Ladebug Studios

[Coding Newbie]

Alright, so I changed the lines of CSS that you told me to, and now I can actually see the free banner (yay), but it's in the upper right hand side of my background image at the top of the page. Here is a picture to show you what I mean:

I'm thinking it has something to do with my "entry-header" header class that everything is wrapped in, because when I inspect the element on my page it doesn't show it wrapping around the image itself like it should.

Thank you SO much for your patience with this. Looks like I know who to turn to when I need some serious help with my website development. 😉

[black9design]

set position: absolute on .free-banner

---

I specialize in child theme customizations and The Dynamik Website Builder
Visit me here: Black9Design.com | ParkerWadeSmith.com | AllThingsGenesis.com

[jbergen]

Happy to help! I'm able to recreate the image you posted by scrolling just a little ways down the page. When I'm all the way at the top, things look good and the banner is not clipped, but when I scroll down, the red menu bar collapses halfway, and then there is a gap between it and the New banner before it starts to overlap the New banner. Does that make sense, and is that the problem you're trying to fix?

Regarding the "entry-header", I do see something funny in your HTML markup. There's an empty "entry-header" element before the entry-content div that looks like this: <header class="entry-header"></header>. Then there's a second "entry-header" inside "entry-content" that does wrap around the Free banner markup. But it also wraps around the first portfolio-featured-image div, which I'm guessing it shouldn't. Maybe you can put the banner markup inside the currently empty header (the one before entry-content) and get rid of the second "entry-header".

I hope some of that made sense! Feel free to follow up.

Jamie

---

Jamie @ Ladebug Studios

[jbergen]

I just realized you probably want the free banner above the red menu at the top. In that case, change .free-banner-wrapper back to top: 0px; and then add z-index: 1000; to that rule:

.free-banner-wrapper {
    width: 85px;
    height: 80px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1000;
}

Was that what you were looking for?

Jamie

---

Jamie @ Ladebug Studios

[Coding Newbie]

Sorry for how long it took to respond, but I was looking for the free banner to be in the upper right corner of each of the tutorial video thumbnails. I apologize for the lack of clarity.

[jbergen]

Got it!

In that case, you'll need to wrap the banner around each video thumbnail individually. I was able to get that using this HTML for each thumbnail:

<div class="portfolio-featured-image alignnone">
    <div class="free-banner-wrapper">
        <div class="free-banner">
            FREE 
        </div>
    </div>
    <a href="http://www.codingnewbie.com"> <img scale="0" src="http://codingnewbie.com/wp-content/gallery/video-cover-images/Tutorial-2-Hello-World.png" alt=""></a>
</div>

And this CSS:

style.css, line 2404 - note addition of position: relative;

.portfolio-featured-image {
    overflow: hidden;
    float: left;
    margin-left: 2.5641%;
    position: relative;
}

style.css, line 2345 - change to top: 0;

.free-banner-wrapper {
    width: 85px;
    height: 80px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0px;
    z-index: 2;
}

The reason you're adding "position: relative;" to .portfolio-featured-image and wrapping that around the banner is because that will make the banner wrapper (which has "position: absolute;") position itself relative to the thumbnail. Only slightly confusing. 😉

This is the result - I just did one, but you can do the others the exact same way:

Also, I'm not sure what you want the banner to look like, but if you remove "position: absolute;" from .free-banner, you'll get this:

I might also recommend using a "one-third" column class for your video thumbnails so that they stack nicely (and don't shrink as much) on smaller screens. You can follow up with me if you want to do that.

---

Jamie @ Ladebug Studios

[Coding Newbie]

That is perfect, thank you! And yes, I'm more than willing to change it to the method you suggested if it'll improve the user's experience.

[jbergen]

I'm glad you've got the FREE banner where you want it! Also, I took a quick look at your site and noticed that the alignment of thumbnails was off. To fix that you'll want to add the "first" class to the first thumbnail image (<div class="portfolio-featured-image first alignnone"> ).

Jamie

---

Jamie @ Ladebug Studios

[Coding Newbie]

Oh right, sorry. I was aware of that, haha. I am still interested in utilizing a "one-third" column class if you're still willing to show me how. 🙂

[jbergen]

Your page is looking good! So I took a look, and I decided that an easier option than using "one-third" is to just add a media query to adjust the width and margin of the .portfolio-featured-image class on small screens.

This is what you'll add:

.portfolio-featured-image {
    margin: 0;
    width: 100%;
}

And you'll add it to the media query for screen widths up to 480px. So the adjusted media query will look like this (style.css, line 2853):

@media only screen and (max-width: 480px) {

	 body,
	 .home-featured .home-widgets-1 {
		 font-size: 16px;
 	}
	
 	.header-image .site-title > a {
	 	background-size: contain !important;
	 }

	  .header-image .bumper {
		min-height: 180px;
	}
	
	.portfolio-featured-image {
		margin: 0;
		width: 100%;
	}
	
}

Here's what it looks like before the media query adjustment:

And after:

---

Jamie @ Ladebug Studios

[Webmaster]

Didn't see there was a second page to this post, but anyway...

http://my.studiopress.com/tutorials/content-column-classes/

---

“If it works, mark the post as [Resolved] so others will feel comfortable trying the solution on their website.“

[Author]

Posts