[Resolved] CSS related

Home Forums Support [Resolved] CSS related

Home Forums Support CSS related

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2033296
    Swadhin

    Please help me with the following:

    1. How to make my H1 center aligned only inside the article, not archives etc.? And, it should be displaying this effect (please refer this page and you’ll find the H1 is wider than the content. I’d like something equal.
    2. I have set a specific menu item with the CSS class nav-button. But, nothing happens! Any idea how to get the button there? I am looking to have this effect and styling for he menu button like this page has.
    3. I’d like to have my buttons display this effect when hovered. Please check the above link (please search for: “download it here” without quotes).

    I have shared my URL in the secret code box.

    Thanks so much,
    -Swadhin

    Thank you,
    -Swadhin

    #2034242
    Ying
    Staff
    Customer Support

    Hi there,

    Let’s handle 1 question at a time:

    it should be displaying this effect (please refer this page and you’ll find the H1 is wider than the content. I’d like something equal.

    I’m confused you want something equal, but you want to displaying this unequal effect, so do you want it or not?

    To center the H1 inside single post not archive, try this CSS:

    .single-post h1 {
       text-align: center;
    }

    Let me know if I miss anything.

    #2035126
    Swadhin

    Hi Ying,

    Thank you for replying. πŸ™‚

    That code didn’t work on pages so I used this code instead. Please let me know if it is correct to use this code or if I should change something.

    h1.entry-title {
        text-align: center;
    }

    By “equal” I meant something “similar”. So, in other words, I want to replicate that style to the exact pixel width (title is a bit wider and blog post is a bit narrow) for my articles and pages.

    Also, I have updated the second question, in order to avoid confusion.

    -Swadhin

    Thank you,
    -Swadhin

    #2035236
    Elvin
    Staff
    Customer Support

    Hi Swadhin,

    For the fonts, consider using Appearance > Customize > Typography to adjust font size for archive titles, page titles and post titles on archive page – https://share.getcloudapp.com/4guPp2z2

    As for the second question: I’ve inspected the page you’ve linked and I didn’t see any menu item that had nav-button class as shown here – https://share.getcloudapp.com/nOu5yomG

    Can you confirm if it’s added and saved to the target menu item you plan to turn into a button?

    A wise man once said:
    "Have you cleared your cache?"

    #2035428
    Swadhin

    Hi Elvin,

    I am sorry but maybe you didn’t understand the query.

    I did not ask about the font anywhere in the query. I have repeatedly asked how to get the layout similar. The one where the title is center aligned and a bit wider and the content (article) is a bit narrow than the width of the title. Please check the image.

    For the second question:

    I said, I have used the nav-button class in my website (linked in the secret box of the query. I still don’t see any buttons in the menu (of my website).

    So my question is, why is the button not appearing?

    And.. in case you can help me with the button’s appearance, please also help me with the code for styling the button in the way this website does for its own menu button.

    Thank you,
    -Swadhin

    #2036065
    David
    Staff
    Customer Support

    Hi there,

    in order to have the Title wider then the post content, the simplest method is to use a Block Element – Page Hero:

    https://docs.generatepress.com/article/block-element-page-hero/

    #2036709
    Swadhin

    Hi David,

    I am seeing the post in the content has different width for pages and for posts. I am not sure how that works. If you can help me why the content (& title)’s width is different in a page and a post and what to do to make them similar.

    Once they are similar, we can use the block element (as described by the tutorial you linked) to create the page hero.

    P.S. Is this (page hero) theme dependent?

    -Swadhin

    Thank you,
    -Swadhin

    #2036991
    David
    Staff
    Customer Support

    The post content size has been adjusted by either:

    a) A Loyout Element ( in Appearance > Elements ):

    https://docs.generatepress.com/article/layout-element-overview/

    or

    b) some Custom CSS added to your site. Which looks like this:

    #content {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    If i were a gambling man then i would bet on option a)

    P.S. Is this (page hero) theme dependent?

    Its a GP Premium function – which only works with the GeneratePress Theme, and therefore any Site in our library.

    #2037136
    Swadhin

    Got it David. You’re 100% right! πŸ™‚

    That’s actually by a page element (I added it but I think I need to add something for better memory too :P)

    David, I am not sure if I want a theme dependent workaround. (Not that I will leave GP, been with it since 2017 I guess) but in case. Can we achieve this with code?

    I want the content width (on pages without sidebar/s) to be 800px and the title to be (something that the page I linked as example) has.

    Thank you. πŸ™‚

    Thank you,
    -Swadhin

    #2037161
    David
    Staff
    Customer Support

    David, I am not sure if I want a theme dependent workaround. (Not that I will leave GP, been with it since 2017 I guess) but in case. Can we achieve this with code?

    Any solution i provide will be theme dependent – as it means moving the Title outside of the main content. So i am afraid i cannot provide a theme agnostic solution.

    The block element, like the layout element is a non-destructive change, so if you disable the elements or switch theme then title will return to the default theme position.

    #2037169
    Swadhin

    Awesome David!

    Thank you. I will go with the block element.

    Can you help me with the other two queries (above) please πŸ™‚

    Let me rephrase them both for you…

    I want my buttons to have the hover effect (bouncy/clicky etc) like buttons on this page.

    After doing so, how can I display this button or call it to appear in one of the menu items?

    Thank you,
    -Swadhin

    #2037952
    David
    Staff
    Customer Support

    Nav button styles:

    /* Nav button styles */
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #f00;
        color: #fff;
        line-height: 40px;
        border-radius: 2px;
    }
    /* Nav button hover colors - optional */
    .main-navigation .main-nav ul li.nav-button:hover a {
        background-color: #f00;
        color: #fff;
    }

    And hover effect for nav and theme button

    /* Nav Button and Button hover effect */
    .main-navigation .main-nav ul li.nav-button a,
    a.button {
        box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
        transition: transform 0.2s ease-in;
    }
    
    .main-navigation .main-nav ul li.nav-button:hover a,
    a.button:hover {
        transform: translate3d(0, 5px, 0);
    }
    #2038010
    Swadhin

    Hi David, thank you so much.

    Apologies for whatever non-techie things I say now, but if it makes sense, can you please take a look at them?

    Our button, upon applying the above code, feels a bit slower than theirs. (again, it might be just me but I feel this) and there’s this shadow thing in their button I think too that doesn’t appear in ours.

    This would be the last request in this support topic and I’d appreciate if you could take a look at this. πŸ™‚

    Thank you again,
    -Swadhin

    Thank you,
    -Swadhin

    #2038122
    David
    Staff
    Customer Support

    Updated CSS above, with box-shadow and reduced transition time

    #2038899
    Swadhin

    Thank you David. It worked πŸ™‚

    Thank you,
    -Swadhin

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