Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 135
  • Last Modified:

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
0
DancingFighterG
Asked:
DancingFighterG
  • 11
  • 8
1 Solution
 
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
 
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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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:
This should do the trick
#download-list ul ul .heading {
	background: none !important;
}

Open in new window

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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 11
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now