Has anybody tried loading a css menu into a webpage as an external file? I'm currently working on a new website for which I have made a css menu with the HTML Editor. The menu works fine on the template page, but the problem is that the site will eventually have a large number of pages. The menu will have to be changed periodically, so I would have to change it at all pages. I could use the snippets option for that, but that still results in changing all pages.
Anybody any ideas?
Johan
Registered User
47 posts
Jo Rice
Senior Advisor
10,951 posts
Hiya Johan,
Just take the CSS and put it into it's own file and name it whatever.css
Now take the code that has been put into the HTML file into that css file without any thing other than the CSS tags themselves. In other words you don't need the <style...></style> tags at all just what's in between them. You don't need the <link....> tags, you don't need any type of document Doctypes etc. just start it with the tags themselves like so:
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #aaaaaa;
background: #080808;
}
a:focus { outline:none; }
a:link, a:visited { color: #FFAF37; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #40627D; text-decoration: underline; }
Add a link to the file inside your Head area (you can put this right by the current link statements in there already. The highlighted text below is where you have the css file residing and the name of it, basically it's the path which should be either in the root of your site files or in a folder called css as shown below:
Put that link in your <head> tag area for all pages that will be using that css file. That's it nothing more to do other than edit the CSS file as needed. Hope that helps.
Just take the CSS and put it into it's own file and name it whatever.css
Now take the code that has been put into the HTML file into that css file without any thing other than the CSS tags themselves. In other words you don't need the <style...></style> tags at all just what's in between them. You don't need the <link....> tags, you don't need any type of document Doctypes etc. just start it with the tags themselves like so:
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #aaaaaa;
background: #080808;
}
a:focus { outline:none; }
a:link, a:visited { color: #FFAF37; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #40627D; text-decoration: underline; }
Add a link to the file inside your Head area (you can put this right by the current link statements in there already. The highlighted text below is where you have the css file residing and the name of it, basically it's the path which should be either in the root of your site files or in a folder called css as shown below:
<link href="css/style.css" rel="stylesheet" type="text/css" />
Put that link in your <head> tag area for all pages that will be using that css file. That's it nothing more to do other than edit the CSS file as needed. Hope that helps.
Johan
Registered User
47 posts
Hi Jo Ann,
Thanks for your response. I'm not sure of if I fully understand you, but maybe I did not make myself fully clear. The .css for the menu is already in a separate file which is linked to the webpage as you describe. What I am talking about are the menu items. They currently appear in the page as a list <ul>...</ul>. Changing menu items means changing the list, or not?
Johan
Thanks for your response. I'm not sure of if I fully understand you, but maybe I did not make myself fully clear. The .css for the menu is already in a separate file which is linked to the webpage as you describe. What I am talking about are the menu items. They currently appear in the page as a list <ul>...</ul>. Changing menu items means changing the list, or not?
Johan
Inger
Senior Advisor
14,567 posts
Yes, it does. Having said that, I must add that I have never actually tried it with menus made with the CC Editor. I usually create my own menus, and in those cases I just add a <li></li> for a new menu item.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Johan
Registered User
47 posts
Yes, that's what I thought. But, I haven't given up hope for some sort of central management of the menu items. Searching the web I have found recommendations to use php (<?php include>) for content that is the same for all pages (eg footers, menus). I'm not sure if this will work with the css menu. Has anyone used this before?
Jo Rice
Senior Advisor
10,951 posts
It will work for pretty much anything as long as all the file links (css page links for the most part) are correct and as long as the code is implemented correctly.
Philip Lench
Registered User
198 posts
I'll start by helping Johan.
On my site www.harriers-online.co.uk I have around 3000 pages to take care of so I needed something that loads my static content from single files into all pages on the fly.
I opted to go the SHTML route 6 years ago and it's always worked well for me. For each snippet of code I create a text file and for each text file I insert Virtual comments where needed into all my templates (I use around 10 different templates on the one site)
So for the Meta info the Meta code goes into a Text file while a Comment is created like so: <!--#include virtual="meta.html" --> That goes between the <head> tags
For the site banner I have a Header file that includes the menu and the opening container table code and is called like so: <!--#include virtual="header.html" --> That is placed immediately after the opening body tag.
I have text files for the right hand side bar, the footer code including Analytics etc, the Social bar that appears in some content : FB, Twitter etc and other similar static coding.
When you need to make a change you just change the text file and then publish that for all pages to then update automatically.
The only place I cannot use these files is on the message board and that has to be hard coded into the overall_ header.php in the forum software.
This is where my 2 questions comes in.
I have just gone over to the Coffee Cup CSS menu after years of using the old DHTML menu code
On my forum at www.harriers-online.co.uk/forum some of the menu buttons text show as a dark olive green and not the white that is on the main website.
I have changed the Doc Type to a looser version but still it doesn't show up as white text. I'm thinking that it's picking up the forum CSS formatting even though I use the menus own CSS on the forum alongside the native CSS. Would an 'inherit' tag cause that to happen?
I would also like to know how to centre the menu on the forum. It will not pick up the class id of the CSS and it doesn't react to any centreing code that I hard code around the menu on there.
The other problem is that on different monitor resolutions the menu wraps. Is there some way to make the menu display in all resolutions and not just the particular one that I use (1280 x 1024)
I think that's it
On my site www.harriers-online.co.uk I have around 3000 pages to take care of so I needed something that loads my static content from single files into all pages on the fly.
I opted to go the SHTML route 6 years ago and it's always worked well for me. For each snippet of code I create a text file and for each text file I insert Virtual comments where needed into all my templates (I use around 10 different templates on the one site)
So for the Meta info the Meta code goes into a Text file while a Comment is created like so: <!--#include virtual="meta.html" --> That goes between the <head> tags
For the site banner I have a Header file that includes the menu and the opening container table code and is called like so: <!--#include virtual="header.html" --> That is placed immediately after the opening body tag.
I have text files for the right hand side bar, the footer code including Analytics etc, the Social bar that appears in some content : FB, Twitter etc and other similar static coding.
When you need to make a change you just change the text file and then publish that for all pages to then update automatically.
The only place I cannot use these files is on the message board and that has to be hard coded into the overall_ header.php in the forum software.
This is where my 2 questions comes in.
I have just gone over to the Coffee Cup CSS menu after years of using the old DHTML menu code
On my forum at www.harriers-online.co.uk/forum some of the menu buttons text show as a dark olive green and not the white that is on the main website.
I have changed the Doc Type to a looser version but still it doesn't show up as white text. I'm thinking that it's picking up the forum CSS formatting even though I use the menus own CSS on the forum alongside the native CSS. Would an 'inherit' tag cause that to happen?
I would also like to know how to centre the menu on the forum. It will not pick up the class id of the CSS and it doesn't react to any centreing code that I hard code around the menu on there.
The other problem is that on different monitor resolutions the menu wraps. Is there some way to make the menu display in all resolutions and not just the particular one that I use (1280 x 1024)
I think that's it
Inger
Senior Advisor
14,567 posts
Philip, Read my reply to Jayjay about centering the css menu in this thread: http://www.coffeecup.com/forums/website … ost178592.
You other (first, rather) question needs a bit of checking your code. I'll come back to you....
You other (first, rather) question needs a bit of checking your code. I'll come back to you....
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger
Senior Advisor
14,567 posts
While I was checking, the navigation all of a sudden turned white and red. Did you fix it in the menatime?
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Savannah Ayub
Registered User
2 posts
The following is coded in a left column.inc file. There is a member log in which the user passes a user id on.
This works but I want to replace with Coffeecup menu listed further down below which does not work. New to PHP so I am in new water here.
<?php
if(isset($_SESSION['id'])){
if($_SESSION['adminlevel']>5){
echo "<br><br><center><p><a href=\"memberlist.php\">Member Directory</a></p>";
echo "<br><center><p><a href=\"memberlist.php\">Member private page</a></p>";
echo "<br><center><p><a href=\"info.pdf\">Membership Information</a></p><br>";
} else { echo "<br>More options coming soon<br>";}
echo "<a href='members.php?page=logout'>Logout</a></center>";
}
?>
Tried this code which fails when nested in a PHP script???
<?php
if(isset($_SESSION['id'])){
if($_SESSION['adminlevel']>5){
<ul class="menu-menu sf-vertical">
<li><a href="http://myweb.com/memberlist.php">Member Directory</a></li>
<li><a href="http://myweb.com/members.php">Member private page</a></li>
<li><a href="http://myweb.com/info.pdf">Membership Information</a></li>
<li><a href="http://myweb.com/members.php?page=logout">Logout</a></li>
</ul>
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/superfish-vertical.css" media="screen">
} else { echo "<br>More options coming soon<br>";}
}
?>
This works but I want to replace with Coffeecup menu listed further down below which does not work. New to PHP so I am in new water here.
<?php
if(isset($_SESSION['id'])){
if($_SESSION['adminlevel']>5){
echo "<br><br><center><p><a href=\"memberlist.php\">Member Directory</a></p>";
echo "<br><center><p><a href=\"memberlist.php\">Member private page</a></p>";
echo "<br><center><p><a href=\"info.pdf\">Membership Information</a></p><br>";
} else { echo "<br>More options coming soon<br>";}
echo "<a href='members.php?page=logout'>Logout</a></center>";
}
?>
Tried this code which fails when nested in a PHP script???
<?php
if(isset($_SESSION['id'])){
if($_SESSION['adminlevel']>5){
<ul class="menu-menu sf-vertical">
<li><a href="http://myweb.com/memberlist.php">Member Directory</a></li>
<li><a href="http://myweb.com/members.php">Member private page</a></li>
<li><a href="http://myweb.com/info.pdf">Membership Information</a></li>
<li><a href="http://myweb.com/members.php?page=logout">Logout</a></li>
</ul>
<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/superfish-vertical.css" media="screen">
} else { echo "<br>More options coming soon<br>";}
}
?>
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
