Entry Page Title Color Change/Individual Pages

Good Day Everyone,

My challenge is in being able to change the page title font color on different pages individually.
I do not want a global coverage with it.

With different backgrounds for some of the sections/specific areas of a topic, I need to change the fonts color to be readable and tie into the sections motif.

I have tried different css styling codes to no avail as yet.
Being a novice and still working on learning how to code I find it hard to get answers as to how to work with the X framework-set up as it is built differently with different names for things.

entry page title font color …just for a separate page, not global across the site.

I could sure use some help here please.

Silante’,

Jann

Hi There,

You can try adding this custom CSS under Theme Options > CSS:

.page-id-123 .entry-title {
color: #fff;
}
.page-id-456.entry-title {
color: #bbb;
}
.page-id-789 .entry-title {
color: #ccc;
}

The 123, 456, 789 numbers are your page IDs.

To find your page IDs, please take a look at this: https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

Hope it helps :slight_smile:

Thank you.

I saw that snippet of code when researching but did not try it.
I will apply it and let you know how it works.

Many thank you;s,

Jann

Sure, keep us updated.

Thanks.

It worked smooth as silk.
Thank you.

I have another quandary I am wrestling with if you
are willing to further assist me.

I have a full page video running on it and I need to get the text box background on top of a
a darker overlay. Like the shadow at the pages bottom/top of the footer-the shadow.
The dark smokey transparency so the text can be read easier.
Just the text area.
Just for this one page not global.

Is that possible?

I uploaded a screenshot to show you the page and area.
Thank you for your kindness and patience with me.

Jann

Hi Jeanette,

It depends on how you applied the video background. If you used the Sections background feature in the Cornerstone then you do have an option here.

Go to the Section in question and bring its options and click on the advanced mode of the background options to see more info:

You will see that you can add 2 layers of the backgrounds to a section. So the cool thing is that you can add the video as the lower layer background and use a solid color for the upper layer background. When you want to choose the color there is an additional value at the end which ranges from 0 to 1 and it is the opacity of the color. For example in the screenshot below I used the black color with the opacity of 0.3:

Play with the opacity value to find the best opacity suitable for the background and the text you add over that.

We have an article regarding the partials which include 2 videos on how to set the background which I think will help you a lot to get a grasp of details:

https://theme.co/apex/forum/t/elements-using-partials/213

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

I do not use cornerstone as every time I try to it messes my site up.
I hand code and have a better chance of not breaking my site.
It is not the editor it is my lack or not knowing what terms mean and how to apply them.

That said, I need a darker colored overlay and a way to apply it.
This is what I have been working with.

.entry-wrap { background-color: rgba(0. 0. 0. 575); }

background: rgba(255,255,255,0.5);
}

.entry-wrap {
background-color: rgba(255, 255, 255, 0.1);
}
I can’t get it to the smokey hue I want.

I need to page ID it as well so it is not global.

Any help would be very much appreciated.

Thank you,

Jann

Hi Jann,

If you want a darker opaque background for the container of the video content. you may use:

.entry-wrap {
    background: rgba(0, 0, 0, 0.5);
}

Please refer to this link for the possible color values in CSS: https://www.w3schools.com/cssref/css_colors_legal.asp

The code above will be applied to all of the pages so if you want to apply it to a specific page, what you can do is to add a body class value in the page setting.

Once you added a class value to the page, you can then update the code above to:

.the-page .entry-wrap {
    background: rgba(0, 0, 0, 0.5);
}

The code above assumes that the body class you have added to the page is the-page. Feel free to update it if you used a different value.

Hope this helps.

I will try this, I am so grateful for your help.
I am so excited to be able to have this result.

Thank you so very much…

Jann

Hi @webbjann,

You’re most welcome.

Feel free to ask us again.

Thanks.

I am sorry to report it did not work.
I even added !Important to it to see if it would help…it
did not work either.

I also placed it in the theme options css…
nothing changed anything.
Any suggestions too draw from?

Slainte’,

Jann

Hi @webbjann,

Sorry for the confusion. Please remove this CSS from your page’s Body Class.

.the-page .entry-wrap {
    background: rgba(0, 0, 0, 0.5);
}

Instead, just add the-page like this,

Then just add that this CSS to your global custom CSS

.the-page .entry-wrap {
    background: rgba(0, 0, 0, 0.5) !important;
}

Cheers!

You Did It!!!

I shall shout it from the mountains…You Are Amazing!!!

Thank you!

Jann

Happy to hear that.

Feel free to ask us again.

Thanks. Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.