Header width

  • Author
    Posts
  • #158393

    Hi,
    How do I increase the size of header width? How do I add the tagline to it coming below it? At the moment I have placed them in the same line
    How can I increase font size and make it bolder? It
    At the moment I have Shalini’s Books & Reviews and tag line

    The blog I need help with is: (visible only to logged in users)

    #158413
    binarymoon
    Theme Author

    Hi there – it looks like you have solved a lot of these questions already with some custom css.

    To add the description under the title you could use this:

    h1.site-title:after {
        content: 'Blogger, Reviewer, Publicist, Beta Reader';
        display: block;
        color: white;
    }

    Hopefully that will help – Ben

    #158426
    digitalreadsmedia
    Member
    Original poster

    Done. It works fine.
    Just a couple of queries. Nothing urgent about it.
    Can I have the post and side bar starting at the same line? My sidebar is a little higher

    Can I have a banner or some place below the header to display images of certain books instead of having them on the sidebar?

    #158427
    digitalreadsmedia
    Member
    Original poster

    Also can I increase the size of the rating stars provided by block editor? Or is that not CSS

    #158490
    binarymoon
    Theme Author

    Hi

    You can change the sidebar position with the following css:

    .sidebar.sidebar-main {
        margin-top: 40px;
    }

    You can tweak the 40 to fit the height you want.

    There’s no way to add in a banner I’m afraid. We could potentially add a single image with some CSS but it wouldn’t be clickable/ interactive, so I imagine is not what you want.

    You can tweak the rating star sizes with:

    .wp-block-jetpack-rating-star>span {
        transform: scale(2);
        margin: 10px 20px;
    }

    All the numbers can be adjusted in there :)

    Thanks – Ben

    #158543
    digitalreadsmedia
    Member
    Original poster

    Ben, you are amazing, thank you so much.
    Another small query at your own time. When AMP of the post is opened, it causes the title font to be squished or the block gets so thinned out that font not seen clearly. From Twitter I can’t see the red title heading blocks. Can something be done? Should I decrease the size of the title block or the font? Or can the amp of the post remain the same as the desktop view?

    #158544
    digitalreadsmedia
    Member
    Original poster

    Can my footer be better organized into 3 columns and into the same light gray color as the sidebar/or some other color?

    #158556
    binarymoon
    Theme Author

    Another small query at your own time. When AMP of the post is opened, it causes the title font to be squished or the block gets so thinned out that font not seen clearly. From Twitter I can’t see the red title heading blocks. Can something be done? Should I decrease the size of the title block or the font? Or can the amp of the post remain the same as the desktop view?

    How do you access this? Is it from a mobile phone?

    I’m not sure I can do anything about the AMP view unfortunately. That’s controlled by a plugin and not the theme so all the styling is done there and there’s no way (I know of) to style it beyond the settings in the customizer.

    Can my footer be better organized into 3 columns and into the same light gray color as the sidebar/or some other color?

    What exactly do you want to do here? There’s a few things we can change with CSS but I’d need to understand the changes you want to make to be able to give you the codes.

    I can make the whole background grey, or just the widgets? Was there anything else you wanted to do?

    Cheers – Ben

    #158559
    digitalreadsmedia
    Member
    Original poster

    Hello Ben,
    Good morning to you. I blog via my phone most days so when someone checks out the Amp of the post, the headings are squished. It is fine if nothing can be done.
    The footer
    It feels too disorganized as compared to the website. So I would like to organize it well. The widgets can be the same color. Just wanted to organize them as I wanted. Now it is black background with boxes of widgets where the borders seem uneven with each other. So I would like to organize them according to my wish. For example, the book reviewer badges on the left and the follow via email in the middle and the rest of blogger list widgets on the right without the unevenness

    #158611
    binarymoon
    Theme Author

    Good morning to you. I blog via my phone most days so when someone checks out the Amp of the post, the headings are squished.

    Thanks for clarifying. This page can’t be changed since it doesn’t support custom css.

    It feels too disorganized as compared to the website.

    Ok – I see what you mean. You just want a bit more control & structure.

    The theme is designed to fill the footer content to optimise the space. The order that you add the widgets is the order they will be displayed on mobile. On desktop they are displayed from left to right, but there may be a bit of jiggling about to fill in any gaps, creating three neat columns. But this removes some positioning control.

    Personally I think it would look more structured without the borders. These contribute to the look of the jumbled layout. Without them it would look more like 3 columns. In terms of the order there’s not much that can be done.

    We could use some custom css to improve things slightly but it might not be perfect.

    aside.sidebar-footer .container {
        display: flex;
        flex-wrap: wrap;
        height:auto !important;
    }
    
    aside.sidebar-footer .container .widget {
        position: initial !important;
        top: auto !important;
        left: auto !important;
    }

    Hopefully this will be good enough :)

    Ben

    #158618
    digitalreadsmedia
    Member
    Original poster

    Hi Ben,
    Thank you. It looks much better
    Just 2 things
    1.You are right, it would look much better without the border around widgets, can that be removed?

    2. Can the color of the footer be changed? The black background is not going with my theme. I wouldn’t mind if the entire footer stays white with just a red border going with the red of my blog title. That way the widgets won’t pop out so much.
    Thank you in advance. You have been super helpful.

    Do you have any other themes coming up?

    #158656
    binarymoon
    Theme Author

    1.You are right, it would look much better without the border around widgets, can that be removed?

    Yep:

    .sidebar-footer .widget {
        border: none;
    }

    2. Can the color of the footer be changed? The black background is not going with my theme. I wouldn’t mind if the entire footer stays white with just a red border going with the red of my blog title. That way the widgets won’t pop out so much.

    I’m not sure what you mean regarding the border so I added a top and bottom border in the dark red you are using:

    #footer .sidebar-footer {
        background: transparent;
        border-top: 3px solid #7f0a0a;
        border-bottom: 2px solid #7f0a0a;
    }

    Thanks – Ben

    #158688
    digitalreadsmedia
    Member
    Original poster

    Thank you so much Ben. Nothing urgent about this query. Could you please check my blog. I did place the borders for all sides of the footer. That’s what I wanted.
    But the footer now appears to be disproportionate to my website. It is longer. Is it possible to make it of the same dimension as my website?

  • The topic ‘Header width’ is closed to new replies.