Customization

[fpoirier1]

Hey there!

Let's say I wanna customize the topbar of my app. I have this HTML code :

<template name="topbar">
  <header class="topbar fixed ui inverted menu">
      <div class="item"><img src="/img/logo.png"></div>
      <a class="item">My Clients</a>
      <a class="item">All Clients</a>
      <a class="item">Supervisor</a>
      <a class="item">Analytics</a>
  </header>
</template>

And, I wanna customize the topbar like this :

// client/stylesheets/topbar.import.less
@topbarItemVerticalPadding: @relative16px;
@topbarHeight : (@topbarItemVerticalPadding * 2) + 2em;

.topbar.ui.menu{
  min-height: @topbarHeight;  

  .item{
    padding-top: @topbarItemVerticalPadding;
    padding-bottom: @topbarItemVerticalPadding;
  }
}

The thing is I don't have access to the @relative16px variable in topbar.import.less obviously because all the import for semantice is in client/stylesheets/semantic/.

My question is how do I access semanctic-ui variable in my other stylesheets ? I think it would be weird to define the topbar in theme folder client/stylesheets/semantic/site since I don't wanna change the style of the menu collection.

Thanks for your help !

[jlukic]

There are special override/variable files for parsing per-element customization. Keeping these separated from layout code helps make it easier to port these extensions between projects.

The files src/site/collections/menu.overrides is a LESS file that has access to all variables as defined for menu. So this is the best place to put menu specific extensions to menu like the example you gave above.

Instead of specifying these additional topbar variables in that file it may make more sense to include them inside src/site/collections/menu.variables. Putting them at the top of the file will function as well though.

I'll try to extend the theming docs to include a reference to not just modifying variables, but also adding your own 'variations' and 'types' of elements.

[fpoirier1]

That would be great! Thanks for your help!

[fpoirier1]

Can I create import files under the site folder something like /client/semantic/site/views/topbar.import.less?

[jlukic]

You can do anything from that override file which LESS will let you, including importing additional files.