How to customize GitLab Group Page?

Question

I have installed GitLab Omnibus package and ran it in Ubuntu 14.04. It's all working fine. I have customized the icons but I'm not able to change the code. It seems that it's written using the Ruby on Rails framework.

The Group Page currently looks like this: Gitlab_Group_Page_Image.

Now, I want to change the Group Page design from Listview to Gridview.

How would I do this?

Answer 1

You can change style by adding inline css in the following path,

/opt/gitlab/embedded/service/gitlab-rails/app/views/dashboard/groups

You can write both inline style and internal style in this file,

Example:

- page_title "Groups"
%h3.page-title
  Group Membership
  - if current_user.can_create_group?
    %span.pull-right
      = link_to new_group_path, class: "btn btn-new" do
        %i.fa.fa-plus
        New Group
%p.light
  Group members have access to all group projects.
%hr
.panel.panel-default
  .panel-heading
    %strong Groups
    (#{@group_members.count})
  %ul.well-list
    - @group_members.each do |group_member|
      - group = group_member.group
      %li.some{ :style => "width:33%;float:left;" }
        .pull-right
          - if can?(current_user, :admin_group, group)
            = link_to edit_group_path(group), class: "btn-sm btn btn-grouped" do
              %i.fa.fa-cogs
              Settings

          - if can?(current_user, :destroy_group_member, group_member)
            = link_to leave_group_group_members_path(group), data: { confirm: leave_group_message(group.name) }, method: :delete, class: "btn-sm btn btn-grouped", title: 'Remove user from group' do
              %i.fa.fa-sign-out
              Leave

        = image_tag group_icon(group), class: "avatar s40 avatar-tile"
        = link_to group, class: 'group-name' do
          %strong= group.name

        as
        %strong #{group_member.human_access}

        %div.light
          #{pluralize(group.projects.count, "project")}, #{pluralize(group.users.count, "user")}

= paginate @group_members
<style>
header.navbar-gitlab .container .title a{color:red;}
</style>