WordPress.org

Ready to get started?Download WordPress

Forums

Special Recent Posts
[resolved] Browser compatability issue with fonts (6 posts)

  1. lauritasita
    Member
    Posted 1 year ago #

    Hi,
    I love this plugin, but I have some issues that I am trying to resolve on my own, and I'm having difficulty.

    I have the plugin installed on two different WordPress sites using the Weaver II theme.

    My problem is with the font. I want the post excerpts to display using the Arial font.

    The plugin works perfectly on one site in all browsers, but on the other site, the font only shows the post excerpts with the Arial font using Internet Explorer 9. I have changed the CSS to use the Arial font, but it will only do so in Internet Explorer. In all other browsers, it displays a default font which looks similar to the courier font, which I'd rather not have.

    I added the following statement to the CSS, but it doesn't seem to work.

    /* The post excerpt. */
    p.srp-widget-excerpt {
    margin: 0px !important;
    font-family: Arial !important;
    font-size: 1em !important;
    }
    --------------------------------------------------------------------
    My default font on my WordPress theme is Arial. Here is how I changed my CSS:

    /*
    | --------------------------------------------------------
    | File : css-front.css
    | Project : Special Recent Posts FREE Edition plugin for WordPress
    | Version : 1.9.7
    | Description : Main stylesheet.
    | Author : Luca Grandicelli
    | Author URL : http://www.lucagrandicelli.com
    | Plugin URL : http://wordpress.org/extend/plugins/special-recent-posts/
    | Copyright (C) 2011-2012 Luca Grandicelli
    | --------------------------------------------------------
    */

    /*
    | ----------------------------------------
    | General Section
    | ----------------------------------------

    | - ATTENTION IE users: The following rules are only compatible with IE8+
    | - Please consider to specify custom CSS rules to support previous IE versions.
    | - In order to mantain a minimum compatibnility with IE7, a special CSS file is stored at special-recent-posts/css/css-ie7-fix.css.
    | - Feel free to modify this file which is loaded by a conditional statement in the HTML header of the rendered webpage.
    */

    /* The Widget Title. */
    h3.srp-widget-title{
    display: block !important;
    margin-bottom: 10px !important;
    font-size: 20px !important;
    font-family: Arial !important;
    color: orange !important;
    }

    /* The Recent Posts Container. */
    div.srp-widget-container {
    display: table !important;
    clear: both !important;
    }

    /* Fixing the outline on every link within the SRP container. */
    div.srp-widget-container a {
    outline: none !important;
    }

    /* The widget title link */
    a.srp-widget-title-link {
    }

    /* Single post entry box. */
    div.srp-widget-singlepost {
    padding: 0px 0px 10px 0px !important;
    margin: 0px 0px 10px 0px !important;
    border-bottom: 1px solid #CCCCCC !important;
    clear: both !important;
    }

    /* The single row container and */
    div.srp-single-row {
    display: table-cell !important;
    vertical-align: top !important;
    margin: 0px 0px 0px 0px !important;
    padding: 0px 10px 0px 0px !important;
    border: none !important;
    }

    /* The single column container */
    div.srp-widget-row {
    clear: both !important;
    display: block !important;
    margin: 0px 0px 10px 0px !important;
    padding: 0px 0px 10px 0px !important;
    }

    /* The multi-column class on each post entry */
    div.srp-multi-column {
    display: table-cell !important;
    vertical-align: top !important;
    }

    /*
    | ----------------------------------------
    | Thumbnail Section
    | ----------------------------------------
    */

    /* The thumbnail box. */
    div.srp-thumbnail-box {
    display: table-cell !important;
    vertical-align: top !important;
    padding-right: 10px !important;
    }

    /* The thumbnail link. */
    a.srp-widget-thmblink {
    display: block !important;
    }

    /* The thumbnail image. */
    img.srp-widget-thmb {
    max-width: none !important;
    }

    div.srp-thumbnail-box img.avatar {
    max-width: none !important;
    }

    /*
    | ----------------------------------------
    | Content Section
    | ----------------------------------------
    */

    /* The content box. */
    div.srp-content-box {
    display: table-cell !important;
    vertical-align: top !important;
    }

    /* The single post title. */
    h4.srp-post-title {
    display: block !important;
    font-size: 18px !important;
    color: blue !important;
    }

    /* The single post title link. */
    a.srp-post-title-link {
    }

    /* The post excerpt. */
    p.srp-widget-excerpt {
    margin: 0px !important;
    font-family: Arial !important;
    font-size: 1em !important;
    }

    /* The linked Excerpt */
    a.srp-linked-excerpt {
    font-family: Arial !important;
    font-size: 1em !important;
    }

    /* The stringbreak. */
    span.srp-widget-stringbreak {
    }

    /* The stringbreak link. */
    a.srp-widget-stringbreak-link {
    }

    /* The stringbreak link image. */
    a.srp-widget-stringbreak-link-image {
    }

    /* The post date box. */
    p.srp-widget-date {
    margin: 0px !important;
    color: #ffcccc !important;
    font-family: arial !important;
    }

    /* The post author box. */
    p.srp-widget-author {
    margin: 0px !important;
    }

    /* The post category box. */
    p.srp-widget-category {
    margin: 0px !important;
    }

    /* The tags box */
    p.srp-widget-tags {
    margin: 0px !important;
    }

    The change in the CSS is not reflected in the website. I do not see the Arial font in the post excerpt in any browser other than Internet Explorer.

    I used version 1.9.7., but I copied back the previous version because I didn't like how my thumbnails looked in the newer version.

    Could you please tell me how to resolve this? Do you need a link to the website?

    Thank you.

    Laurita

  2. Luca Grandicelli
    Member
    Plugin Author

    Posted 1 year ago #

    Yes please, provide a link :)

  3. lauritasita
    Member
    Posted 1 year ago #

    The link to the web page I'm having trouble with is here:

    http://sanssouciblogs.com/blog/

    Thank you.

  4. lauritasita
    Member
    Posted 1 year ago #

    Luca,
    I added the following inline CSS to your shortcode, and it seems to be working now, but check it:

    <div style="font-family: Arial;">[srp post_limit='1000' post_content_length='300' widget_title='Most recent posts from Sans Souci' thumbnail_width='115' thumbnail_height='115' category_include=3]</div>

    Let me know if this is ok with you. I don't understand why the change to your CSS didn't work.

  5. Luca Grandicelli
    Member
    Plugin Author

    Posted 1 year ago #

    Well it worked before too. I've temporary disabled your latest css rule (the inline one) and the text is displayed with Arial font.
    Maybe you had to properly refresh the page..

    It works now btw ;)

  6. lauritasita
    Member
    Posted 1 year ago #

    Luca,

    I also temporary disabled the inline CSS rule, and I tested it on three different computers including the iPad. When I looked, the font used for the post excerpts is some kind of default font similar to the courier font.

    The only browser I see it is using the Arial font is in Internet Explorer (because of the change I made to your CSS file, "css-front.css" or my WordPress theme default font which is Arial). For all other browsers, it uses the default font.

    So I put back in the inline CSS rule, and all browsers now display the post excerpts in Arial.

    Laura

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.