Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions /

Affecting Sidebar with CSS


Reply


2 Posts   1603 Views

Avatar
TerryMiddleton

Community Member, 108 Posts

18 April 2009 at 4:21am

I would like to be able to affect the sidebar menu using CSS. How is this possible?

Basically, what I want to do is have a picture/graphic represent the menu 1 items (possibly menu 2) and be able to change out the image based on user interaction such as click.

I know how to accomplish the css part of setting the image, but I can figure out how to know what the id is of each menu 1 or menu 2.

Menu 1
submenu 2
submenu 2
Menu 1
submenu 2
submenu 2

Here is my sidebar.ss code:

<div id="Sidebar" class="typography">
   <div class="sidebarBox">
      
      
<ul>
   <% control Menu(1) %> <!-- Level I -->
    <li class="$LinkingMode"><a href="$Link" target="_self">$MenuTitle.XML</a><br />
    <% if LinkOrSection = section %>
    <% if Children %> <!-- Level II -->
    <ul class="submenu{$MenuCount}">
    <% control Children %>
    <li class="mlevel2"><a href="$Link" title="Go to the $Title.XML page">$MenuTitle</a></li>
    <% if LinkOrSection = section %> <!-- Level III -->
    <% if Children %>
    <ul class="submenu{$MenuCount}">
    <% control Children %>
    <li><a href="$Link" title="Go to the $Title.XML page">$MenuTitle</a></li>    
    <% end_control %>
    </ul>
    <% end_if %>
    <% end_if %>
    <% end_control %>
    </ul>
    <% end_if %>
    <% end_if %>
    </li>            
   <% end_control %>
</ul>

<div class="clear"></div>
<div id="sidebarSearch">$Searchform</div>
</div>
   
</div>

Avatar
Hamish

Community Member, 712 Posts

23 April 2009 at 10:51am

I would like to be able to affect the sidebar menu using CSS. How is this possible?

Have a look at your Layout.css file in your current theme directory. Scroll down to the menu styling - it should get you started. If you don't have a Layout.css file, have a look at the blackcandy theme Layout.css file for a good example of menu styling.

Basically, what I want to do is have a picture/graphic represent the menu 1 items (possibly menu 2) and be able to change out the image based on user interaction such as click.

Google around for some css styling tips and rollover effects. A rollover effect is achievable with the css :hover selector, other interactions like clicks will require javascript. These are independant of silverstripe, so you might get more luck at a css or scripting forum for specific solutions.