Docs

[Paul R]

You’re welcome! 🙂

[mittavalley]

Hi there,

As we are in the Promo setting issue, I am writing here to get your support for another issue that I have just got a request to do.

I want to go back to the normal Integrity default Promo setting for ONLY THIS PARTICULAR PAGE. So, I used Promo element setting on Visual Composer. Then, I added a “post2” class on this setting. And then I customised CSS as follows but it didn’t work. It seems that the class “post2” that was set didn’t have any impact on. What is your suggestion? Thanking you in advance. Regards

url: http://work.mittavalley.com.au/sample-page/

.post2.x-promo-image-wrap img {
min-width: 100%;
}
.post2.img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.post2.x-promo {
overflow:hidden;
margin-bottom:1.313em;
border:1px solid #ddd;
border:1px solid rgba(0,0,0,0.15);
border-radius:4px;
box-shadow:0 0.125em 0.275em 0 rgba(0,0,0,0.125)
}
.post2.x-promo-image-wrap img {
min-width:100%
}
.post2.x-promo-content {
padding:1.5em;
background-color:#fff;
box-shadow:none
}

[Rue Nel]

Hello There,

Thanks for updating this thread. I would recommend what you have in mind. The best and easy way to do it is to have the given custom css only affect the homepage by adding a class selector .page-id-120. You may update the code and make use of this code instead:

.page-id-120 .x-promo-content {
  font-size: 20px;
}

.page-id-120 .x-promo {
	overflow: hidden;
	margin-bottom: 1.313em;
	border: 0px;
  box-shadow: none;
  border-radius: none;
}

.page-id-120 .x-promo {
    position: relative;
}

.page-id-120 .x-promo .x-promo-content {
  	padding: 10px;  
  	position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(255,255,255,0.75);
}

.page-id-120 .x-promo .x-promo-image-wrap {
    max-height: 249px;
    overflow: hidden;
}

.page-id-120 .x-promo .x-promo-image-wrap img {
    min-width: 50%;
    max-width: 329px;
    margin: 0 auto;
}

Please let us know if this works out for you.

[mittavalley]

Hi there,

It should have worked but it didn’t. I attached the class I add on the page that I want to display with its css style. I am wondering why it didn’t work. I cleared the cache as well.

Thank you very much Rue.

[Christopher]

Hi there,

Please find this code and remove position property :

.x-promo .x-promo-content {
  	padding: 10px;  
  	position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(255,255,255,0.75);
}

Please remove the class page-id-120, this page’s class is 2. This format of class generates automatically when you create the page, see the attachment.

So instead of .page-id-120 in your code use .page-id-2.

Hope it helps.

[mittavalley]

Hi Christopher,

Thanks for your opinion.

You are right if I remove position: absolute property in class .x-promo .x-promo-content, I will get the display I want. However, by doing so, it will have an impact on other pages ie Live page.

Let me explain a bit more, please bear with me, there are 2 scenarios here that are using Promo element to display image and text slightly different.

1.) Transparent background and text over the image (on Live page or page-id-442)
I would like to have a transparent background and text over the image. The screen “xpromo absolute.png” shows exactly what I want to display on Live page. It is perfect. But if I remove position:absolute property from the class .x-promo .x-promo-content as you suggested, it will push the text down beneath the image which is I don’t want to display like this for this page as shown in the screen “xpromo content.png”.

2.) Default Promo display (on Sample page or page-id-2)
I would like to display text beneath the image as per defaulted Promo setting in Integrity. Please refer to the attached file “xpromo pageid2 no absolute”.

How can I differentiate the style for these 2 different pages? I thought if I added a class for this particular page (“page-id-2”) and added a style for it, it should have made a change to what I want for this page only. If you noticed in my customised css earlier, I remove position property

.page-id-2 .x-promo .x-promo-content {
padding: 10px;
bottom: 0;
width: 100%;
background-color: rgba(255,255,255,0.75);
}

I don’t understand why the properties in class .page-id-2 .x-promo .x-promo-content didn’t do the job.

I hope I explain my issue clearly. I need your expertise to figure out please.

Thanking you in advance.
Regards

[Rue Nel]

Hello There,

Thanks for updating in! I will explains how the css selector works. This code code block will be applied to the entire site:

.class element {
  // your styling here
}

And on the other hand, this next block will only be applied to a particular page:

.page-id-123 .class element {
  // your styling here
}

Wherein 123 is the page ID number. To find the page ID number, please check it here: https://community.theme.co/kb/how-to-locate-post-ids/

So if you want to display the default promo content in some other pages, please only use the code with a page-id-123 by targeting the page which you want to modify the promo content.

Hope this helps.

[mittavalley]

Hi Rue,

That’s what my understanding is. It is why I added a page id to this class to change the promo content for this page. I refer to my thread #1358171. However, the code here didn’t do the job for me. What did I do incorrectly?

2.) Default Promo display (on Sample page or page-id-2)
I would like to display text beneath the image as per defaulted Promo setting in Integrity. Please refer to the attached file “xpromo pageid2 no absolute”.

.page-id-2 .x-promo .x-promo-content {
padding: 10px;
bottom: 0;
width: 100%;
background-color: rgba(255,255,255,0.75);
}

Thank you.
Regards

[Christopher]

Hi there,

Please update your code to :

.page-id-2 .x-promo .x-promo-content {
    padding: 10px;
    bottom: 0;
    width: 100%;
    background-color: rgba(255,255,255,0.75);
    position: relative;
}

Hope it helps.

[mittavalley]

Hi Christopher,

Yes, it works nicely. Perfect.

Thanks for all your support from your team.

Regards,

[Paul R]

You’re welcome! 🙂

[Author]

Posts