We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Issue with CSS

    • 5624
    • 26 Posts
    coldhand Reply #1, 15 years, 11 months ago
    Hi Guys,

    Can someone help me? Ripping my hair out at the moment. It is such a simple thing but still not working.

    On the base template, i have the following code

    <!DOCTYPE html>
<html lang="en">
<head>
	<title>[[++site_name]] | [[*longtitle:default='[[*pagetitle]]']]</title>
	<meta charset="[[++modx_charset]]" />
	<base href="[[++site_url]]" />
	<link rel="stylesheet" href="assets/templates/myTemplate/css/reset.css" type="type/css" media="screen" />
	<link rel="stylesheet" href="assets/templates/myTemplate/style.css" type="type/css" media="screen" />
  
</head>
<body>
<div id="container">
	<div id="header">
		<h1>[[*pagetitle]]</h1>
		[[Wayfinder? &startId='0']]
	</div>
	
	<div id="content">  
			[[*content]]  
	</div>
        <div id="footer">
                <h3> this is my footer </h3>
        </div>
</div>

</body>
</html>


    I have the ++site_url because its not at the root of the domain name, so mine is www.name.com/modx.

    The problem is the CSS styling does not appear on the webpages. Can someone point out what i am doing wrong please.

    Thanks in advanced!
      • 27672
      • 168 Posts
      slush puppie Reply #2, 15 years, 11 months ago 
      <link rel="stylesheet" href="assets/templates/myTemplate/css/reset.css" type="type/css" media="screen" />
<link rel="stylesheet" href="assets/templates/myTemplate/style.css" type="type/css" media="screen" />

      is style.css not in the same directory as reset.css (/myTemplate/css/) ? is the reset stylesheet loaded? or neither?
        • 27672
        • 168 Posts
        slush puppie Reply #3, 15 years, 11 months ago
        this is how i have done my calls in revo, which has been working for me:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>[[*longtitle]] :: [[++site_name]]</title>
<link rel="shortcut icon" href="favicon.ico" />
<link type="text/css" rel="stylesheet" media="screen" href="[[++base_url]]assets/templates/v1.0/reset.css" />
<link type="text/css" rel="stylesheet" media="screen" href="[[++base_url]]assets/templates/v1.0/site.css" />
<base href="[[++site_url]]" />
...
          • 36926
          • 701 Posts
          bennyb Reply #4, 15 years, 11 months ago
          Quote from: slush at Oct 25, 2010, 02:31 PM

          this is how i have done my calls in revo, which has been working for me:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>[[*longtitle]] :: [[++site_name]]</title>
<link rel="shortcut icon" href="favicon.ico" />
<link type="text/css" rel="stylesheet" media="screen" href="[[++base_url]]assets/templates/v1.0/reset.css" />
<link type="text/css" rel="stylesheet" media="screen" href="[[++base_url]]assets/templates/v1.0/site.css" />
<base href="[[++site_url]]" />
...



          You saying you’ve now got this working or you still having issues?
            • 5340
            • 1,624 Posts
            cipa Reply #5, 15 years, 11 months ago
            If you put the <base href="[[++site_url]]" /> before the css and javascript kinks you can remove [[++base_url]] from the paths
              Responsive CSS Grid: cipalabs.com/projects/metal/
              Blog: MODX Tutorials & Articles
              • 5624
              • 26 Posts
              coldhand Reply #6, 15 years, 11 months ago
              This is how i finally got it working! I think there is an issue in the way you write the actual line for styling sheets.

              <base href="[[++site_url]]" />
              <link rel="stylesheet" type="text/css" media="screen" href="assets/templates/myTemplate/css/reset.css" />
              <link rel="stylesheet" type="text/css" media="screen" href="assets/templates/myTemplate/css/style.css" />

              base href - used because it is in another folder after the domain name (www.helloworld.com/modx). Base href needs to be added before the stylesheets. For those who install directly to the root of the domain (www.helloworld.com), i don’t think you don’t necessarily need to add the base href.

              I think there is an issue (possible bug) with the order the rel, type and media is written or along those lines.

              (I placed the style.css originally in the ’myTemplate’ folder to troubleshoot).

              Thank you all for helping. grin
                • 18373 ☆ A M B ☆
                • 3,141 Posts
                Mark Hamstra Reply #7, 15 years, 11 months ago
                Base href starts from the point you add it in your header..

                Place it before the stylesheet declarations, and it will be taken into account (so it’s looking from /modx/assets/...). Please it after it, and it starts from webroot... I think the first slash also is important, iirc with slash it’s from the webroot, without slash starts from the current directory (so be careful with friendly urls! wink)
                  Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

                  Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.
                  • 3749
                  • 24,544 Posts
                  BobRay Reply #8, 15 years, 11 months ago
                  It probably worked before because the site was in the web root and the <base href> wasn’t necessary. Now that you’re in a subdirectory, the <base href> needs to come before the CSS references so the browser knows where to look for assets/, without which, it can’t find anything else in that path.
                    Did I help you? Buy me a beer
                    Get my Book: MODX:The Official Guide
                    MODX info for everyone: http://bobsguides.com/modx.html
                    My MODX Extras
                    Bob's Guides is now hosted at A2 MODX Hosting
                    • 27672
                    • 168 Posts
                    slush puppie Reply #9, 15 years, 11 months ago
                    bennyb:
                    You saying you’ve now got this working or you still having issues?
                    i was not the original poster, i was just showing up how i link my stylesheets at the top of a working modx template. smiley

                    coldhand, glad you found a solution, looks like you were just pointing to the wrong directory. i did that the other day - oh man, wasted about 4 hours, ended up redoing an entire layout (new html and new css), because i thought something was borked, but it turned out i had just not linked a base stylesheet properly.