On my web site I have an list that contains about 2 - 5 items depending on the day. The list is stored in the file: menu_upcoming_events.shtml
<ul>
<li>
<a
href="upcoming_events.shtml#paint_night_sep_2016"
title="Sat Sept 24th from 7:00-9:00 PM"
>
Sat Sept 24th from 7:00-9:00 PM
<br />
Paint Night with Bob Bowers!
<br />
</a>
</li>
<li>
<a
href="upcoming_events.shtml#two_guitars"
title="Sat Oct 15th from 7:30-10:00 PM"
>
Sat Oct 15th from 7:30-10:00 PM
<br />
Two Guitars / Two Bands
<br />
</a>
</li>
<li>
<a
href="upcoming_events.shtml#cooking"
title="Sat Nov 12th from 7:00-10:00 PM"
>
Sat Nov 12th from 7:00-10:00 PM
<br />
Father Steve Cooking
<br />
</a>
</li>
<li>
<a
href="Attachments/nothing_is_impossible.pdf"
target="_blank"
title="Just Published-"Nothing Is Impossible" A Book by Scott Shaeffer-Duffy">
Just Published-"Nothing Is Impossible"
<br />
A Book by Scott Shaeffer-Duffy
<br />
</a>
</li>
</ul>
The challenge is that this list is INCLUDED in a small section of the home page (index.shtml)
<div class="block_right_380_text_left" >
<p class="anchor_380">
<a name="upcoming_events_index_page">
Upcoming Events
</a>
</p>
<p>
<?php include("menu_upcoming_events.shtml");
?>
</p>
</div>
And it is also INCLUDED in the menu system (menu_primary.shtml)
<li><a class="link4" href="#">Upcoming Events</a>
<?php include("menu_upcoming_events.shtml");
?>
</li>
I would like the list of items to appear differently, depending on where it's INCLUDED (part of the menu system or a DIV of the index page). For example, the CSS for the menu system uses a sans-serif font and contains a different background color:
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #BDB76B;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
}
The Index.shtml page uses a CSS class link4:
a.link4:link {
font-family: "Times New Roman", Times, serif;
color: black;
font-size: 16px;
font-weight: 600;
background-color: inherit;
}
a.link4:visited {
font-family: "Times New Roman", Times, serif;
color: black;
font-size: 16px;
font-weight: 600;
background-color: inherit;
}
a.link4:hover {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-weight: 600;
background-color: inherit;
}
a.link4:active {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-weight: 600;
text-decoration: underline;
background-color: inherit;
}
How do I INCLUDE this one file, but have it appear differently in each of the two locations? Thanks for looking at this.
There's really very little link between your posted CSS and your posted include....
The only thing that CSS is altering is <a class="link4" href="#">Upcoming Events</a> nothing else because that class isn't applied to anything else (from what you've posted).
However, you can use general targeting based upon the elements....
.block_right_380_text_left ul li a {
/* CSS to alter the links in the include list when inside the div */
}
li ul li a {
/* CSS to alter the links in the include list when inside a list itself */
}
repeat for each CSS definition.
Altering the a.link4 classes CSS isn't going to do anything other than alter that one single link. Which doesn't appear to be part of the include itself.
You could be more specific with selectors (which is a good thing) if you merely add a class to the UL inside the include.
Note that ul.MenuBarHorizontal a.MenuBarItemSubmenu has zero bearing on any HTML you've posted here. That does not mean it can't. It may very well be a good selector to alter the included list..... There's just no way to tell based on what you've posted here.