dakis

Customer
Edge is awesome, it's so fast it makes my head swim :)

I have a couple of questions:

1. How can I change the logo size without messing with the paddings of the header buttons?
2. How to reduce the size of the font that has the date and number of each post? I tried reverting all that inside the message area through the options, but I kind of like the extra colored line in the border, so I'd like to keep that as default in the theme, but reduce the date font and post number font size. If I change the font size at the message header option it changes the share and bookmark buttons size too :)
3. Is there a way to remove the "search" word from the search button, so that only the search icon is left there? (I could just delete the phrase translation perhaps but not the best way to do it?)
 

Russ

Pixel Exit Staff
1.) You can add something like this in extra.less:

Code:
.XenBase 
.p-nav-smallLogo img {
    max-height: 30px;
}
2.) Take a look at Style properties -> Messages -> Message Header, change the font here, it's set to: @xf-fontSizeLarger currently although it is adjusted down to @xf-fontSizeNormal for the next release on Edge.

3.) This in extra.less should do it:

Code:
.p-navgroup-link--search .p-navgroup-linkText {
    display: none;
}
 

dakis

Customer
Many thanks Russ, that's great.

In terms of n.2, as I said if I change the font there it reduced the buttons for bookmark+share as well as they sit in the same area, I was looking to see if there's a way to reduce the font size only for the date if possible.
 

Russ

Pixel Exit Staff
Whoops, sorry about that. You'll need to use the template: EXTRA.LESS, something like:

Code:
.message-attribution .message-attribution-main {
    font-size: 14px;
}
Should do the trick.
 

dakis

Customer
One more question, I am seeing that my links are set to get this color in the backend:

1574738899921.png


But inside my posts I see links get a green color, which is actually the Accent color 1 from my palette.

So if I want to change the links color now, what do I need to change?
 

Russ

Pixel Exit Staff
Take a look at style properties-> messages -> message links. You can define the color for links in posts here.
 

dakis

Customer
Oh these are all too easy for you! :D

Ok here's a more tricky one:

Is it possible to hide the sticky navigation bar on mobile devices when people are not scrolling up?

So on mobile, it would work like so: you start scrolling down, the nav bar just stays back, doesn't stick with you. Once you stop scrolling down, and start scrolling up, then it shows.
 

dakis

Customer
Helping myself here, would something like this js snippet do the job?

Code:
$(document).ready(function () {

var c, currentScrollTop = 0,
navbar = $('.p-navSticky');

$(window).scroll(function () {
var a = $(window).scrollTop();
var b = navbar.height();

currentScrollTop = a;

if (c < currentScrollTop && a > b + b) {
navbar.addClass("scroll-down");
} else if (c > currentScrollTop && !(a <= b)) {
navbar.removeClass("scroll-down");
}
c = currentScrollTop;
});

});
And something like this for css:

Code:
@media (max-width: 650px) {
.p-navSticky.scroll-down {opacity:0 !important}
}
 

dakis

Customer
edit: nevermind, noob error. I added it properly now , I don't see it working but I'll work on it a bit more :)
 

Russ

Pixel Exit Staff
JS is not my specialty, probably a better approach but try this?

xb_head tempate
Code:
<xf:js>
// Initial state
var scrollPos = 0;
var header = document.querySelector(".p-navSticky");
// adding scroll event
window.addEventListener('scroll', function() {
    // detects new state and compares it with the new one
    if ((document.body.getBoundingClientRect()).top > scrollPos)
        header.classList.remove("scrolling-down");
    else
        header.classList.add("scrolling-down");
    // saves the new position for iteration.
    scrollPos = (document.body.getBoundingClientRect()).top;
});
</xf:js>
EXTRA.LESS tempate
Code:
@media (max-width: @xf-responsiveWide)
{
    .p-navSticky.scrolling-down { position: static !important; }
}
 

dakis

Customer
I fixed it , using this:

Code:
<script type="text/javascript">
var mobileNavbarScroll = function ($) {
var c, currentScrollTop = 0,
navbar = $('.p-navSticky');
$(window).scroll(function () {
var a = $(window).scrollTop();
var b = navbar.height();
currentScrollTop = a;
if (c < currentScrollTop && a > b + b) {
navbar.addClass("scroll-down");
} else if (c > currentScrollTop && !(a <= b)) {
navbar.removeClass("scroll-down");
}
c = currentScrollTop;
});
};
function deferMobileScroll(mobileNavbarScroll) {
if (window.jQuery) {
mobileNavbarScroll(jQuery);
} else {
setTimeout(function() { deferMobileScroll(mobileNavbarScroll) }, 50);
}
}
deferMobileScroll(mobileNavbarScroll);
</script>
 

dakis

Customer
Hi guys,

Is there a way to have a margin between the two buttons called "thumbnail" and "full image" when you upload a file in a post? My members are getting confused because they are not separated as most other buttons in the forum. There is a line between them but it's so fine that sometimes you can't tell they are 2 different buttons.

I see this is the default situation here as well:

1576107901114.png
 

Russ

Pixel Exit Staff
This should do, add in extra.less

Code:
.attachUploadList-insertRow .button {
    margin: 0 3px;
    border-radius: 5px !important;
}
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.