Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 27, 2014 at 12:00 pm #230032
    Mesheu

    Hi guys,

    I need to add the following css key to all my pages to be able to use my custom font from typography.com:

    <link rel=”stylesheet” type=”text/css” href=”//cloud.typography.com/6284472/691984/css/fonts.css” />

    How can I do it?

    Thanks!
    Ali

    February 27, 2014 at 12:16 pm #230036
    Mesheu

    I mean I need to include this key within the <head> element of your web pages.

    February 27, 2014 at 3:13 pm #230083
    Yigit

    Hey!

    Please go to Appearance > Editor and open Header.php file and add it. Please also see http://wpsites.net/web-design/fonts-wordpress/

    Regards,
    Yigit

    February 27, 2014 at 4:54 pm #230120
    Mesheu

    Thank you, Yigit, done! May I bother you with 2 last questions?

    On my website http://goo.gl/pIKt4s, I wanted to have a transparent header, so I added the following codes to my customer.css:

    #header_main .container, .main_menu ul:first-child > li a {
    height: 60px !important;
    line-height: 60px !important;
    }
    .logo, .logo a, .logo img { max-height: 60px!important; }

    #header_main {
    border-bottom-style:none;
    }

    .fixed_header #main {
    padding-top:60px;
    }

    .avia-menu-fx { display: none; }

    .header_bg {
    background: rgba(255, 255, 255, 0) !important;
    }
    #main {
    padding-top: 0 !important;
    }

    My first question is whether all I did is correct and enough? Or shall I also go to avia.js and add “el_height = $60”???

    Second question: now that I have the header transparent in landing form, all I want is to add a bit of background color to this header once the user scrolls down. SExactly like on http://squarespace.com/about/company

    How can I control this header properties when user scrolls down?

    Thank you very much!
    Ali

    February 27, 2014 at 5:14 pm #230137
    Yigit

    Hi!

    If you do not want header to resize when scrolled, this is fine. You can edit el_height value if you would like to change the height of header and keep the resizing feature active.

    Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust the color and transition time as needed

    .header-scrolled #header_main { background-color: red; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }

    Best regards,
    Yigit

    February 28, 2014 at 2:33 pm #230598
    Mesheu

    Perfect, done and it works great.

    The only problem is on explorer, the transparent header is not transparent and it looks dark, while it works perfectly on chrome and firefox.Is there a way I can fix it and set this transparent header globally on all browsers?

    Thanks!
    Ali

    February 28, 2014 at 3:26 pm #230611
    Yigit

    Hi!

    Please try background: rgba(255,255,255,0); instead of transparent

    Best regards,
    Yigit

    February 28, 2014 at 4:19 pm #230645
    Mesheu

    That’s the problem (see my code above), I already have “background: rgba(255,255,255,0);” instead of transparent.

    Any other idea?

    February 28, 2014 at 4:27 pm #230649
    Yigit

    Hi!

    Please add following code to Quick CSS as well to make smoother transition when header goes from colored to transparent

    #header_main { -webkit-transition: background-color 1s; -moz-transition: background-color 1s; -o-transition: background-color 1s; transition: background-color 1s; }

    And as for transparent background IE, please try css hacks from websites like Stackoverflow. I wanted to give it a shot but as you can see the scope of our support, unfortunately it is not something we can help you with.

    Best regards,
    Yigit

    February 28, 2014 at 4:36 pm #230656
    Mesheu

    Thanks for the additional code and no worries about the transparency, I will see stackoverflow.

    Thank you so much for your support!
    Ali

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Custom font’ is closed to new replies.