Home Forums Weaver Xtreme Theme CSS styling of page with posts

Topic Resolution: Answered
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #68743
    Answered
    Tooni
    Participant

    I want to modify some elements of a page with posts, like the font size of the post titles, the size of the featured image and maybe also the length of the excerpt.
    I found already the “Misc Options” for the template and the field to enter some CSS rules.
    However – I don’t know which rules to enter. Can you give me some hints how to use this?

    Thank you and regards, Tooni

    #68744
    Weaver
    Keymaster

    I don’t know how much detail you need, but I’ll start with the assumption that you have a relatively good understanding of CSS.

    So, you can create as many custom CSS rules that apply specifically to a page with posts by prefixing all those rules with .page-template-paget-posts – that will confine them to page with posts.

    .page-template-paget-posts .post-title {font-size:150%;}

    for example.

    You can use your browser’s developer tool (or simply view page source) to look at the HTML content and pick out the specific classes wrapping different parts of the page content.

    #68746
    Tooni
    Participant

    Thank you for your help.
    Do I understand correctly that I should enter your above example in the CSS field of the Misc Options of the page to be modified? If yes: I have tried and it doesn’t change anything.
    If your example was intended to be put somewhere else, I should explain that I don’t want to activate these styling for all pages with posts, but only for one specific page.

    Btw: When I use my browser’s developer tool I see a lot of classes, but I never know which to use. In my example I saw
    class="post-title entry-title font-serif" itemprop="headline name"
    and for me it is not clear which to use and where I should see the additional page-template-paget-posts element?

    #68748
    Best Answer
    scrambler
    Moderator

    This reply has been accepted as the best answer.

    No, the misc. option is not the place for CSS rule.

    But first let us go into more details for each of your requests.

    • Font size of the posts titles:

    Do you want the same settings for all post pages, or different?

    If you want to change it globally, you can do that in
    Customizing ▸ Typography > Post Specific

    If you want to change them only on that specific page, you can add the rule below to the Theme Global Custom CSS rule box, replacing xxx by the page ID#

    .page-id-xxx .post-title {font-size:3em;}

    • The size of the featured image:

    This is a theme setting that is located in
    Customizing ▸ Images > Post Specific

    Use the one that matches your case (blog page showing excerpts, or showing full posts)

    • The length of the excerpt:

    This is a theme settings found in
    Customizing ▸ Layout > Post Specific

    If you need more detailed CSS, you will need to be specific and post a link to your site page

    #68749
    Tooni
    Participant

    @scrambler: Thank you also to you.

    Your solution for changing the font-size works fine. I’m not quite happy with specifying a page-id – but it’s okay.

    I’m afraid the other suggestions for changing the featured image size and the excerpt length are global definitions and will have an impact on all pages.
    This is not intended. It’s just one very specific page which I want to have different settings. All the other pages, title-sizes, image-sizes and excerpts are okay and I don’t want to touch them. Only for one single page.
    In the meantime I’m afraid this is not possible?

    #68750
    scrambler
    Moderator

    If you don’t like using Page ID, the only solution would be to have the Plus plugin. The Plus plugin gives you the option oif a per page CSS box in the page editing page where you could put the rule without the page if selector.

    For featured image, Do you have more than one blog page?

    If you do and want to change featured image sizes on that one, we can do it with CSS.
    But because of quality concerned, it is best to only reduce the Featured image size rather than enlarge it.

    So the question becomes for the blog page where you want different featured image size, do you want it smaller or bigger?

    • If you want it smaller, be specific and give us the link to that blog page and we will give you the CSS to do that on that page.
    • If you want it bigger, then you should set the featured image to the bigger size globally, then give us the link to the other blog page where it should be smaller with specifics of how small, and we can provide CSS.

    As for the Excerpt length, there is no way I know to change that on a single blog page without involving a child theme and advanced PHP changes.

    But if the posts that appear on that blog page do not appear on others, you could use the manual excerpt on these post to make it whatever you need.

    #68752
    Tooni
    Participant

    @scrambler: Your suggestions made me reconsider my initial ideas and made me learn some more settings for the size of title lines and featured images, e.g. I didn’t know that sizes can be set different for excerpts. That’s exactly what I wanted to do and finally I also like to have the same settings for all my blog pages.
    I’m still playing around with some settings and different font sizes, but I consider my question as solved.
    Thank you all very much for your help and for the excellent theme!

    Regards, Tooni

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