CSS help for customisation issues I'm stuck on

  • Author
    Posts
  • #154978

    mashet
    Member

    Hi,

    I have been scouring this forum for solutions to my customisation needs and am impressed with the detailed and patient responses to all questions.

    I have managed to resolve most of my issues with the codes provided earlier but am stuck on a few listed below.

    1. Block quote in centre alignment is missing the yellow line, which makes it look no different from the rest of the post. Is there a workaround? Also I need the citation font to be smaller.

    2. Reduce size of comment title font on all post pages.

    3. The Contact page submit button is rounded for some reason. I deleted the old form and reinserted it but it is still rounded. How do I get it to look like the default rectangular theme buttons? Can the bold form titles be changed to theme default title fonts as well?

    4. Change background colour of all infinite handle – older posts – buttons on blog page and archives. Have tried the codes from previous replies but they only change the area around the text.

    5. I have hidden the category archive titles. The category description is in all italics. Can it be changed to regular font style?

    6. Is it possible to have a different logo on mobile view? The current one is too big for smaller screens, I would prefer to use an icon.

    7. Mobile menu fonts are too dark. I’d like them to match the lighter blog headline fonts if possible.

    Many thanks in advance.

    Madhu

    The blog I need help with is theurgetowander.com.

    #155013

    mashet
    Member

    Hello,

    I worked out the blockquote code. But am unable to figure out a site wide code for the author citation. Have applied on individual posts until I hear from you.

    Thanks, Madhu

    #155038

    ricardpriet
    Theme Author

    Hello Madhu,
    thank you for writing and using our theme. We are very impressed with the appearance of your website, congratulations!

    About your questions:

    1. yes, remove the CSS you have added previously and add this one:

    .entry-content blockquote > p {
        font-style: normal;
        font-size: 20px;
        color: #aaa;
    }
    .entry-content blockquote > cite {
        text-transform: none;
        font-size: 16px;
        color: #aaa;
    }

    First rule control de text and the second one the author citation.

    2. Not sure if you want to change the comment section title or the author name: https://tinyurl.com/yak3ulcx

    Anyway, for the first one this should work:

    #page .comments-title, #page .comment-reply-title, #page .no-comments {
        font-size: 16px;
    }

    And if you want to change the comment’s author name:

    .comment-author .fn {
        font-size: 12px;
    }

    3. Yes, very strange…to bring back the button styles:

    .wp-block-button__link {
        background-color: #ececec !important;
        display: inline-block;
        padding: 10px 25px;
        color: #000;
        font-size: 12px;
        font-size: .75rem;
        line-height: 1.5;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        border: 0;
        outline: 0;
        font-weight: 400;
        font-family: 'Montserrat',sans-serif;
        -webkit-transition: .2s all linear;
        -moz-transition: .2s all linear;
        -o-transition: .2s all linear;
        transition: .2s all linear;
        letter-spacing: 1px;
        border-radius: 0;
        font-weight: normal;
    }

    Also, to change the titles from bold to normal:

    .contact-form label {
        font-weight: 400;
    }

    4. Yes, three styles here: normal, when user mouses over and on click:

    #main #infinite-handle span {
        background-color: #ececec;
        color: #000;
    }
    #main #infinite-handle span:hover {
        background-color: #ddd;
        color: #000;
    }
    
    #page #main #infinite-handle span:active {
        background-color: #000;
        color: #fff;
    }

    5. Yes of course!

    .archive-meta, .taxonomy-description {
        font-style: normal;
    }

    6. Yes, it possible. Code:

    @media (max-width: 500px) {
        .site-logo {
            display: none;
        }
        .image-header .site-logo-link {
            display: block;
            width: 44px;
            margin: 0 auto;
            height: 44px;
            background-image: url(https://theurgetowander.files.wordpress.com/2020/05/blog-icon-arrow.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 44px 44px;
        }
    }

    This code is a bit complicated, basic explication:
    – (max-width: 500px): the 500px value is the width of the screen of the mobile. If the screen is slower than 500px, then the code applies. If it’s bigger, it doesn’t. So you can set the value to fit the number of mobile devices you want. Unfortunately there isn’t a code to check if it is a mobile or not. You have to set the value (767px is ok if you want to cover 90% of mobiles and some tablets)
    – background-image: here you have to put the url of the image or logo you want to show. So upload it to you media library and copy the url (which should end in .png or .jpg)
    – background-size: 44px 44px; This is the height and width of your image.
    – Height and width value: same, it will be the width and height of the container. Set it equal to your image’s dimensions.

    7. Yes, add this CSS and customise it:

    .nav-menu li a {
        font-weight: 400;
        color: #252525;
        font-size: 12px;
    }

    Hope this helps :)
    thank you again.
    Ricardo P. from SiloCreativo

    #155060

    mashet
    Member

    Muchas gracias Ricardo! Much appreciated.

    1. Blockquote code worked perfectly on all but this one page, no idea why!
    https://theurgetowander.com/top-travel-experiences/

    3. The code sorted the submit button shape but I am unable to change the colours. It appears OK in edit mode but reverts to default when I save. Also fonts are unchanged.

    I also have a search widget I inserted into a front page draft that is behaving strangely only on mobile view. It is square when I open then turns rounded as I scroll. Any possibility of inserting the theme styled widget into a page?

    https://theurgetowander.com/home/

    6. The alternate logo code worked perfectly on my iPhone XS Max. Only size is too small since it sits like a header in the centre. Can it be increased? Changing the container dimensions does not seem to help.

    7. This is changing the website fonts. I was referring to the mobile menu. Not a major issue though.

    Thanks again, Madhu

    #155094

    ricardpriet
    Theme Author

    Nice to hear that, you are welcome!

    1. Yes, in this case the italic font is included through the editor. You can change this editing the post and select no italic font in this blockquote or just adding this CSS:

    .entry-content blockquote > p em {
        font-style: normal;
    }

    3. Currently it shows that the color is being added through the editor (not form the CSS file). So if you add this one with no reference to color, it should catch the color you choose in te editor. Same for the font:

    .wp-block-button__link {
        display: inline-block;
        padding: 10px 25px;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        border: 0;
        outline: 0;
        -webkit-transition: .2s all linear;
        -moz-transition: .2s all linear;
        -o-transition: .2s all linear;
        transition: .2s all linear;
        letter-spacing: 1px;
        border-radius: 0;
        font-weight: normal;
    }

    https://tinyurl.com/ybhypktp

    About search button, not sure if this is the widget you have added:
    https://tinyurl.com/y8wzp337

    But unfortunately I was not able to find when the button is.

    6. Yes of course, change the “background-size: 100px 107px;” line too as you did with width and height

    7. Try this CSS instead of the previous one:

    @media (max-width: 992px) {
        #site-navigation .nav-menu li a {
            font-weight: 400;
            color: #252525;
            font-size: 12px;
        }
    }

    Thank you again!
    Ricardo P.

    #155098

    mashet
    Member

    Brilliant, all sorted! Many thanks Ricardo.

    Yes, that screenshot is the search input button I was referring to. I’ve hidden the submit button because it looks odd and different from the theme button in the footer. I’ve tried all @media codes to change the radius of the input button in mobile view. It does work for a while but switching from portrait to landscape view reverts it back to default.

    There’s one more minor issue, don’t think it’s theme related: the titles in the blog post block inserts on the front page (in two places titled ‘personal favourites’ & ‘latest updates’) are left aligned but the yellow lines beneath them that are part of the theme are in the centre. Perhaps I could try to hide them just on that page?

    Thanks, Madhu

    #155099

    mashet
    Member

    Sorry, there’s actually one more thing :)

    How do I change the background colour of cover/ header images? It’s currently black.

    #155104

    ricardpriet
    Theme Author

    Hello Madhu,

    perfect.

    1. I see your point about the search widget. Try this CSS bringing back the button:

    .wp-block-search {
        position: relative;
    }
    .wp-block-search .wp-block-search__button {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        display: block;
        cursor: pointer;
        border: none;
        padding: 5px 20px;
        text-align: center;
        background-color: #bbbaaa;
        color: #fff;
        -webkit-transition: .25s all linear;
        -moz-transition: .25s all linear;
        -o-transition: .25s all linear;
        transition: .25s all linear;
    }
    .wp-block-search .wp-block-search__button:after {
        content: '\f429';
        font-family: 'Genericons';
        line-height: 19px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 20px;
        position: relative;
        left: 0;
        top: 0;
        color: #fff;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
        display: inline-block;
        vertical-align: middle;
        padding-left: 15px;
    }
    .wp-block-search .wp-block-search__input {
        width: 100%;
        max-width: 100%;
    }
    
    label.wp-block-search__label {
        position: absolute;
        left: -1000em;
    }
    
    .wp-block-search .wp-block-search__input:focus+.wp-block-search__button {
        padding: 5px 10px;
        background-color: #d3b062;
        font-size: 0;
    }
    .wp-block-search .wp-block-search__input:focus+.wp-block-search__button:after {
        color: #fff;
        padding: 0;
    }

    2. Hidding line under posts inserted by posts block. Yes, good point:

    .wpnbha .entry-title:before, .wpnbha .entry-title:after {
        content: none;
    }

    3. Cover bg color. Try this:

    .wp-block-cover {
        background-color: #ccc;
    }

    Thank you!
    Ricardo P.

    #155108

    mashet
    Member

    Hello Ricardo,

    Code for gold lines worked fine. Background color didn’t.

    Search button looks more like the theme style but is too long with a bit of the clear portion extending beyond the button. And radius in mobile view is still stubbornly rounded! Check for yoursef on a mobile:

    https://theurgetowander.com/home/

    Meanwhile I have discovered a new problem: featured images are not showing up on random posts on archive grids. Cannot figure out the reason. Have even tried re-inserting a larger image in the 5th post on this grid with no change:

    https://theurgetowander.com/tag/favourites/

    Many thanks for your time, Madhu

    #155110

    mashet
    Member

    The desktop view and alignment improved by reducing the width of the column. But radius in mobile view is still stuck.

    #155150

    ricardpriet
    Theme Author

    Hello there,

    yes about search form you have to add this CSS (New editor is adding is own styles and sometimes they overwrite theme’s styles):

    .wp-block-search .wp-block-search__input {
        width: 100%;
        max-width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    In mobile view we see it correctly: https://prnt.sc/ssalfp
    Maybe you need to clean your browser cache in mobile:
    https://wordpress.com/support/browser-issues/#force-refresh

    About background color in featured image, could you please send us an url when we can see the error? We have check in our demo site and the code works fine for us. Possibly there is a config or something that is causing this.

    Finally, the featured image issue is very strange, because the class of that post says that it has a featured image set, but it is not being loaded. Unfortunately this does not have relationship with the theme so we are not able to give you a solution. Maybe the image file is corrupt or the filename has a non allowed character…but we are not able to access to your site to check this. Could you please let WordPress.com know about this?: https://wordpress.com/help/contact/

    Thank you again!
    Ricardo P.

    #155180

    mashet
    Member

    Hello Ricardo, the search button is now missing the submit button!
    I checked on my husband’s mobile and it’s the same. Also, it changes to rounded border on landscape view.

    The background colour of cover block is visible on both web & mobile browsers if loading is slow.

    https://theurgetowander.com/home/

    Will check with WP support regarding other issues.

    Many thanks, Madhu

    #155181

    mashet
    Member

    Forgot to mention that the search button is too wide on mobile screens, the right edge gets cut off.

    #155183

    mashet
    Member

    Ricardo,

    WP support pointed out that the featured image issue was just a matter of post formats! Gallery posts (without galleries in them) are not displaying regular images. So that’s sorted. Adding it here for anyone who faces similar issues.

    Just figured that the search button border radius changes only in screens wider than an iPhone R screen. I’d be happy with CSS for 0 border radius to target: iPhone XS Max and all tablets and phone landscape views. Styling to resemble theme defaults might be too complicated.

    Background color: I was referring to the general ‘container’ color of all images and blocks, not the block itself. If that makes better sense :)

    And if I can bother you with one more final, final issue that I noticed: Can I increase the space between post content and title? That’s the space previously occupied by post meta data below the gold line.

    Many, many thanks, Madhu

    #155187

    mashet
    Member

    Ok, I did say final, final, but this is absolute final…apologies in advance :)

    Why is the offset in a blockquote different when placed at the beginning of a post and in the middle? Like in this post? I’d like the offset to be equal, if possible.

    https://theurgetowander.com/2018/05/20/a-river-runs-through-it/

    #155188

    ricardpriet
    Theme Author

    Hi there!

    About background-color, add this:

    .wp-block-cover-image.has-background-dim, .wp-block-cover.has-background-dim {
        background-color: #fff;
    }

    The search button disappears if you left the input empty (no text):
    https://prnt.sc/ssyc41

    We have checked in some mobiles in landscape and portrait, and always fine:
    https://prnt.sc/ssyef2

    Anyway, add this CSS to force to not have border-radius:

    .wp-block-search .wp-block-search__button {
        border-radius: 0 !important;
    }

    Could you please send us a screenshot from your mobile when the button come back in order to take a look?

    Fantastic you solved the issue about gallery post format vs normal post format.

    About the space between the title and content, add this (personalise the number of px):

    .single .post .entry-header {
        margin-bottom: 20px;
    }

    About blockquote, it seems the first one is added using the blockquote block in the new editor and the second one is added inside a content block. Add this CSS to normalise both:

    blockquote p {
        margin-left: 0;
    }

    Thank you again!
    Ricardo

    #155192

    mashet
    Member

    Thank you so much Ricardo! That solved everything except the stubborn search input issue.

    Have uploaded four screenshots:

    One mobile view without submit button. That’s too wide for the screen and expands when you input text and remains zoomed in.

    The next two are mobile views (with submit button activated) as it opens square and after it changes when I switch to landscape and back.

    The last one is of web view. I hate how the submit button sits below the search input button when Inserted in a column. Changing column width does not seem to make any difference. Am unable to align center if I insert the widget by itself (outside of a column)

    I have removed all previous CSS since they weren’t making any difference. Let me know if I should add it back.

    Thanks again, Madhu

    #155193

    mashet
    Member

    Sorry, the mobile views are after I tried out CSS to display 60% width.

    Otherwise it is same as the web view with submit button beneath and input way too wide. Uploaded two more screenshots.

    #155197

    mashet
    Member

    Ricardo, I fiddled with the codes you gave me yesterday- changed position to relative and reduced width to 50% (from 100%). Looking a lot better now. The radius still changes but only on wider mobiles and tablets.

    Just checked the search widget in the footer. It expands way out too! The submit button gets out of the frame when you input text and is practically useless. I might as well hide it! Can the percentage of expansion be reduced?

    #155207

    mashet
    Member

    Hello Ricardo,

    Think I might have solved the border radius issue with this code:

    @media (min-width: 481px) and (max-width: 1024px) {#wp-block-search__input-1{
    border-radius: 0 !important;
    } }

    We were targeting the submit button :)

    There’s a gap between the two buttons in the search block on the ‘home’ page that you might have a solution for. I can live with it if you don’t.

    The footer search widget will need to be reduced in size – only for mobile screens -though.

    Looks great otherwise.

    Thanks, Madhu

The topic ‘CSS help for customisation issues I'm stuck on’ is closed to new replies.