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

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

Home Forums Support Apply existing Posts custom CSS to Pages?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #944966
    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/

    #945387
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    #945671
    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/

    #945900
    David
    Staff
    Customer Support

    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.

    #949556
    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.

    #949596
    Morgan

    – – EDIT: fixed, above still broke – –

    #949891
    Leo
    Staff
    Customer Support

    Sorry what is still broken?

    #949917
    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?

    #949971
    Leo
    Staff
    Customer Support

    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/

    #950215
    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.

    #950218
    Leo
    Staff
    Customer Support

    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.

    #950253
    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%;
    }}
    #950266
    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.

    #950550
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #950606
    Morgan

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

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.