[CDB] Elegance

For style authors to post and receive feedback on 3.1.x styles still in development. Any development styles you wish to use on your live board should be installed with caution!
Get Involved
User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

[CDB] Elegance

Post by Arty » Thu Mar 05, 2015 8:37 pm

Style name: Elegance

This is a light elegant style with CSS3 gradients and shadows, based on premium XenForo style "Elegance"

Demo: click here (click color variations in header to see different color schemes)

Download: click here
GitHub repo: click here

License: BSD (GPL compatible)
Additionally Font Awesome and Glyph Icons included in style have their own licenses. See theme/fonts/*/license.txt for details.

Full page screenshot:
Image

Features:
  • Based on prosilver
  • All icons (except for forum/folder images and logo) have been replaced with Font Awesome and Glyph Icons glyphs.
  • Folder images and logo support high definition displays (such as Apple Retina). Samples taken with iPad Air, comparing style with prosilver so you could see the difference:
    Image
  • Restructured navigation. There are 3 navigation sections: main navigation, context navigation, breadcrumbs. You can see it on screenshot above. Main navigation selected item automatically switches based on page you are browsing. Context navigation changes from page to page. Number of unread private messages and notifications are shown above navigation in red circles, making it easy to spot (see screenshots above and below).
  • Sticky navigation. When you scroll down, navigation stays on top of browser window:
    Image
  • No more language specific icons. "Online" icon has been replaced with CSS3 ribbon that is shown semi-transparent above avatar:
    Image
  • CSS files have been changed to Sass, a very powerful language for generating stylesheets. Style loads only 1 CSS file instead of multiple CSS files, reducing page loading speed.
  • Style has several configuration options.
Configuration:
There are 2 configuration files that serve different purposes:
  • template/_style_config.html: It sets variables that can be changed in templates.
    • $HIDE_FORUM_DESCRIPTION: toggles forum title and description in header
    • $WRAP_HEADER: toggles inclusion of header and navigation into content wrapper
    • $WRAP_FOOTER: toggles inclusion of footer into content wrapper
  • theme/_style_config.scss: It sets variables that can be changed in theme. See "Sass" section below.
    • $show-logo: toggles logo in header
    • $show-forum-title: toggles forum title. See similar variable in template/_style_config.html
    • $center-logo: if enabled, logo will be centered. If disabled, logo will be aligned to left
    • $logo-width: logo width.
    • $logo-block-padding: padding above and below logo (used for short logos, like default one)
    • $profile-width: width of poster profile section. Unlike prosilver that uses percentages, this style uses fixed width for profiles that looks better at different screen resolutions.
    • $profile-side: Side for profile block in posts. Possible values are "left" or "right".
    • $use-wrapper: toggles content wrapper.
    • $max-width: toggles fixed width. Set to "none" to make layout fluid.
Sass:
This style uses Sass pre-processor for stylesheet. Sass is very powerful language that makes it possible to use variables, conditional statements and some functions in css files.

Instead of editing .css files you should edit .scss files and recompile stylesheet (takes few seconds and is very easy to fully automate). See this tutorial on how to recompile stylesheet.
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

User avatar
nextgen
Jr. Style Validator
Posts: 2334
Joined: Mon Jul 26, 2010 10:58 pm
Location: Guatemala
Name: Melvin García
Contact:

Re: [Dev] Elegance

Post by nextgen » Thu Mar 05, 2015 10:29 pm

Niceeeeeee :D

Testing here http://nextcrea.net/demo/#Elegance
Last edited by nextgen on Sat Mar 07, 2015 4:40 pm, edited 1 time in total.
メルビン・ガルシア • Xtrato SolutionsMy active styles for phpBBphpBB Argentina - Soporte en español🇦🇷

Please do NOT contact for support via PM or email.

User avatar
Meis2M
Translator
Posts: 879
Joined: Wed Mar 03, 2010 11:32 am
Location: IR.Damghan
Name: میثم نوبری
Contact:

Re: [Dev] Elegance

Post by Meis2M » Fri Mar 06, 2015 6:44 am

Hello Arty.
it is very beautiful style.

is it support RTL language?
can u put " Who is online" , "birthday" and "Statistics" in a white box ?
the "jump to" in topic should be white text.

Thanks
phpBB persian international support
Ultimate SEO Friendly URL - Extension
Follow us in Instagram
Free upgrade and install extensions on your forum - drop me PM

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: [Dev] Elegance

Post by Arty » Fri Mar 06, 2015 5:25 pm

Thanks.

Style updated. Fixed colors for buttons and few other small changes.
See first post for download link.
Meis2M wrote:is it support RTL language?
Yes, though there could be some minor issues.
Meis2M wrote:can u put " Who is online" , "birthday" and "Statistics" in a white box ?
Add this to common.scss

Code: Select all

.stat-block {
	@include section;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 4px 9px;
	> h3:first-child {
		@include section-heading;
		padding-left: 10px;
		padding-right: 10px;
	}
}
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

Elandiar
Registered User
Posts: 5
Joined: Thu Jan 29, 2015 9:43 pm

Re: [Dev] Elegance

Post by Elandiar » Fri Mar 06, 2015 5:28 pm

Great news. I thought you gave up creating styles for 3.1. But I'm glad you changed your mind. :)

User avatar
Raul [ThE KuKa]
Style Customisations
Style Customisations
Posts: 6536
Joined: Mon Dec 08, 2003 9:24 pm
Location: Spain
Name: Raul Arroyo
Contact:

Re: [Dev] Elegance

Post by Raul [ThE KuKa] » Fri Mar 06, 2015 5:59 pm

Great style, always has been, and now available in 3.1.x

Great job Arty!!! ;)
All unsolicited PMs will be ignored.
:warning: Knowledge Base | Documentation | Board rules | phpBB Styles Rules & Policies :warning:


If you like my styles, translations, etc. and want to show some appreciation, then feel free to Donate with Image
:flag_es: phpBB Spain - Online Since 2003 :heart:



User avatar
Syncr0n
Registered User
Posts: 9
Joined: Sat Sep 20, 2014 10:01 am
Location: Râmnicu Vâlcea
Contact:

Re: [Dev] Elegance

Post by Syncr0n » Sat Mar 07, 2015 7:54 am

How can I remove the navbar fixing?

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: [Dev] Elegance

Post by Arty » Sat Mar 07, 2015 8:36 am

In template/forum_fn.js find

Code: Select all

var styleConfig = {
	staticNavigation: true,
	staticNavigationMinWidth: 500,
	staticNavigationMinHeight: 400
};
and change staticNavigation: true, to staticNavigation: false,
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

User avatar
Syncr0n
Registered User
Posts: 9
Joined: Sat Sep 20, 2014 10:01 am
Location: Râmnicu Vâlcea
Contact:

Re: [Dev] Elegance

Post by Syncr0n » Sat Mar 07, 2015 8:42 am

Th you :*

User avatar
Syncr0n
Registered User
Posts: 9
Joined: Sat Sep 20, 2014 10:01 am
Location: Râmnicu Vâlcea
Contact:

Re: [Dev] Elegance

Post by Syncr0n » Sat Mar 07, 2015 3:22 pm

How can u put " Who is online" , "birthday" and "Statistics" in a white box ?
Please give code in CSS.
Th.

User avatar
Arty
Former Team Member
Posts: 16654
Joined: Wed Mar 06, 2002 2:36 pm
Name: Vjacheslav Trushkin
Contact:

Re: [Dev] Elegance

Post by Arty » Sat Mar 07, 2015 4:05 pm

Code is available above. This is how it looks compiled, so you could append to stylesheet.css

Code: Select all

.stat-block {
  background: #f4f4f4;
  border: 1px solid #f9f9f9;
  border-radius: 5px;
  padding: 4px 9px;
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%), -webkit-linear-gradient(top, rgba(204, 204, 204, 0.2) 0%, rgba(204, 204, 204, 0.25) 10px, rgba(204, 204, 204, 0) 50px);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to bottom, rgba(204, 204, 204, 0.2) 0%, rgba(204, 204, 204, 0.25) 10px, rgba(204, 204, 204, 0) 50px);
  box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.5) inset, 0 0 3px 1px rgba(128, 128, 128, 0.1) inset, 1px 1px 3px rgba(0, 0, 0, 0.15), 0 10px 10px -10px rgba(0, 0, 0, 0.2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33CCCCCC, endColorstr=#00CCCCCC);
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 4px 9px; }
  .stat-block > h3:first-child {
    margin: -5px -10px 5px;
    border-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #3462a0;
    border: 0 solid #3462a0;
    padding: 5px;
    text-transform: none;
    font-size: 14px;
    line-height: 18px;
    font-weight: normal;
    color: #fff;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 100%);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30FFFFFF, endColorstr=#00FFFFFF);
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.2);
    padding-left: 10px;
    padding-right: 10px; }
    @media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
      .stat-block > h3:first-child {
        border-radius: 0; } }
    .stat-block > h3:first-child a {
      color: #fff; }
      .stat-block > h3:first-child a:hover {
        color: #d6dfec; }
Vjacheslav Trushkin / Arty.
Free phpBB 3.1 styles | New project: Iconify - modern SVG framework

User avatar
Syncr0n
Registered User
Posts: 9
Joined: Sat Sep 20, 2014 10:01 am
Location: Râmnicu Vâlcea
Contact:

Re: [Dev] Elegance

Post by Syncr0n » Sat Mar 07, 2015 4:17 pm

Th you :D

User avatar
Mess
Registered User
Posts: 985
Joined: Wed Jul 01, 2009 6:37 am
Name: Kim

Re: [Dev] Elegance

Post by Mess » Sun Mar 08, 2015 1:32 pm

Wow, great job. :)

W0lverine
Registered User
Posts: 3
Joined: Sat Feb 14, 2015 4:30 pm
Contact:

Re: [Dev] Elegance

Post by W0lverine » Sun Mar 08, 2015 2:27 pm

Nice!
Hmm.. black version ?

User avatar
Mess
Registered User
Posts: 985
Joined: Wed Jul 01, 2009 6:37 am
Name: Kim

Re: [Dev] Elegance

Post by Mess » Sun Mar 08, 2015 3:52 pm

W0lverine wrote:Nice!
Hmm.. black version ?
Or better yet, a version where users can change color themselfs! :D

Locked

Return to “[3.1.x] Styles in Development”