#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2005
    Posts
    17
    Rep Power
    0

    PHP & Media Queries


    I have this piece of code that imports a font for my navigation and overrides my original default font, I want this font style to stop and revert back to the original default font when the screen goes down to 768px wide.

    Every time I try to control this it just defaults to my changes from the off, the control needs to be in this file because of the way this site is set up.

    The code of the page is below. No doubt you will need some more information, just let me know what you need and I'll try to supply it.


    PHP Code:
    <?php

    function fu_output_css() {

    echo 
    '<style type="text/css" media="screen">';
    if (
    get_option('fu_header_font') != 'Choose a font' && get_option('fu_header_font') != null)
    { echo 
    '
    @font-face {
    font-family: "header-font";
    src: url("'
    ; echo fu_get_font_urlget_option('fu_header_font') ); echo '");
    }'
    ;
    }
    if (
    get_option('fu_body_font') != 'Choose a font' && get_option('fu_body_font') != null)
    { echo 
    '
    @font-face {
    font-family: "body-font";
    src: url("'
    ; echo fu_get_font_urlget_option('fu_body_font') ); echo '");
    }'
    ;
    }
    if (
    get_option('fu_lists_font') != 'Choose a font' && get_option('fu_lists_font') != null)
    { echo 
    '
    @font-face {
    font-family: "lists-font";
    src: url("'
    ; echo fu_get_font_urlget_option('fu_lists_font') ); echo '");
    }'
    ;
    }
    if (
    get_option('fu_custom_one_font') != 'Choose a font' && get_option('fu_custom_one') != null)
    { echo 
    '
    @font-face {
    font-family: "custom-one";
    src: url("'
    ; echo fu_get_font_urlget_option('fu_custom_one_font') ); echo '");
    }'
    ;
    }
    if (
    get_option('fu_custom_two_font') != 'Choose a font' && get_option('fu_custom_two') != null)
    { echo 
    '
    @font-face {
    font-family: "custom-two";
    src: url("'
    ; echo fu_get_font_urlget_option('fu_custom_two_font') ); echo '");
    }'
    ;
    }
    if (
    get_option('fu_custom_three_font') != 'Choose a font' && get_option('fu_custom_three') != null)
    { echo 
    '
    @font-face {
    font-family: "custom-three";
    src: url("'
    ; echo fu_get_font_urlget_option('fu_custom_three_font') ); echo '");
    }'
    ;
    }
    if (
    get_option('fu_custom_four_font') != 'Choose a font' && get_option('fu_custom_four') != null)
    { echo 
    '
    @font-face {
    font-family: "custom-four";
    src: url("'
    ; echo fu_get_font_urlget_option('fu_custom_four_font') ); echo '");
    }'
    ;
    }
    if (
    get_option('fu_custom_five_font') != 'Choose a font' && get_option('fu_custom_five') != null)
    { echo 
    '
    @font-face {
    font-family: "custom-five";
    src: url("'
    ; echo fu_get_font_urlget_option('fu_custom_five_font') ); echo '");
    }'
    ;
    }
    if (
    get_option('fu_header_font') != 'Choose a font' && get_option('fu_header_font') != null)
    {
    echo 
    'h1, h2, h3, h4, h5, h6, h7 {
    font-family: "header-font"!important;
    }'
    ;
    }
    if (
    get_option('fu_body_font') != 'Choose a font' && get_option('fu_body_font') != null)
    {
    echo 
    'p, em, div {
    font-family: "body-font"!important;
    }'
    ;
    }
    if (
    get_option('fu_lists_font') != 'Choose a font' && get_option('fu_lists_font') != null)
    {
    echo 
    '
    li {
    font-family: "lists-font"!important;
    }'
    ;
    }

    if (
    get_option('fu_custom_one_font') != 'Choose a font' && get_option('fu_custom_one') != null)
    {
    echo 
    get_option('fu_custom_one'); echo ' {
    font-family: "custom-one"!important;
    }'
    ;
    }
    if (
    get_option('fu_custom_two_font') != 'Choose a font' && get_option('fu_custom_two') != null)
    {
    echo 
    get_option('fu_custom_two'); echo ' {
    font-family: "custom-two"!important;
    }'
    ;
    }
    if (
    get_option('fu_custom_three_font') != 'Choose a font' && get_option('fu_custom_three') != null)
    {
    echo 
    get_option('fu_custom_three'); echo ' {
    font-family: "custom-three"!important;
    }'
    ;
    }
    if (
    get_option('fu_custom_four_font') != 'Choose a font' && get_option('fu_custom_four') != null)
    {
    echo 
    get_option('fu_custom_four'); echo ' {
    font-family: "custom-four"!important;
    }'
    ;
    }
    if (
    get_option('fu_custom_five_font') != 'Choose a font' && get_option('fu_custom_five') != null)
    {
    echo 
    get_option('fu_custom_five'); echo ' {
    font-family: "custom-five"!important;
    }'
    ;
    }
    echo 
    '

    </style>'
    ;

    }
    add_action('wp_head','fu_output_css');
    Last edited by E-Oreo; June 1st, 2013 at 10:10 AM.
  2. #2
  3. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,316
    Rep Power
    7171
    Here's an article which explains how to create resolution-dependent style sheets. Basically, what you want to do is program your custom fonts style sheet to only be applied above a particular minimum width. If the browser window is below that minimum widget, your custom fonts style sheet will not be applied and the defaults will be used instead.
    http://css-tricks.com/resolution-specific-stylesheets/

    Also a couple of side notes:

    The PHPNET forum tags are for linking to the PHP documentation; if you want to highlight code, use the PHP tags instead.

    Code:
    get_option('fu_header_font') != 'Choose a font'
    That is pretty ugly... you shouldn't be storing "Choose a font" in your database.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around

IMN logo majestic logo threadwatch logo seochat tools logo