Small CSS issues regarding different elements

Hi!

Sorry for such a generic title, but that's really what this is about. Here is an example of a page you can check to understand the changes I'd like to make:
https://www.wheelofcommerce.com/johanschneider/store/products/test-2/
Here's the screen shot with the explanation of these changes (marked and written in red):
*Check attached file.
Some of them apply to my header, others to my products' pages, as you can see in the screen shot -the page shown there is just an example of a product's page.

Thanks. :slight_smile:

  • Predrag Dubajic
    • Support

    Hey Gabriel,

    Hope you're well :slight_smile:

    Here's a CSS code that should take care of text next to logo:

    #header-wrapper.header-style-3 .pro-site-logo .pro-logo-tagline {
        font-style: normal;
        font-weight: bold;
    }

    And this CSS should do it for the rating:

    p.rating-item.mr {
        margin-bottom: 0;
    }
    
    .rating-form.mr-shortcode {
        margin: 0;
    }

    Let me know if that's what you wanted to do :slight_smile:

    Best regards,
    Predrag

  • Wheel of Commerce
    • WordPress Warrior

    Hi, man! Thanks for responding so quickly. :slight_smile:

    The only part of the codes you gave me that didn't work was the one regarding the header's text; the bold worked though, but I removed that line, because it was actually better without the bold effect. The text still seems italic (you can check that page again, the text is still "inclined"). Any way I can make it normal and increase the font size a little bit? I'd also like to apply Varela Round to that text. Kasia told me to add the following lines in my style.css for this font, but it didn't work:

    @import url('//fonts.googleapis.com/css?family=Varela+Round');
    
    #header-wrapper.header-style-3 .pro-site-logo {text-align: center; float: none !important; font-family: 'Varela Round' !important;}

    I'm already using Easy Google Fonts (plugin) to apply Varela Round in other elements, as seen here:
    https://www.wheelofcommerce.com/fundraising
    This plugin works through CSS selectors inserted in it, you can access my Easy Google Fonts' panel here:
    https://www.wheelofcommerce.com/wp-admin/options-general.php?page=easy-google-fonts

    Thanks again.

  • Predrag Dubajic
    • Support

    Hi Gabriel,

    Ok, the CSS is there and it's pointing to right element, we just need to use stronger selector, so using this should do the trick:

    body #header-wrapper.header-style-3 .pro-site-logo .pro-logo-tagline {
        font-style: normal;
        font-size: 16px;
    }

    Font size is also included there.

    As for the font family, it looks like the correct font is being called, because when I disable italic while on fundraising page the fonts look same to me.

    Tell me if I'm missing something there.

    Best regards,
    Predrag

  • Wheel of Commerce
    • WordPress Warrior

    Thanks, man! All of that is solved now. :slight_smile:

    Something else I've just noticed: there's this weird blank line that appears randomly below my footer (indicated by a red arrow): http://i.imgur.com/JVZJM9L.png
    Here's the page shown in that screenshot: https://www.wheelofcommerce.com/ultimate-auction/test-2
    The odd thing is: sometimes it appears, and sometimes it's gone, and it also doesn't seem to have a pattern in terms of at what pages it appears. Any way to fix this?

    Thanks again.

  • Predrag Dubajic
    • Support

    Hi Gabriel,

    This white line seems to be caused by TT MarketPress Frontend plugin CSS, to be more specific this part of code:

    .tt_mp_fe html, body {
        height: auto!important;
    }

    I have added this CSS fix in your custom CSS field:

    html body {
    	height:100%!important;
    }

    The line should be gone now but I would suggest checking your other pages, especially TT MP Frontend pages, and see if it will affect anything there.

    Best regards,
    Predrag

  • Wheel of Commerce
    • WordPress Warrior

    Okay, that worked, ty. :slight_smile:

    I'm trying to get that text in my header to look like this: http://i.imgur.com/02Dq2O6.jpg
    That font is Bauhaus 93. Here are the codes Kasia gave me to apply Varela Round there, so I just switched them to Bauhaus 93, which didn't work (it now looks like Times New Roman or something):

    @import url('//fonts.googleapis.com/css?family=Varela+Round');
    
    #header-wrapper.header-style-3 .pro-site-logo {text-align: center; float: none !important; font-family: 'Varela Round' !important;}

    I was talking to Adam during chat about this, he told me that to get that text looking like I want, I'd have to change something in functions.php regarding my header. Here's a copy of my parent's functions.php, there're 4 occurrences for "header": http://pastebin.com/PZVKXaY4
    He also told me the change I want to make requires me to "dig deeper inside my theme". The text currently there is from WP's regular tagline box, inside general settings.

    Thanks.

  • Adam Czajczyk
    • Support Gorilla

    Hello Gabe!

    I tried to access your server via FTP however I just noticed that you've mentioned that you'd need to whitelist my IP in order to let me in. Unfortunately, I do not have any fixed IP assigned therefore cannot give you any since I have no way of knowing when it will be changed (it may be changed in a week from now but it can be changed in 10 minutes as well).

    Would there be a chance to disable (at least temporarily) that limitation so I could support you here? (BTW. I'm too using WinSCP).

    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.