Jump to content
  • Делаем профиль чуть удобнее


    aLEX49566

    Уменьшаем немного кнопки в профиле - "Обложка", "Настройки профиля", "Изменить профиль" и т.д. смотря какие доп. приложения установлены.

    По умолчанию в профиле, в мобильной версии влезает только три кнопки:

    Спойлер

    003.PNG.917396516df3b89e8ff4c2b01c6b719e.PNG

     

     После правок будет влезать пять и выглядит это куда интереснее:

    Спойлер

    001.PNG.351f6b8162fbf5c7dcabd54778045626.PNG

     

    Идем в шаблон custom.css и вставляем следующий стиль:

    /*доп пункт настроек в профиле*/
    @media screen and (max-width: 767px) {
    .ipsApp .ipsButton_small_mini {
      font-size: 13.0px;
      line-height: 2.33;
      padding: 0 8px;
    }
     }

     

    Мы создали новый стиль для ipsButton_small_mini.

    Далее, идем в шаблон profileHeader и находим строки с классом ipsButton_small, сразу после этого класса нужно добавить ipsButton_small_mini - это будет класс, который мы создали в custom.css, специально для мобильной версии, именно благодаря ему, пункты меню в профиле станут компактнее.

     

    Спойлер

    03.PNG.f0e10217d0661669d0422b184b9990fe.thumb.PNG.bc23b5f1cda51304191f6d8387a4862d.PNG

     

    Класс ipsButton_small_mini можно добавить для любой кнопки из стороннего приложения, в нашем случае таким оказалось приложение Private Profile.


    User Feedback

    Recommended Comments

    Делаем кнопку "Настройки профиля" как на ips4.7.

    Идем в шаблон profileHeader, находим 23 строку

    				<li>
    					<a href='{url="app=core&module=members&controller=profile&do=edit&id={$member->member_id}" base="front" seoTemplate="edit_profile" seoTitle="$member->members_seo_name"}' class='ipsButton ipsButton_small ipsButton_small_mini ipsButton_overlaid' data-ipsDialog data-ipsDialog-modal='true' data-ipsDialog-title='{lang="profile_edit"}'>
    						<i class='fa fa-pencil'></i>&nbsp;<span class='ipsResponsive_hidePhone ipsResponsive_inline'>&nbsp;&nbsp;{lang="profile_edit"}</span>
    					</a>
    				</li>

    Должно выглядеть так:

    Спойлер

    001.thumb.PNG.fb44e6674e7a58acd554348ca75e70e1.PNG

    Кнопка уже идет с классом ipsButton_small_mini, поэтому если не хотите, что бы она была маленькая, просто удалите этот класс.

    Спойлер

    003.PNG.781717ae794f3848a1d1f9c1ff1f4b02.PNG

     

    Link to comment
    Share on other sites



    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...