Specific formatting for header

Hello, we have some code that reads a director and its sub-directories for any and all files. Currently in our css we have it where for every directory be place a background on it. I would like to change the code slightly so that only top level directories will have the background but all sub-directories will not. Here is the code to go through the folders:

if ($files != null) {
    chdir ($rootDir);
    //sort files first, then folders alphabetically
    usort ($files, create_function ('$a,$b', '
      return  is_dir ($a)
        ? (is_dir ($b) ? strnatcasecmp ($a, $b) : 1)
        : (is_dir ($b) ? -1 : strnatcasecmp ($a, $b));
    '));
    
    echo '<ul>';
    foreach($files as $file) {
      chdir ($rootDir);
      if (is_dir("$file")){
        echo '<li class="folder"><div class="heading">'.$file.'</div>';
        getDirectory("$path/$file",($level+1));
        echo '</li>';
      } else {
        $info = pathinfo($file);
        $fileNameOnly = basename($file,'.'.$info['extension']);
        $file = str_replace(array('&',','), array('%26','%2C'), $file);
        $fileNameOnly2 = str_replace(array('_','&'), array(' ','&amp;'), $fileNameOnly);
        if (strpos($path, '/secure/') == FALSE)
          echo '<li class="file"><a href="/images/'.$path.'/'.$file.'" target="_blank">'.$fileNameOnly2.'</a></li>';
        else
          echo '<li class="file"><a href="/index.php?option=com_imagedownload&file=/images/'.$path.'/'.$file.'" target="_blank">'.$fileNameOnly2.'</a></li>';
      }
    }
    echo '</ul>';
  } else {
    echo '<ul><li class="noDownloads">No Downloads Available.</li></ul>';
  }
}

Open in new window


_______________________________________________________________________________

Below is the .css class that is being used:

#download-list  .heading{
	background-color: #c6b786;
}

#download-list li.folder{
	font-weight: bold;
	color: white;
}

Open in new window


Any help on this would be great
DancingFighterGAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Julian HansenConnect With a Mentor Commented:
This should do the trick
#download-list ul ul .heading {
	background: none !important;
}

Open in new window

0
 
Julian HansenCommented:
Try changing your style to

#download-list > li.folder{
	font-weight: bold;
	color: white;
}

Open in new window

0
 
DancingFighterGAuthor Commented:
JulianH,

This is the same code I posted. Did you mean to post something else?
0
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

 
DancingFighterGAuthor Commented:
Here is a screenshot of what the code does now. I simply want to take away the background from the sub-folders it finds

Screen formatting
0
 
Julian HansenCommented:
Not it is not. Note the first level selector '>'

#download-list > li.folder{ /* Note the extra '>' */
#download-list li.folder{
0
 
DancingFighterGAuthor Commented:
Oh I just noticed that. What does adding the ">" do?
0
 
DancingFighterGAuthor Commented:
The only thing it did is took away the white color on the header text
0
 
Julian HansenCommented:
The > means take only the immediate child so

<ul>
   <li>
      <ul>
         <li>
         </li>
      </ul>
   <li>

with your code would style li's at all levels

where as putting the > in would mean only the top level

Can you post your full code or the generated HTML output.
0
 
DancingFighterGAuthor Commented:
I've attached the css file and the default.php file that we are using.
template.css
default.php
0
 
Julian HansenCommented:
In fact this is probably more correct
#download-list > ul > li > div.heading {
  background-color: #C6B786;
}

Open in new window

Replace code in previous post with this.
0
 
DancingFighterGAuthor Commented:
It worked. Is there anyway to indent the sub items. This is what it looks like right now:
screen2.png
0
 
Julian HansenCommented:
That should be handled by lines 292 onwards of your stylesheet.

On my side I am seeing this using the stylesheet you posted. The changes recommended above should not have affected the indenting of your code.

Screenshot
0
 
DancingFighterGAuthor Commented:
I didnt see the new code that you posted until now. Just applied it but getting the same result. I've attached the file
template.css
0
 
DancingFighterGAuthor Commented:
Here is a screenshot of what I have right now:

screen3
0
 
DancingFighterGAuthor Commented:
Here is the php file that is doing to pull of the file system.
default.php
0
 
DancingFighterGAuthor Commented:
Hey Julian, I went back to this:

#download-list ul ul .heading {
      background: none !important;
}

Because it does not but the background on all the folders but I still want to indent. This is what it looks like now
screen3.png
0
 
Julian HansenCommented:
Ok but the indenting is done by margins - not by changing the background.

Somewhere in your styles you have removed the margin on your <ul> elements.

What browser are you using?
0
 
DancingFighterGAuthor Commented:
Great Work!!
0
 
Julian HansenCommented:
You are welcome - thanks for the points
0
All Courses

From novice to tech pro — start learning today.