Centric .bumper Help

[Reggie]

Hi There!

I'm using the Centric theme and would like to know if anyone might know how to create two separate .bumpers in the header... one for the home page and one for all other pages. On my site, the current bumper works perfectly on all pages, however I need to make adjustments to the bumper on the homepage. My site is located at ... HomeProAcademy.com .

Thanks in advance for any help!

Reggie

http://HomeProAcademy.com

[Tom]

Hi Reggie,

What changes do you want to make to the bumper setup on the home page?

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Reggie]

Hi Tom!

Thanks for the response.

I would like to change the bumper image on the home page without changing the bumper image on all other pages. It seems as the theme is currently set up to use the same bumper image throughout. Any thoughts?

[Tom]

By "bumper image" do you mean the header image (your logo*), or the largely hidden image you've attached to the bumper DIV with your custom CSS? (what purpose does that image serve?):

.bumper {
    min-height: 160px;
    background-image: url("https://s3.amazonaws.com/amalyarealtygroup/HomeProAcademy/Site+Pics/HPA-Bumper.png");
}
 

* poking around, I found your logo is currently 1,680 x 1,121 px and 234.6 KB. It need only be about 20KB at 716px wide.
https://cldup.com/VYSBntVlGs.png

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Reggie]

By the bumper, I'm referring to the image just below the header (there's a pic of man & woman then a slightly smaller version of that same pic just above it). Looks like the Centric theme uses a main image AND a bumper image to make the header shrink feature work.

The bumper image on all the other pages work just perfectly. I'm looking for a way to customize in such a way that the bumper on the homepage can be a separate bumper image from all the remaining pages <home I'm explaining this well>

With regard to the logo, I made it that big and adjusted the size with css because it appears more crisp & clear. When I tried to you a smaller version of the logo, it appeared a little fuzzy.

Please forgive me, I'm by no means a web designer... I'm using tutorials & youtube videos to get this done. All my responses are coming from a "I thought this was the best way to do this" perspective.

[Tom]

The bumper is actually designed as an empty div that is used to keep the top 160px of page content visible when the shrinking header is un-shrunk (ie. Centric design has no 'bumper image'). Your adding a background image to the bumper makes two separate images appear when scrolling up and down the page.

I'd suggest:

1. Removing the bumper image.

2. On inner pages:
The additional background image you've added to .page-title repeats along the x-axis (L > R). To prevent this, add

.page-title {
	background-size: cover;
} 

To prevent the default , home page background image from displaying above your added ,page-title background image, add

body.custom-background.page,
body.custom-background.post {
    background-image: url('');
}

3. On the front page, the widget text covers the faces in the image. You could modify the image and/or move the widget south:

 .home-widgets-1 .widget {
	margin-top: 225px;
}

(No need to ask forgiveness to try different methods! I was just thinking that your readers and Google will appreciate lighter weight images. There's probably something 'best' in between.)

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts