Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
You are here: HomeForum
Welcome, Guest

Different Parallax Background
(1 viewing) (1) Guest
  • Page:
  • 1

TOPIC: Different Parallax Background

Different Parallax Background 7 years, 10 months ago #31347

Hi,

Is there a way to change the background of the yt_spotlight4 when it is used in other page with different module?
The topic has been locked.

Re: Different Parallax Background 7 years, 10 months ago #31366

Dear orphicpixel

Yes, you can use the class of body to override css of this block: yt_spotlight4 for the home page: prntscr.com/dwo2uc.
edit/add css in/templates/sj_university2/css/template-default.css

.homepage #yt_spotlight4 {
background: url(../images/bg/bg-2.jpg) no-repeat 0 0 fixed;
}

and the backagound of this block for other page use the css below:

#yt_spotlight4 {
background: url(../images/bg/bg-2.jpg) no-repeat 0 0 fixed;
}

note change the background image again.

Thanks
The topic has been locked.

Re: Different Parallax Background 7 years, 10 months ago #31377

Wow, thanks! That's what I am looking for the whole day on how to target the parent class and id.

But I am planning to use the same method to at least 10 pages with 10 different background. Is that possible?
Last Edit: 7 years, 10 months ago by orphicpixel.
The topic has been locked.

Re: Different Parallax Background 7 years, 10 months ago #31407

Dear orphicpixel

It is not possible. Please create more the block the same prntscr.com/dxgidy
in \sj_university2\layouts\layout1.xml
eg:

<spotlight4a html5tag="section" order="8" id="yt_spotlight4a">
<positions>
<position class="col-sm-12" type="modules" style="ytmod" >top6a</position>
</positions>
</spotlight4a>
<spotlight4b html5tag="section" order="8" id="yt_spotlight4b">
<positions>
<position class="col-sm-12" type="modules" style="ytmod" >top6b</position>
</positions>
</spotlight4b>
<spotlight4c html5tag="section" order="8" id="yt_spotlight4c">
<positions>
<position class="col-sm-12" type="modules" style="ytmod" >top6c</position>
</positions>
</spotlight4c>

and decalare the position: top6a, top6b, top6c in \sj_university2\templateDetails.xml
prntscr.com/dxgj3c

and add the css for your block:

#yt_spotlight4a, #yt_spotlight4b, #yt_spotlight4c {
display: block;
position: relative;
z-index: 1;
background: url(../images/bg/bg-2.jpg) no-repeat 0 0 fixed;
padding: 45px 0 50px;
margin: 0;
background-size: 100% 100%;
}

#yt_spotlight4b {
background: url(../images/bg/bg-2.jpg) no-repeat 0 0 fixed;
}
#yt_spotlight4c {
background: url(../images/bg/bg-2.jpg) no-repeat 0 0 fixed;
}

note change the background image again.

Thanks
The topic has been locked.

Re: Different Parallax Background 7 years, 10 months ago #31418

I went ahead and created new blocks. Thank you for your guidance
The topic has been locked.
The following user(s) said Thank You: anhqn

Re: Different Parallax Background 7 years, 10 months ago #31428

Dear orphicpixel

We will close this post now. If you have any other problems, please feel free to submit new post . We will check and answer via there.

Thanks
The topic has been locked.
  • Page:
  • 1
Time to create page: 0.25 seconds

Notification

Please find your issue via Suggested Posts before submitting your question. We have solved the most of issues and maybe your issue was solved before.

Latest My Topics

No posts to display.

Love all our templates?

Join our membership clubs starting at $49 only for access to all of our templates

Join Now
Home Pricing
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
SearchSupport
Magento Themes Magento Extensions Free Magento Extensions Prestashop Themes Prestashop Modules Magento 2 Themes