[Support request] Apply existing Posts custom CSS to Pages?

[Morgan]

Could u save me some time by telling me if this will work, and if so what classes I need?

I’m assuming I can just add the Page classes to my existing custom Posts CSS?
I want it exactly the same as Posts, title, padding, will have custom sidebar content (w’ Simple Page Sidebars plugin), use same layout, containers.

Post: http://storyclusters.com/video-for-business-using-a-presenter-vs-mere-mortals-2/
Page: http://storyclusters.com/camera-fright/

[Tom]

Hi there,

Which CSS are we talking about specifically? Can you share it here?

[Morgan]

I’ll try to clarify.

I want the same layout on Pages as on my Posts.
I had assumed that all the Custom CSS for Posts (that you guys helped me so much with) would carry over to Pages, i.e. title over feat img, page padding, etc.

I assumed this because there are shared classes on both, i.e.
PAGE: <h1 class="entry-title" itemprop="headline">Camera Fright</h1>
POST: <h1 class="entry-title" itemprop="headline">Video for Business: broadway works with fancy tinsel Golem</h1>

I’ll have sidebars for both Posts and Pages (i’ll change the sidebar widgets for Pages later), but want the same layout, containers.

Example pages:

POST: http://storyclusters.com/video-for-business-using-a-presenter-vs-mere-mortals-2/

PAGE: http://storyclusters.com/camera-fright/

[David]

Hi there,

the CSS is only being applied to the .single-post – you would also need to include the .page in those rules. So wherever there is a .single-post you would need to add a .page selector. For example:

.single-post .inside-article {

becomes:

.single-post .inside-article, .page .inside-article {

Repeat that for each of the single post rules for that CSS and it will apply to pages also.

[Morgan]

Hi David,

Doing so has produced some bizarre layout breaks I haven’t got my head around.

PAGES seem to now work as intended, but it’s broken POSTS:

http://storyclusters.com/video-for-business-using-a-presenter-vs-mere-mortals-2/

I left: .single-post .entry-content, .entry-meta (adding .page here broke even more)

But did add .page to every other occurrence of .single-post.

Also, can you pls tell me what I need to crop the top of .featured-image (to make less high) for all posts+pages. Every permutation I’ve tried breaks the (before latest broken) layout.

[Morgan]

– – EDIT: fixed, above still broke – –

[Leo]

Sorry what is still broken?

[Morgan]

See a blog post, above, vs page: http://storyclusters.com/our-process/

Also just noticed my bg color of mobile menu overlay has disappeared, and same happened 2 days ago on sticky bg and couldn’t figure why (had to redo css for sticky bg). Can you pls review my CSS and tell me what’s wrong?

[Leo]

I’m really not sure which element I should be looking at and what is not working.

Have you checked over your CSS to make sure there are no syntax errors?

I took a quick peek and spotted this line missing semi-colon:
.custom.slideout-toggle {display: inline-block !important}

Might be good to ran it through this site:
https://jigsaw.w3.org/css-validator/

[Morgan]

That is valid CSS (and validates as such).

Yes, additional CSS in customizer shows errors, all good.

Seems u haven’t read above? This is re David’s instructions.

[Leo]

Ok let’s take a step back as I’m a little confused. (David is on vacation unfortunately).

Can you please
– Link me to the page I’m supposed to be looking at.

– Copy the paste the CSS that is not working here (highlight the code and click the code button in the editor).

Thanks 🙂 We will get it sorted.

[Morgan]

I’ve reviewed above and it’s a pretty clear narrative:
– Added CSS for PAGES to appear as POSTS.
– Worked for PAGES, broke POSTS.
(all other points were asides)

See page and post links above.

RELEVANT CSS:

/* BLOG layout */
/* _META + CONTENT Padding*/
/* _content - single TABLET+DESKTOP */
.single-post .entry-content, .entry-meta {
  padding: 20px 17% 5% 5%;
  margin-bottom: -15px; } 

/* _SINGLES */
/* _padding */
.single-post #primary, .page #primary {
  padding: 0 1% 0 2%; }
/* _Titles */
/* _above 640, below 1290 */
@media (min-width: 640px) {
  .single-post .inside-article, .page .inside-article {
    display: grid;
    grid-template-rows: auto auto auto auto;  }
  .single-post .inside-article, .page .inside-article>* {
    grid-column: 1;  }
  .single-post .featured-image, .page .featured-image {
    grid-row: 1 / 3;
    margin-bottom: 0 !important;  }
  .single-post .entry-header, .page .entry-header {
    grid-row: 1 / 3;
    align-self: end;
    padding: 40px 40px 0px;
    background-color: #fff;
    width: 70%;
    margin-left: -40px; }}
/* _above 1290 */
@media (min-width: 1290px) {
  .single-post .inside-article, .page .inside-article {
    display: grid;
    grid-template-rows: auto auto auto auto;  }
  .single-post .inside-article, .page .inside-article>* {
    grid-column: 1;  }
  .single-post .featured-image, .page .featured-image {
    grid-row: 1 / 3;
    margin-bottom: 0 !important;  }
  .single-post .entry-header, .page .entry-header  {
    grid-row: 1 / 3;
    align-self: end;
    padding: 40px 40px 0px;
    background-color: #fff;
    width: 60%;
    margin-left: -40px;  }}
/* _hide-sidebar below 1095*/
@media (max-width: 1095px) {
  .single-post #primary, .single-post #right-sidebar, .page #primary, .page #right-sidebar{
    float: none;
    width: 100%;
}}

[Morgan]

It’d be better for you to track live CSS – I’m working on it now, tweaking as I go. Will update anything pertinent here.

UPDATE: I and others on WP have experienced issues with ‘code snippets’ plugin with WP 5.2.1 (my workflow: test CSS in “additional CSS” for live changes and when it’s tested and working, I paste it into a code snippet).
I can’t say for certain which CSS classes *weren’t* being applied, but I can confirm weirdness was going on – disabling the code snippet and pasting all 243 lines of custom CSS into “additional css” has immediately shown changes. Fun times. Onto debugging.

[Leo]

Hmm I don’t use Code Snippets for CSS at all so I’m not sure what is causing it.

Glad it’s all working now 🙂

[Morgan]

It’s not working, that’s the point, see above. Your as yet impending helpful response is appreciated.

[Author]

Posts