Drift - Light 1.5.22.0
- Thread starter Dad.
- Start date
Daniel Thomann
Active member
Finally I'll apply the fix. Thanks a lotJust an update, we figured out the IE bug, patching it now.
So far, no bugs have been reported (other than the styler IE bug, which is unrelated to XenForo). Unless anyone has anything to add, we can begin work on the dark version as soon as we squash the bug.
Awesome work to you, too
Have a lot fun to play around with the style 
--
New Extra.css - Don't know what I was thinking after I postet my last Extra.css because there are some static entries and a double entry.. anyway. here is my recent file:
Code:
/***** [start] CUSTOMIZED STYLE FOR OWN HOMEPAGE *****/
/* USED FOR SEARCH TABS ON SEARCH SITE */
.tabs {
border-top: 1px @secondaryLight solid !important;
border-bottom: 1px @secondaryLight solid;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
form.xenForm {
background-color: @textCtrlBackground;
border-bottom: 1px @secondaryLight solid;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* QUICKREPLY - Margin-Correction */
.quickReply {
margin-top: -20px !important;
margin-left: -10px !important;
margin-right: -10px !important;
margin-bottom: 0px !important;
}
/* MEMBERCARD - STATS AS LIST */
dl.userStats.pairsInline {
font-weight: bold;
display: block;
}
dl.userStats.pairsInline dd {
font-weight: bold;
display: block;
float: none;
text-align: right;
}
dl.userStats.pairsInline dt {
font-weight: bold;
float: left;
display: block;
}
/***** [end] CUSTOMIZED STYLE FOR OWN HOMEPAGE *****/
/***** [start] CUSTOMIZED STYLE FOR ADDONS *****/
/* POSTRATING - MEMBERCARD */
.dark_postrating_positive { color: #16c513; }
.dark_postrating_negative { color: #c51c13; }
/* USED TO SHOW ELEMENTS OF THE XENPORTA BEARKOUT OF CONTAINER OPTION */
#content.EWRporta_Portal .breadBoxTop { display: block !important; }
#content.EWRporta_Portal .titleBar { display: block !important; }
/* USED FOR XENPORTA > RECENTNEWS */
#recentNews .recentNews .primaryContent .subHeading {
border-top: 1px @secondaryLight solid !important;
border-bottom: 1px @secondaryLight solid;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#recentNews .recentNews .sectionFooter {
border-top: 1px @secondaryLight solid;
border-bottom: 0px;
}
/* USED FOR XENPORTA > RECENTNEWS > DATE BLOCK */
.recentNews .newsDate {
margin-top: -5px;
border: 1px solid @primaryLight;
border-radius: 6px 6px;
background-color: @primaryLighterStill;
margin-left: -40px !important;
}
/* USED FOR XENPORTA > GENERAL LAYOUT */
.EWRporta_Portal .mainContainer .mainContent {
padding: 16px !important;
}
.mainContainer .mainContent .section {
background-color: @contentBackground;
border: 0px;
border-radius: 0px;
}
/* USED FOR XENPORTA > RECENTTHREADS */
#recentThreads .sectionHeaders {
border-top: 1px @secondaryLight solid;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* USED FOR XENPORTA > RECENTSLIDER */
#recentSlider .ui-tabs-nav {
width: 100%;
}
/* USED FOR LNBLOGS AND XENATTENDO */
.topCtrl {
margin-top: 15px !important;
}
/* USED FOR XENATTENDO */
.blockCtrl {
margin-right: 130px !important;
}
/* USED FOR XENPORTA COPYRIGHT NOTICE */
.sectionMain.footerBreakout {
background-color: transparent !important;
border: 0 !important;
}
/* USED FOR XENCARTA */
.pageContent_padding { padding: 16px !important; }
/***** [end] CUSTOMIZED STYLE FOR ADDONS *****/Edit 09. Jan 2012: Updated for postrating from Dark and XenCarta, added customizations from own Homepage and fixed the general padding from 8px 10px to 16px
Daniel Thomann
Active member
Customizing the ad_styler
Warning: These changes will revert after the style is updated. Also these changes are unsupported!
In this post, I'll show you two things:
Add a font
If you want to add more fonts, you'll have to edit the styleBar.settings.js (found here: xenforo-base-path/js/ad_styler/1.0/styles/drift/styleBar.settings.js).
In this example, I'll add the googlefont "Oldenburg".
1. (google fonts only) First, you'll have to add the fonts to the sb_gfonts variable.
Line 5
2. Now you'll have to add the font to the font list
Line 24:
That was it! your Font should be visible in the ad_styler (make sure, you refresh the page).
Modify the presets
The presets are also in the styleBar.settings.js (found here: xenforo-base-path/js/ad_styler/1.0/styles/drift/styleBar.settings.js).
go to the bottom of the script and you'll find the last preset in the array. I'll show you an example of a preset you shouldn't really use:
Note that you can't save the font within a preset.
Also make sure, that you increase the array number for each preset.
That's it!
ad_styler - css effect classes
Example: If you have a h2-class in the section-class and you change the font, the h2 will stay the same. You dislike this? Here's the solution. These settings are in the css.php-file (found here: xenforo-base-path/js/ad_styler/1.0/styles/drift/css.php)
Not much to say, just see an example:
Line 18:
I hope this helps someone out there.
Warning: These changes will revert after the style is updated. Also these changes are unsupported!
In this post, I'll show you two things:
- How to add more fonts (google fonts)
- How to modify the presets
- How to add more locations, where the font changes using the ad_styler
Add a font
If you want to add more fonts, you'll have to edit the styleBar.settings.js (found here: xenforo-base-path/js/ad_styler/1.0/styles/drift/styleBar.settings.js).
In this example, I'll add the googlefont "Oldenburg".
1. (google fonts only) First, you'll have to add the fonts to the sb_gfonts variable.
Line 5
Code:
sb_gfonts = 'Oldenburg, Oswald, Inconsolata, Droid Sans';Line 24:
Code:
drift_html_font : [
'font',
[
'sans-serif',
'arial',
'inconsolata',
'Oldenburg',
'Oswald',
'times new roman',
'droid sans'
]
]Modify the presets
The presets are also in the styleBar.settings.js (found here: xenforo-base-path/js/ad_styler/1.0/styles/drift/styleBar.settings.js).
go to the bottom of the script and you'll find the last preset in the array. I'll show you an example of a preset you shouldn't really use:
Code:
sb_preset[5] = {
name : 'Crazy Preset',
drift_html_bg_color : '#990099',
drift_html_bg_pattern : 'url(js/ad_styler/1.0/imgs/bgs/vertical_1.png)',
drift_main_color : '#009900'
}Also make sure, that you increase the array number for each preset.
That's it!
ad_styler - css effect classes
Example: If you have a h2-class in the section-class and you change the font, the h2 will stay the same. You dislike this? Here's the solution. These settings are in the css.php-file (found here: xenforo-base-path/js/ad_styler/1.0/styles/drift/css.php)
Not much to say, just see an example:
Line 18:
Code:
#logo h1,
.titleBar h1,
.displayBanner_main h1,
.section h1,
.section h2,
.section h3,
.categoryText h3 {
font-family: <?php get_value( 'drift_html_font' ); ?>, sans-serif;
}I hope this helps someone out there.
Daniel Thomann
Active member
Another Extra.css post.
I felt I needed to post this update because it makes the 3 column layout of xenporta and this style "more" compatible (see screenshot).
There are also small additions you can discover. The Signup Button is now colored like @mainHue but does not update on a change in the ad_styler. This gives some kind of "highlight".
As always, test this first.
I felt I needed to post this update because it makes the 3 column layout of xenporta and this style "more" compatible (see screenshot).
There are also small additions you can discover. The Signup Button is now colored like @mainHue but does not update on a change in the ad_styler. This gives some kind of "highlight".
As always, test this first.
Code:
/***** [start] CUSTOMIZED STYLE FOR OWN HOMEPAGE *****/
/* USED FOR PAGE-LOGIN HEADER */
#pageLogin > .textHeading {
padding: @subHeading.padding-top @subHeading.padding-right @subHeading.padding-bottom @subHeading.padding-left;
}
/* USED FOR SEARCH TABS ON SEARCH SITE */
.tabs {
border-top: 1px @secondaryLight solid !important;
border-bottom: 1px @secondaryLight solid;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
form.xenForm {
background-color: @textCtrlBackground;
border-bottom: 1px @secondaryLight solid;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* QUICKREPLY - Margin-Correction */
.quickReply {
margin-top: -20px !important;
margin-left: -10px !important;
margin-right: -10px !important;
margin-bottom: 0px !important;
}
/* MEMBERCARD - STATS AS LIST */
dl.userStats.pairsInline {
font-weight: bold;
display: block;
}
dl.userStats.pairsInline dd {
font-weight: bold;
display: block;
float: none;
text-align: right;
}
dl.userStats.pairsInline dt {
font-weight: bold;
float: left;
display: block;
}
#SignupButton .inner {
background:url("@imagePath/style/grad_light_top.png") repeat-x 0px -30px @mainHue;
border-bottom: 1px solid @primaryDark;
}
#SignupButton a.inner:hover {
background:url("@imagePath/style/grad_light_top.png") repeat-x 0px -30px @primaryLightish;
border-bottom: 1px solid @primaryDark;
}
/***** [end] CUSTOMIZED STYLE FOR OWN HOMEPAGE *****/
/***** [start] CUSTOMIZED STYLE FOR ADDONS *****/
/* POSTRATING - MEMBERCARD */
.dark_postrating_positive { color: #16c513; }
.dark_postrating_negative { color: #c51c13; }
/* USED TO SHOW ELEMENTS OF THE XENPORTA BEARKOUT OF CONTAINER OPTION */
#content.EWRporta_Portal .breadBoxTop { display: block !important; }
#content.EWRporta_Portal .titleBar { display: none !important; }
/* USED FOR XENPORTA > RECENTNEWS */
#recentNews .recentNews .primaryContent {
border-radius: 5px;
border-bottom: 0px;
}
#recentNews .recentNews .primaryContent .subHeading {
border-top: 1px @secondaryLight solid;
border-bottom: 1px @secondaryLight solid;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
#recentNews .recentNews .primaryContent .sectionFooter {
border-top: 1px @secondaryLight solid;
border-bottom: 1px @secondaryLight solid;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
/* USED FOR XENPORTA > RECENTNEWS > DATE BLOCK */
.recentNews .newsDate {
margin-top: -5px;
border: 1px solid @primaryLight;
border-radius: 6px 6px;
background-color: @primaryLighterStill;
margin-left: -40px !important;
}
/* USED FOR XENPORTA > GENERAL LAYOUT */
.EWRporta_Portal .mainContainer .mainContent {
padding: 16px !important;
}
.mainContainer .mainContent .section {
background-color: @contentBackground;
border: 0px;
border-radius: 0px;
}
/* USED FOR XENPORTA 3 COLUMN LAYOUT */
.EWRporta_Portal .btmLeftBlocks,
.EWRporta_Portal .midLeftBlocks,
.EWRporta_Portal .topLeftBlocks {
margin-left: -16px;
margin-top: -16px;
padding-top: 46px;
}
.EWRporta_Portal .btmLeftBlocks,
.EWRporta_Portal .midLeftBlocks,
.EWRporta_Portal .topLeftBlocks {
background: none;
margin-left: -16px;
margin-top: 0px;
padding-top: 0px;
}
.btmLeftBlocks .section > div,
.midLeftBlocks .section > div,
.topLeftBlocks .section > div {
background-color: rgba(208, 212, 217, .4);
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 1px @secondaryLight solid;
border-bottom: 1px @secondaryLight solid;
margin-top: 5px;
}
.btmLeftBlocks .section:first-child > div,
.midLeftBlocks .section:first-child > div,
.topLeftBlocks .section:first-child > div {
margin-top: 0px !important;
}
.btmRightBlocks,
.midRightBlocks,
.topRightBlocks {
background: none;
}
/* USED FOR XENPORTA > RECENTTHREADS */
#recentThreads .sectionHeaders {
border-top: 1px @secondaryLight solid;
border-radius: 5px;
}
/* USED FOR XENPORTA > RECENTSLIDER */
#recentSlider .ui-tabs-nav {
width: 100%;
min-width: 150px;
}
/* USED FOR LNBLOGS AND XENATENDO */
.topCtrl {
margin-top: 15px !important;
}
/* USED FOR XENATTENDO */
.blockCtrl {
margin-right: 130px !important;
}
/* USED FOR XENPORTA COPYRIGHT NOTICE */
.sectionMain.footerBreakout {
background-color: transparent !important;
border: 0 !important;
}
/* USED FOR XENCARTA */
.pageContent_padding { padding: 16px !important; }
/* RECENTSLIDER SPECIAL ADDITION */
#recentSlider {
width: 700px;
margin: 0 auto;
}
/***** [end] CUSTOMIZED STYLE FOR ADDONS *****/Attachments
Drift product version 1.0.1 for XenForo 1.1.X released today. Bug fixes include changes to the Styler that allow for it to work with any other Product that uses a styler (such as Class), the ability to attach the styler to the left or right of the window frame, and also we minified the JavaScript so it loads MUCH faster. The AD Styler is now just 5KB of JavaScript.
A few other minor bug fixes were also patched in order to get ready for the highly anticipated Drift Dark!
Existing customers can redownload from their customer area.
A few other minor bug fixes were also patched in order to get ready for the highly anticipated Drift Dark!
Existing customers can redownload from their customer area.
Just letting you know that this now works.
Daniel Thomann
Active member
I have a suggestion (or bug) for the template sidebar_visitor_panel:
in my Firefox 8.0 (updating), the avatar is a little blurry too sharp / pixelated...
Here my suggestion - change it to:
HTML:
<xen:avatar user="$visitor" size="m" img="true" />Here my suggestion - change it to:
HTML:
<xen:avatar user="$visitor" size="s" img="true" />Drift 1.1.0 released today. Overall, this is just a small UI change. I updated some of the grays to be a bit lighter which is easier on the eyes. Still plenty of contrast for everyone to be able to see without any problems. I also changed the sidebar quite a bit.
Updated images include:
--/styles/drift/light/style/audentio_copyright.png
--/../header_*.png (five images)
XML should overwrite the current one. This includes some major CSS changes that makes for a more simpler, sleaker design. Also a few minor Chrome Dev release bugs (with the browser, not the product) were addressed.
I am going to give this another few days before I release the Dark version of Drift, in case there is something I missed, but I think we should be entirely complete now (at least until I add new features).
Also, please note Daniel Thomann's contributions that make certain popular mods work a bit better. They should work fine already though for those that I've tested. Thanks Daniel!
Updated images include:
--/styles/drift/light/style/audentio_copyright.png
--/../header_*.png (five images)
XML should overwrite the current one. This includes some major CSS changes that makes for a more simpler, sleaker design. Also a few minor Chrome Dev release bugs (with the browser, not the product) were addressed.
I am going to give this another few days before I release the Dark version of Drift, in case there is something I missed, but I think we should be entirely complete now (at least until I add new features).
Also, please note Daniel Thomann's contributions that make certain popular mods work a bit better. They should work fine already though for those that I've tested. Thanks Daniel!
Sylar, I wouldn't put money on it 
. If I were you I would buy whenever you felt comfortable (within January) since everyone who buys Drift Light gets Drift Dark automatically.
Its just, you know, things come up and I cannot afford such a large coupon again until the internet wins another war
. If I were you I would buy whenever you felt comfortable (within January) since everyone who buys Drift Light gets Drift Dark automatically.Its just, you know, things come up and I cannot afford such a large coupon again until the internet wins another war
Sylar
Well-known member
Oh! Well that's fantastic!Sylar, I wouldn't put money on it
I'm just waiting on a response from my investor, then I'll go ahead and get it. It's a fantastic deal
Daniel Thomann
Active member
Thanks for the sidebar change... I was searching an arrow-image or something like that for hours... Untill I played with the extra.css and then I saw, that it was a css "trick"... Hehe on my page I also used a rounded corner and a border on the bottom of the sidebar
I'll update my page today (I was afk at the weekend) and I think I will get an updated extra.css up tomorrow.Update: Okay.. It seems Audentio is preparing the release of the dark style
Sadly, XenPorta uses the sidebar class for the elements (now there is a border for each module)... so here a small hotfix:
Code:
.sidebar {
border: 0px;
}
aside .sidebar {
border-bottom: 1px solid @secondaryLight;
}Daniel,
I agree that XenPorta is a common plugin, but I also feel that they should follow the standards that XenForo has laid out. The border on the bottom was added using the Sidebar Style property, which sorta pokes at that being the main sidebar CSS property (for lack of a better way of putting it).
Now I am all for my products working with other plugins, I want that, but my main goal is making it work the way XenForo was laid out. It is impossible for me to make sure all the plugins work, there are just too many. The main ones, yes, I will make an extra effort for and that is why I am going to propose another CSS file called thirdparty.css. In this file, we can add things such as these that arise every now and again from plugins just not working. We might even be able to use conditionals.
Does this sound like a fair compromise? I'm not sure how other theme authors do this, but that to me makes the most sense.
Thanks,
Mike
I agree that XenPorta is a common plugin, but I also feel that they should follow the standards that XenForo has laid out. The border on the bottom was added using the Sidebar Style property, which sorta pokes at that being the main sidebar CSS property (for lack of a better way of putting it).
Now I am all for my products working with other plugins, I want that, but my main goal is making it work the way XenForo was laid out. It is impossible for me to make sure all the plugins work, there are just too many. The main ones, yes, I will make an extra effort for and that is why I am going to propose another CSS file called thirdparty.css. In this file, we can add things such as these that arise every now and again from plugins just not working. We might even be able to use conditionals.
Does this sound like a fair compromise? I'm not sure how other theme authors do this, but that to me makes the most sense.
Thanks,
Mike
Daniel Thomann
Active member
Hey Mike
Hehe your post made me smile... I agree totally with that:
I think this is a great deal.
I'll provide that anyway in the extra.css I'm reviewing atm. (but thanks for the hint.. I'll look at that css, too to prevent redundant code)
But thanks that you now hide the arrows in the sidebar... it really looks awesome
Hehe your post made me smile... I agree totally with that:
it ringed in my head.. I'd like to crossquote a post I think it fits perfectly:
Of course
I think this is a great deal.I'll provide that anyway in the extra.css I'm reviewing atm. (but thanks for the hint.. I'll look at that css, too to prevent redundant code)
But thanks that you now hide the arrows in the sidebar... it really looks awesome
Daniel Thomann
Active member
Sorry for the double post, but is it possible that the ad_styler isn't included in the recent version?
AH. Good catch! Expect a patch in the next minute or two. Just didn't include the JS folder. Nothing has changed there, so if you are upgrading you will be fine.
Edit: all patched! for all that downloaded or purchased within the last 5-7 days, please redownload then upload the /js/ folder to your root directory.
Edit: all patched! for all that downloaded or purchased within the last 5-7 days, please redownload then upload the /js/ folder to your root directory.
