relative paths inside css file

relative paths inside css file - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: relative paths inside css file (/showthread.php?tid=63874)

relative paths inside css file - Aleksi - 12-17-2015

Hi there. Longtime professional CG coder, but (relatively) new to web tech and php. (I did support a django website for a while, though.) That said, I've looked around at quite a few frameworks and CodeIgniter strikes me -- by far! -- as the most elegant and intuitive that I've come across, so much so that it's worth it to me to finally learn PHP.

I'm finally refactoring my website (currently all static pages) by diving into codeigniter. It's going well, got my controllers and views working. (Not using models just yet...)

But I'm having a problem loading a font-family through a css file. I've scoured the web but couldn't find a solution that worked for me, hence I'm coming here.

My css and js files are loading just fine. One css file contains the following:

Code:
  @font-face {

    font-family: 'WebSymbolsRegular';

    src: url('websymbols/websymbols-regular-webfont.eot');

    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),

         url('websymbols/websymbols-regular-webfont.woff') format('woff'),

         url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),

         url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');

    font-weight: normal;

    font-style: normal;

  }

The directory structure is pretty straightforward:

|-root
|-theme
|-stylesheets
|-websymbols

Some people have asked the same question at StackOverflow, but the suggestions didn't work for me (such as editing the .htaccess file to add exclusions for the pertinent directories).

The font-face has always loaded for me in the past, but codeigniter doesn't seem to like relative links inside the css file. I've tried every variation of relative path structures I could think of, but nothing worked. It also doesn't seem to like absolute paths when I spell out the absolute url of the websymbols directory (using the value returned by base_url())!

Any helpful suggestions very appreciated!

PS Yes, codeigniter uses "assets" as a dirname convention, but to make my life easier I'm sticking with my original "theme" dirname.

RE: relative paths inside css file - meow - 12-17-2015

(12-17-2015, 11:02 AM)Aleksi Wrote: Hi there. Longtime professional CG coder, but (relatively) new to web tech and php. (I did support a django website for a while, though.) That said, I've looked around at quite a few frameworks and CodeIgniter strikes me -- by far! -- as the most elegant and intuitive that I've come across, so much so that it's worth it to me to finally learn PHP.

I'm finally refactoring my website (currently all static pages) by diving into codeigniter. It's going well, got my controllers and views working. (Not using models just yet...)

But I'm having a problem loading a font-family through a css file. I've scoured the web but couldn't find a solution that worked for me, hence I'm coming here.

My css and js files are loading just fine. One css file contains the following:

Code:
@font-face {     font-family: 'WebSymbolsRegular';     src: url('websymbols/websymbols-regular-webfont.eot');     src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),          url('websymbols/websymbols-regular-webfont.woff') format('woff'),          url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),          url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');     font-weight: normal;     font-style: normal; }

The directory structure is pretty straightforward:

|-root
|-theme
    |-stylesheets
      |-websymbols

Some people have asked the same question at StackOverflow, but the suggestions didn't work for me (such as editing the .htaccess file to add exclusions for the pertinent directories).

The font-face has always loaded for me in the past, but codeigniter doesn't seem to like relative links inside the css file. I've tried every variation of relative path structures I could think of, but nothing worked. It also doesn't seem to like absolute paths when I spell out the absolute url of the websymbols directory (using the value returned by base_url())!

Any helpful suggestions very appreciated!

PS Yes, codeigniter uses "assets" as a dirname convention, but to make my life easier I'm sticking with my original "theme" dirname.

Are you following along the tutorial in the docs? Mind pasting here the call method to your CSS/JS files?
Here is how I've got it to work for my first app I'm working on:

Structure:

Code:
|--root

   |--application

      |--views

         |--templates

            |--header.php

   |--css

      |--20151206.css

   |--img

   |--system

Inside my header I have:

Code:
<!DOCTYPE html>

<html>

    <head>

        <title><?php echo htmlspecialchars($title); ?></title>

        <?php echo link_tag(base_url().'css/20151206.css'); ?>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body>

Inside the CSS I have:

Code:
@media screen and (min-width:500px){

    html {

        background: url(../img/dufer.jpg) fixed;

        background-size: cover;

        overflow: auto;

        }

}

And it works fine. EDIT: Just noticed your CSS has 'src' and I havent tried that yet.

RE: relative paths inside css file - Aleksi - 12-17-2015

Hello meow, thank you for replying.

Quote:Are you following along the tutorial in the docs? Mind pasting here the call method to your CSS/JS files?

Here's my header:

Code:
<!DOCTYPE html>

<head>

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width"/>

<title><?php echo $title; ?></title>

<!-- CSS Files-->

<link rel="stylesheet" href="<?php echo base_url(); ?>/theme/stylesheets/style.css">

<link rel="stylesheet" href="<?php echo base_url(); ?>/theme/stylesheets/homepage.css"><!-- homepage stylesheet -->

<link rel="stylesheet" href="<?php echo base_url(); ?>/theme/stylesheets/skins/khaki.css"><!-- skin color -->

<link rel="stylesheet" href="<?php echo base_url(); ?>/theme/stylesheets/responsive.css">

<link rel="stylesheet" href="<?php echo base_url(); ?>/theme/stylesheets/modal.css"> 

</head>

Here's a more comprehensive view of the pertinent file structure:

Code:
|--root/

   |--application/

      |--views/

         |--pages/

         |--templates/

            |--header.php

   |--theme/

      |--images/

      |--javascripts/

      |--stylesheets/

         |--homepage.css

         |--modal.css

         |--style.css

         |--responsive.css

         |--skins/

            |--khaki.css

         |--websymbols/

            |--websymbols-regular-webfont.eot

            |--websymbols-regular-webfont.svg

            |--websymbols-regular-webfont.ttf

            |--websymbols-regular-webfont.woff

The homepage.css is the one attempting to import the websymbol font-family.

Thx again.

RE: relative paths inside css file - InsiteFX - 12-18-2015

If your using web fonts then all of your views will use them,
So why keep them in different theme folders?

assets
-- fonts
---- font-awesome
---- etc;

RE: relative paths inside css file - Aleksi - 12-18-2015

(12-18-2015, 05:15 AM)InsiteFX Wrote: If your using web fonts then all of your views will use them,
So why keep them in different theme folders?

assets
-- fonts
---- font-awesome
---- etc;

Actually, only my home page is using that particular web font. (And I only have the one theme folder, which functions as the assets folder.)

works now...? - Aleksi - 12-18-2015

I don't understand why this happened, but it seems to be working now.

I've been working on my site throughout the day and I still had the same problem, which is no surprise since I haven't addressed the problem at all today since I've been waiting for a kind soul to give me some advice.

But I just now reloaded the home page and the font-family is loading correctly.

Or 2/3 of it, since one of the special characters still isn't correct.

I haven't done anything to the css file in question, and I haven't moved any of the pertinent files around.

One thing coders hate is a mystery, and this is beyond my current knowledge-base to have any clue as to why it's suddenly (mostly) working.

So I'll just shrug my shoulders and carry on as if everything's ok, and will ignore that nebulous nagging feeling I have.

Thank you for your attention. Sorry to bother you.

Huh