Seals at the footer being incorrectly displayed on Firefox

Hi!

If you access my site through Firefox and Chrome, you’ll see that on Firefox the GoDaddy SSH seal isn’t being displayed; also, the seals aren’t being displayed in an aligned manner as they are on Chrome:

https://www.wheelofcommerce.com

Here’s the whole content of my child theme’s footer.php:

http://pastebin.com/qJLjmGiF

If necessary, I’ve sent my credentials with Adam’s name on it a couple of days ago.

Thanks. :slight_smile:

  • Kasia Swiderska
    • Support nomad

    Hello Gabriel,

    Sorry for delay, I was travelling to other time zone :slight_smile:

    Also, from what you see on Chrome, how can I move the Sitelock seal up so it stays vertically centralized inside the black footer?

    Use following CSS (you probably have it somewhere, so you could find selectors and change only pixel values)

    .seal-list li:nth-child(3) {
    padding-top: 6px;
    }

    There’s also that little “p” (marked by a red arrow), I have no idea what that is.

    Well, its just says that there is paragraph in the editor.

    Also, there are some elements misplaced at the store admin page:

    Did this happen after plugin update? Because from what I see the tick for the personalize is not a CSS glich, it just put there by HTML markup. Its in the second row of the table, so I cant do much about placing it in other place.

    Required text can by put next to checkbox by this css:

    #mp-meta-details .variation-custom-field .mp_custom_field_required_label {float: right;
    width: 70%;}

    kind regards

    Kasia

  • Wheel of Commerce
    • WordPress Warrior

    Okay, ty, I’ve changed some things in a code you gave me prreviously and the seals are aligned now.

    About the store admin issue, the screen shot below shows how things are after inserting the code you gave. Anyway it can be aligned? I’d also like to remove the “:” beside the “Required”, or move the checkbox to its right -otherwise, it makes no sense. I want to move the whole thing a bit to the right too, so there’s some space between it and the description box.

    http://i.imgur.com/GmJFPqc.png

    Another of these small design issues: how can I centralize my header content and apply the Varela Round font to that text there? I’ve managed to do this before, but for some reason, now it’s not working (tried some codes, none worked). You’ll see codes regarding this font at both my child theme’s style.css and Custom CSS panel. The font comes from the Google Fonts plugin.

    Thanks again. :slight_smile:

  • Kasia Swiderska
    • Support nomad

    Hello Gabriel,

    Yeah, silly me. Found them also :wink:

    About the store admin issue, the screen shot below shows how things are after inserting the code you gave. Anyway it can be aligned?

    .variation-custom-field .mp_custom_label_col {position: relative;}

    .variation-custom-field .mp_custom_label_col .mp_custom_field_required {position: absolute;
    top: 37px;
    left: 310px;}

    #mp-meta-details .variation-custom-field .mp_custom_field_required_label {
    float: right;
    width: 70%;
    margin-top: 0px;
    }

    Another of these small design issues: how can I centralize my header content and apply the Varela Round font to that text there?

    .tt_mp_fe h1 {text-align: center; font-family: 'Varela Round';}

    kind regards,

    Kasia

  • Wheel of Commerce
    • WordPress Warrior

    Okay, that first code worked, ty. :slight_smile:

    About the header: I mean the site’s header, the one that’s displayed at every page, with the logo and the text: “wheelofcommerce.com: advertise and sell your product without having to pay for it.”, but the one you gave me to centralize the “Store Admin” is cool too, haha (even though it didn’t apply the Varela Round, but that’s okay). Any idea how can I get the site’s header content (logo and that “slogan”:wink: centralized, with Varela Round applied to the text?

    Another thing: for some reason, the title box for products is now really big, anyway I can reduce its size? You can check it here:

    https://www.wheelofcommerce.com/johanschneider/store/products/test-2/

    Thanks again, Kasia. You’re always very helpful. :slight_smile:

  • Kasia Swiderska
    • Support nomad

    Hello Gabriel,

    Please use this code:

    #header-wrapper.header-style-3 .pro-site-logo {text-align: center;}

    I’ve checked how Varela looks now, I thought it was serif font – it look like it is not added to your site, and that is why its not working. Add this line to your child theme style.css at the begining (after the first @import rule)

    @import url(https://fonts.googleapis.com/css?family=Varela+Round);

    and then you will be able to use

    font-family: 'Varela Round';

    for every element you want.

    Another thing: for some reason, the title box for products is now really big, anyway I can reduce its size?

    Yes, remove code from rating plugin that is under the title, it created empty table there.

    kind regards,

    Kasia

  • Wheel of Commerce
    • WordPress Warrior

    I’ve tried these codes at different locations inside styles.css, none of which worked.

    About Varela Round: I was already using it at some places, through a plugin called Easy Google Fonts. It works by adding CSS selectors in the plugin’s panel, you can access mine here: https://www.wheelofcommerce.com/wp-admin/options-general.php?page=easy-google-fonts

    What do I have to add there to get Varela Round applied to the header?

    Also, considering all of that, wouldn’t adding that code you mentioned create some conflicting issue?

    About the code for ratings, I didn’t find it, where should I look?

    Thanks again.

  • Kasia Swiderska
    • Support nomad

    Hello Gabriel,

    Sorry, my mistake – it should be like this, so it will override other styles. I already put it in your child theme styles.css

    #header-wrapper.header-style-3 .pro-site-logo {text-align: center; float: none ;}

    Also, considering all of that, wouldn't adding that code you mentioned create some conflicting issue?

    I dont think it works, so there should be no conflict.

    About the code for ratings, I didn't find it, where should I look?

    Please see the screenshot – it is in headings span.

    kind regards,

    Kasia

  • Wheel of Commerce
    • WordPress Warrior

    But Easy Google Fonts is working -you can see 3 selectors at the panel displayed in that link I sent. Besides, you can see Varela Round applied here: https://www.wheelofcommerce.com/fundraising

    Also: did that code managed to apply the font to the text in the header? I can’t really tell, haha.

    It seems Rating Widget is inserting the following line in my theme’s product-style1.php (as far as I can remember, it wasn’t put there manually):

    ?>><?php the_title(); ?><?php rw_the_post_rating('post'); ?></span></h1>

    So this appears to be generating the blank space where the ratings should be displayed. The space disappeared once I replace that line by the code that was in the original file. Just be aware that things might be different at that page when you check it, as I’m trying to fix the issue as well.

    All of that considered, it looks like the code is placed correctly, but the code itself is wrong. I’ve tried tweaking around the codes they give at their shortcodes’ page, but nothing seems to work:

    http://rating-widget.com/support/wordpress/is-there-any-php-shortcodes-i-can-use-for-my-custom-posts-templates/?utm_medium=link&utm_campaign=free&utm_source=wordpress.org

    Nevertheless, this issue is being discussed at another thread (so you might not want to talk about it here, I don’t know):

    https://premium.wpmudev.org/forums/topic/displaying-a-rating-system-for-products#post-994803

    Thanks again. :slight_smile:

  • Wheel of Commerce
    • WordPress Warrior

    [UPDATE]:

    *The reason I’m putting it here, and not at the thread about ratings, is because I was told not to make updates to threads at which my latest post has been created days ago, as this moves the thread further in the queue for WPMU’s staff. Besides, now that I’ve managed to get the ratings there, all that’s left regarding this issue are some CSS tweaks.

    I’ve finally managed to get the a ratings’ shortcode working (when you look at the page below, you might not see it, because I’m still trying to get it precisely as intended):

    https://www.wheelofcommerce.com/johanschneider/store/products/test-2/

    It’s a shortcode from the plugin Multi Rating (https://wordpress.org/plugins/multi-rating/), here it is:

    <?php echo do_shortcode('[mr_rating_form]'); ?>

    I’ve inserted it in pro3-child/templates/product-style1.php, you can see the file’s content here (you’ll see the shortcode there at line 16 too):

    http://pastebin.com/30dsktF6

    What I’m trying to do now is:

    1)Simplify the design, so it looks like a simple rating form, like the one we see to rate plugins at WordPress (without anything that’s unnecessary, like “extra text”:wink:.

    2)Move it to the right of the product’s title (it’s below it at the moment).

    Thanks again. :slight_smile:

  • Kasia Swiderska
    • Support nomad

    Hello Gabriel,

    Please note that we do not forbid to post in relevant threads – but we simply inform that posting day after day puts you lower in queue.

    But this doesn’t mean that you should mix your threads. This time I will answer here, but have in mind this is one exception and you should not jump with issues between threads. Please also note that we have now another long thread where you ask for custom tweaks and this is not related to any of our plugins.

    1)Simplify the design, so it looks like a simple rating form, like the one we see to rate plugins at WordPress (without anything that’s unnecessary, like “extra text”:wink:.

    2)Move it to the right of the product’s title (it’s below it at the moment).

    .rating-form.mr-shortcode  h4,
    .rating-form.mr-shortcode .description {display: none !important;}

    .rating-form.mr-shortcode {float: right; margin-top: -10px;}
    .mr-star-rating-select i, .mr-star-rating-select span {font-size: 15px;}

    kind regards,

    Kasia

  • Wheel of Commerce
    • WordPress Warrior

    Continuing from the chat session:

    Only a correction regarding the img below: I’d like to move the price right below the product’s title, above the “By [username]”, so the only thing on the right of the title box will be the ratings.

    http://i.imgur.com/Pxt0qIG.png

    Something else from my previous post (I think you forgot to answer this one):

    But Easy Google Fonts is working -you can see 3 selectors at the panel displayed in that link I sent. Besides, you can see Varela Round applied here: https://www.wheelofcommerce.com/fundraising

    Also: did that code managed to apply the font to the text in the header? I can’t really tell, haha.

    Thanks again.

  • Wheel of Commerce
    • WordPress Warrior

    Something else I forgot to add (sorry for that, but I only noticed the following problem now):

    A similar issue is happening at my auctions’ pages. For them I just need to align the ratings to the left though; you’ll see this elements is isolated to the right at the image below (keep in mind this rating system is native to the auction plugin, it’s not the same as the one before).

    http://i.imgur.com/6xS0IAU.png

    Thanks once more.

  • Rupok
    • Support Ninja

    Hi Gabriel

    I hope you had a wonderful day.

    For making “move the price right below the product’s title, above the “By [username]”, so the only thing on the right of the title box will be the ratings.”, use the following custom CSS code.

    .product-price #pro-product-price .mp_product_price {
    float: left;
    position: relative;
    top: -50px;
    }

    .product-title > p {
    padding-bottom: 20px;
    position: relative;
    top: 20px;
    }

    .rating-form.mr-shortcode {
    margin: -5px 0 0;
    }

    .rating-form.mr-shortcode > form {
    margin: -5px 0 0;
    }

    For aligning the ratings to the left, use the following custom CSS code.

    .wdm-single-auction-author {
    float: left !important;
    }

    I can see this customization request is different from the thread title. Can you please create separate thread for separate issues? I think that will help you and us both to keep track of all the problems and solutions.

    Have a nice day. Cheers!

    Rupok

  • Wheel of Commerce
    • WordPress Warrior

    Okay, I’ve opened a new thread on this:

    https://premium.wpmudev.org/forums/topic/small-css-issues-regarding-different-elements#post-997513

    About your code: thanks, it works; it just didn’t reduce that space between the stars and the “Submit Rating” button.

    On this thread, there’s still one issue left:

    But Easy Google Fonts is working -you can see 3 selectors at the panel displayed in that link I sent. Besides, you can see Varela Round applied here: https://www.wheelofcommerce.com/fundraising

    Also: did that code managed to apply the font to the text in the header? I can’t really tell, haha.

    Thanks.

  • Kasia Swiderska
    • Support nomad

    Hello Gabriel,

    But Easy Google Fonts is working -you can see 3 selectors at the panel displayed in that link I sent. Besides, you can see Varela Round applied here:

    It’s not added on the other pages (there is no line in header that adds Varela). That’s why I used import to add it.

    Also: did that code managed to apply the font to the text in the header? I can’t really tell, haha.

    Yes, please see screen – if disabled italics style in code inspector and you see that this varela – its small, but it’s this font.

    About your code: thanks, it works; it just didn’t reduce that space between the stars and the “Submit Rating” button.

    Please try this:

    #saveBtn-330-1 {margin-top: -9px;}

    kind regards,

    Kasia

  • Wheel of Commerce
    • WordPress Warrior

    Okay, all these issues are fixed now, ty. :slight_smile:

    If you have time, and it’s not an issue for your thread queue, since you’re the one who fixed this for me the last time it happened, I’m having issues with that bizarre blank line randomly appearing below my footer at some pages again:

    https://premium.wpmudev.org/forums/topic/small-css-issues-regarding-different-elements?replies=5#post-997868

    Thanks. :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.