Custom CSS in individual page possible?

Rinpondwriter

Hi,

I am slowly figuring out CSS, and looking around the forums and learning things, but I had a question.

Can I embed CSS code within an individual page, or do I need to create the css page in the advanced campaign settings?

I'm looking at making basic changes, such as fonts, headers, but want to look at the changes on a single page, instead of applying it to the whole campaign, or section of pages.

Is this possible?

Abersade

This is indeed possible. I prefer not to use inline styling, so my recommended method is to set the CSS in the Settings > Advanced > Custom CSS section as detailed in the example below:

To change the campaign background image for only a specific page

This requires you to get the slug class for the page in question, which is most easily done via inspecting the page. The slug class is added at the top of the code block in the first line of the body code, and will read something like .wiki-page-slug-main-page. The example below would set the main wiki page of the campaign site to the background I use here for my test bed.

.wiki-page-slug-main-page.campaign-public-layout .page-background {

background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/116239/backgrounds/523138/SMPTE_Color_Bars.jpg?1446494700);}

Abersade

Oooh, that did something fun.

Thaen, I know that updating the forum software isn't a priority, but I guess count this as another example? It does allow me another opportunity to post one of my favorite images of all time:

 

 

Rinpondwriter

Abersade, thank you! Also, your CSS campaign page is such a great resource.

thaen

@Abersade, thanks for the heads up!

I added a little overflow CSS to take care of that.