How do I know where to place CSS codes? (For example, a drop down menu css code)

Permalink
So I found codes for dropdown menus, and I know where my main.css is , put the problem is I have no clue whee to place the drop down menu code.
For example , I can change the background color/image with the main css code(That I know how to do because you just change a couple words and numbers). But if I want to add the drop down menu css code, where exactly am I supposed to place it? By the way, I have C5 v 5.4.2 and dark chocolate default theme
thanks!

 
jordanlev replied on at Permalink Best Answer Reply
jordanlev
You need to be familiar with HTML and CSS code in order to modify the menu (if you're not, then unfortunately I don't think it's possible to modify it at all -- you can't just paste in code from elsewhere because it needs to tie into Concrete5's functionality that builds a menu from the pages in your sitemap). But if you are able to work with HTML/CSS, here's how you do it...

In Concrete5, you can modify the HTML output of any block by making a "custom template", which you usually do by copying the block's default template (that is, the code that outputs just the snippet of HTML for that one block on the page) and modifying it. But the Autonav block's built-in template is incredibly difficult to decipher, so I've made a template that's much easier to customize.
Here's how it works:

1) Create a new directory on your server here:
YOURSITE/blocks/autonav/


2) Save this page as "view.php" and upload that to the new directory on your server you just created:
https://raw.github.com/jordanlev/c5_clean_block_templates/master/aut...
(so the new file should be in YOURSITE/blocks/autonav/view.php)

3) Modify that new file to change the classes around or the html if you need to (which you should only need to do if your menu doesn't use list item <ul> and <li> tags).

Let me know if you have any questions about this or run into problems.

-Jordan
missdulcedepp replied on at Permalink Reply
SO this is the code(s) im using
#header {
      float:left;
      width:100%;
      background:#DAE0D2 url("bg.gif") repeat-x bottom;
      font-size:93%;
      line-height:normal;
}
#header ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
}
#header li {
      float:left;
      background:url("left_both.gif") no-repeat left top;


and for html
<div id="header">
 <ul>
  <li id="nav-home"><a href="#">Home</a></li>
  <li id="nav-news"><a href="#">News</a></li>
  <li id="nav-products"><a href="#">Products</a></li>
  <li id="nav-about"><a href="#">About</a></li>
  <li id="nav-contact"><a href="#">Contact</a></li>
 </ul>
</div>

Do i combine them in one file or what do I need to edit/change and or remove?
jordanlev replied on at Permalink Reply
jordanlev
Are you familiar with HTML/CSS, and just new to Concrete5? Or do you not really know how HTML/CSS works either?

(I am happy to help you out either way, I just need to know where your own level of understanding is at so I can provide an appropriate answer to you).

-Jordan
missdulcedepp replied on at Permalink Reply
Thanks for your response! Anyway, I can write (Very little though)in html/css, like for example I can add a background image to text, however, I dont know how to use the codes in concrete 5. Where am I supposed to "enter" them, if I go to dashboard>pages and themes>costumize theme>add CSS? OR in file manager>concrete>blocks>themes>autonav> (and add css file with the code)
and I read an article saying easy drop down menu, and at one point it said "just add this code to your main css" how do I add it to my main css? I know I can find the (read only) main css in (mysaitename).com/concrete/themes
Hope I didnt get you too confused! and thanks SOOO much for your help! I appreciate it so much!
Adreco replied on at Permalink Reply
Adreco
Concrete files are writable. If you've found your theme's Main CSS, it can be copied or downloaded to your desktop for editing with your preferred text editor (Dreamweaver, Gedit, Notepad++ etc).
Then the modified file can be uploaded to overwrite the original.
Enjoy :)
jordanlev replied on at Permalink Reply
jordanlev
Here's the issue... one of the nice features of any CMS (Wordpress, Drupal, Concrete5, etc.) is that it will automatically generate a navigation menu based on the pages in the site. This is great because after you as the designer have set up the site for someone else, they can just add a new page via the CMS and the new page will just automatically get added to the nav menu without them having to go into HTML or CSS code. This is kind of the whole point of a CMS actually -- to allow end-users to edit their site without having to modify HTML or CSS or PHP code.

Now, if you look at the code you've gotten, you'll see that it has some "id"'s in the list items that are specifically for certain pages -- "nav-home", "nav-news", etc. This doesn't work in a CMS because you can't guarantee that you will have those pages in the menu! Your user could very well add new pages or delete existing ones (this is kind of the whole point of using a CMS in the first place). So the place you got this code from that said "just add this code to your main css" was obviously not envisioning that you might want to use this menu in a Content Management System like Concrete5 (they were probably just assuming you'd use it in a "static HTML" site).

In Concrete5, there is a block called "Autonav" that outputs the nav menu for you based on the actual pages in the sitemap. But its HTML looks like this:
<ul class="nav-header">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <!-- etc... -->
</ul>


Notice that there is no <div id="header"> around it, and there are no id's on each list item (<li>). Sometimes it's easy to tweak your CSS to match this, but in your case it's not because there is no surrounding <div>. Unfortunately without a better understanding of HTML and CSS it's going to be somewhat difficult to change the menu you have to work in Concrete5. It's certainly possible, but requires a bit more experience with nav menus in general.

What I suggest is trying to find a different nav menu somehow, who's HTML and CSS doesn't rely on specific id's for each item and who's structure looks closer to C5's HTML (no surrounding <div>, just a <ul>). Once you've gotten that, you can just put the CSS in your theme's css file (for the dark chocolate theme, I believe it's located at YOURSITE/concrete/themes/dark_chocolate/main.css).

Wish I had an easier answer for you -- best of luck!

-Jordan
Steevb replied on at Permalink Reply
Steevb
Hi,

Let me get this right.

You want a drop down menu in the autonav, yes?

Your HTML mark up needs to reflect that.

<li><a href="#">Services</a> 
            <ul> 
               <li><a href="#">Cleaning</a></li> 
              <li><a href="#">Improvements</a></li> 
              <li><a href="#">Vision</a></li> 
            </ul> 
          </li>




And your CSS needs to style it.

Do this bit later, can be quite involved.

Is that want you want?
boomgraphics replied on at Permalink Reply
boomgraphics
You need a better css code. The one you have is definitely not for a CMS if you are a beginner. Try to find a css code that only requires one identifying class. That way, you can change this class to match the concrete5 autonav class, and it will work fine. Otherwise you need to buy one of the addons for drop down menus.

EDIT: jordanlev already said what I said. I need to read more. :-)