Adding graphics between widgets and posts

[wickedsimple]

I am using the Lifestyle theme and I would like to put some graphics in between the different sections on the home page (main featured image, next block of two posts, then last block of 4 posts) and also between the widgets on the sidebar. Please see this link for a reference of what I would like to do: http://citycookin.com

How do I do this? My url is http://www.analisamendmentblog.com and the theme is Lifestyle. (I am just starting to build this out so it looks pretty rough right now! LOL!)

Thank you in advance!

Donna

http://www.analisamendmentblog.com

[Ben @ Inbound Creative]

Do you mean like about the featured box is a frying pan?

---

Award winning web design in Liverpool | UK based Genesis Framework web designer and developer

[wickedsimple]

Hi Ben,

That probably wasn't the best example, now that I look at it!

See this site: http://fiveandspice.com

I like how there is a graphic (in this case, a graphic that's a line) in between the different blog posts and also in between the widgets on the side bar. I would like to be able to do that.

I also love the graphic that is in front of each blog post title.

Thanks!

Donna

[Ben @ Inbound Creative]

Ah, okay.

That's not too difficult. You would – however – need to find your own graphics to do this. Using either of those sites' graphics would be stealing as they'll have either created them themselves/outsourced it or paid a licence fee.

In terms of the widgets, you'd need to add this code to the relevant classes (or add them):

.widget-title {
	background-image: url('xxx');
	background-repeat: no-repeat;
}

h4.widget-title {
	background-position: 0 20px;
}

Place your image's url where the three xxxs are.

Obviously, the background position's second value may need to be changed based on the size of the image.

---

Award winning web design in Liverpool | UK based Genesis Framework web designer and developer

[Ben @ Inbound Creative]

As for the headline, use this:

h1.entry-title {
	background-image: url('xxx');
	background-repeat: no-repeat;
	background-position: -xpx -xpx; /* Make these what ever it takes to position the image here you want it. */
	padding-left: xpx; /* Width of the background image plus some for space */
	padding-top: xpx; /* If necessary – might not be, otherwise 0 it */
	height: xpx; /* Height of the image – you may need to use !important on the height */
}

---

Award winning web design in Liverpool | UK based Genesis Framework web designer and developer

[wickedsimple]

Thanks so much, Ben. I am going to be creating custom graphics once I design the new logo.

For this example, I created a really quick graphic to use. But I can't get it to fit the correct way. This is the CSS I added:

.widget-title {
background-image: url('http://www.analisamendmentblog.com/wp-content/uploads/2014/08/samplegraphic.png');
background-repeat: no-repeat;
}
h4.widget-title {
background-position: 0px -15px;
}

I have played around with the background position and cannot get the image to be centered below the widget title.

Perhaps instead of doing it this way, can I put the sample graphic in between each widget "container"? See the sample cupcake that I have inserted in a text widget above the newsletter sign up box. Maybe put it there but without having the box around it??

Thanks for all of your help!

[Ben @ Inbound Creative]

That's a simple fix. Change the h4.widget-title text to say:

h4.widget-title {
   background-position: 50% 30px;
   height: 75px;
}

The background position controls where the background image appears – not the text.
The height just makes sure there is enough room for the image to appear with some space under the next to make sure it remains legible.

---

Award winning web design in Liverpool | UK based Genesis Framework web designer and developer

[wickedsimple]

Ahhh……briliant! Thank you!

Now one other item….I would like to put a graphic to serve as a divider between the blog posts on the home page. See the attached screen shot.

How would I do that?

Thanks again for all of your help!

Donna

[Ben @ Inbound Creative]

This one's a little different.

You'll need to add a class in your css file.

.home .featured-content .post {
   position: relative;
}

.home .featured-content .post:after {
   position: absolute;
   content: url('http://www.analisamendmentblog.com/wp-content/uploads/2014/08/samplegraphic.png'') no-repeat;
   left: 50%;
   margin-left: 78px;
}

It might need some tweaking code wise once it's up. Post here once it's live and I'll give you the final amendment.

---

Award winning web design in Liverpool | UK based Genesis Framework web designer and developer

[wickedsimple]

Hmm…that didn't seem to do anything. I wonder if it's the way the Lifestyle Pro theme is set up with widget for the Home Top, Home Middle, Home Left, Home Right instead of it being just a blogroll?

[wickedsimple]

I was able to add a text widget in the Home Top widget with an image and it looks like this will work!

[Author]

Posts