CSS changes for changing bulk pages (grouping pages)

Hi,
i need some help with a few things.

the goal is to find a way of changing the CSS codes of multiple pages so that all the current pages are applied with the same changes + but also any future pages can be easily added to this group so that the changes will be applied in to them too.

1) is there a way to classify pages into categories so that they can be easily added to those groups? from the wp-admin / page edit area?)

2) using those groups can we define some CSS changes that will apply only to them?

3)CSS changes
- changes to do - http://monosnap.com/image/fCrn2pvDDASHs7X4KvGb2hjkm4Euio

1) Title needs to be smaller approx 1/5th
2) Title needs to be in lowercase
3) A margin added between the Title and Photograph.
4) add another margin between photograph and main text
5) change the "back to members" link on the bottom right from <h3> to <h5>

here is a link of the one of the member's page - http://tinyurl.com/pc7u7tj
here is the main page containing all the pages - http://tinyurl.com/qff2ahp

Support access is open

Thanks
Tom

  • Vinod Dalvi
    • WP Unicorn

    Hi Tom,

    I hope you are well today and thank you for your questions.

    1) is there a way to classify pages into categories so that they can be easily added to those groups? from the wp-admin / page edit area?)

    2) using those groups can we define some CSS changes that will apply only to them?

    By default you can't assign categories or tags to the pages but you can try using any of the following plugins to achieve it.

    https://wordpress.org/plugins/add-category-to-pages/
    https://wordpress.org/plugins/post-tags-and-categories-for-pages/

    Alternatively you can create a custom page template as described in the following page and assign that created template to the pages where you want to apply the CSS changes.

    https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/#creating-custom-page-templates-for-global-use

    Use the following respective CSS code to achieve this changes.

    1) Title needs to be smaller approx 1/5th

    Change the font size in the code to whatever you want.

    .page .entry-header .entry-title {
     font-size: 18px;
    }

    2) Title needs to be in lowercase

    .page .entry-header .entry-title {
      text-transform: lowercase;
    }

    3) A margin added between the Title and Photograph.

    Change the bottom margin value in the code to whatever you want.

    .page .entry-header .entry-title {
      margin-bottom: 15px;
    }

    4) add another margin between photograph and main text

    Change the bottom margin value in the code to whatever you want.

    .page .entry-content img {
      margin-bottom: 15px;
    }

    5) change the "back to members" link on the bottom right from <h3> to <h5>

    You have to make this change in the full width page template file of your theme.

    Would you mind if I logged in to your site and make this change myself? This might help get to the bottom of this faster. If this is ok, just grant me temporary admin access to your site by clicking "Grant Access" button in the WPMU DEV Dashboard Settings as described on the following page and reply on this thread after granting it?

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    You can add the above CSS code in the style.css file of your child theme or add it in your site using the following plugin.

    https://wordpress.org/plugins/simple-custom-css/

    You can combine the above provided CSS code as following.

    .page .entry-header .entry-title {
     font-size: 18px;
     text-transform: lowercase;
     margin-bottom: 15px;
    }
    .page .entry-content img {
      margin-bottom: 15px;
    }

    Best Regards,
    Vinod Dalvi

  • Tom
    • Code Wrangler

    Hi Vinod,
    Thanks very much for the css codes, will try implement them shortly, i was looking into this link you provided https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/#creating-custom-page-templates-for-global-use and also this youtube videohttps://www.youtube.com/watch?v=aUxDz7vXilQ however when i check the index.php file or wp-blog-header.php or wp-load.php files i cant find which code needs to be copied into the new custom page template as a starting point. could you clarify which file and what code needs to be copied into a new custom page template prior to adding the css changes you recommended?

    Thanks
    Tom

  • Ash
    • WordPress Hacker

    Hello @Tom

    I hope you are well today.

    You are looking at the core files, never touch those files :slight_smile:

    Please go to /wp-content/themes/ACTIVE-THEME/ and there you will see a file called page.php. Copy that file and rename to my-template.php.

    Then add the following at the beginning of that file:

    <?php /* Template Name: My Template */ ?>

    Now the pages, you want to show using this template, edit those pages and in right side you will see a meta box called - Page Attributes. Here you can select My Template as page template.

    At the bottom of that template, put the css that Vinod provided, using style tag, like:

    <style>
    HERE GOES VINOD'S CSS
    </style>

    Hope it helps :slight_smile: Please feel free to ask more question if you have any.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.