Questions for Edge

[dakis]

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]

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

.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:

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

 

[dakis]

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]

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

.message-attribution .message-attribution-main {
    font-size: 14px;
}

Should do the trick.

 

[dakis]

Wonderful stuff, many thanks Russ, you're a star.

 

[dakis]

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

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]

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

 

[dakis]

Oh these are all too easy for you!

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]

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

$(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:

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

 

[Russ]

Give it a go, put your JS inside the template xb_head.

 

[dakis]

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]

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

xb_head tempate

<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

@media (max-width: @xf-responsiveWide)
{
    .p-navSticky.scrolling-down { position: static !important; }
}

 

[dakis]

I fixed it , using this:

<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]

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:

 

[Russ]

This should do, add in extra.less

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

 

[dakis]

Legend! Many thanks Russ.