Jump to:

3443 Posts in 1030 Topics by 871 members

Template Questions

SilverStripe Forums » Template Questions » Affecting Sidebar with CSS

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1548 Views
  • TerryMiddleton
    Avatar
    Community Member
    108 Posts

    Affecting Sidebar with CSS Link to this post

    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>

  • Hamish
    Avatar
    Community Member
    712 Posts

    Re: Affecting Sidebar with CSS Link to this post

    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.

    1548 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.