I have added a new navigation link called Slideshow by customizing the following code that I found elsewhere on this forum:
<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
href : function() {
return this.get('href');
}.property('href')
});
I18n.translations.en.js.filters.bugs = { title: "Bugs", help: "Open Bugs" };
I18n.translations.en.js.filters.google = { title: "Google", help: "Navigate to Google" };
Discourse.NavItem.reopenClass({
buildList : function(category, args) {
var list = this._super(category, args);
if(!category) {
list.push(Discourse.ExternalNavItem.create({href: '/category/bug', name: 'bugs'}));
list.push(Discourse.ExternalNavItem.create({href: 'https://google.com', name: 'google'}));
}
return list;
}
});
</script>
What Iād like to do is format Slideshow differently from the other navigation links, like maybe a different color, italics, etc. Is this possible? If so, where exactly do I make these changes?
1 Like
dax
(Daniela)
June 19, 2016, 10:13am
2
Use CSS for this.
E.g.:
/* Add a fontwesome icon*/
a[href="/category/assistenza"]:before {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
content: "\f0fa";
margin-right: 3px;
}
/*Change background only for my custom button*/
a[href="/category/assistenza"] {
background: #0000B3 !important;
color: #fff !important;
border-radius: 15px;
}
You can use Google font to change characters if you want.
Or you can simply change the color (e.g red) and add a font-style (e.g italic)
color: red !important
font-style: italic !important;
So, you can do everything with CSS
In the same stylesheet where is your code, in the CSS tab.
OFF-topic:
Great avatar BTW, just finished to watch Ash Vs Evil Dead!
Thanks for offering to help, but I cannot get it to work.
There must be an easier way to simply add italics to the link. This is the code I am using:
<script>
Discourse.ExternalNavItem = Discourse.NavItem.extend({
href : function() {
return this.get('href');
}.property('href')
});
I18n.translations.en.js.filters.slideshow = { title: "Slideshow", help: "View homepage slideshow" };
Discourse.NavItem.reopenClass({
buildList : function(category, args) {
var list = this._super(category, args);
if(!category) {
list.push(Discourse.ExternalNavItem.create({href: 'http://www.singletrackbc.com', name: 'slideshow'}));
}
return list;
}
});
</script>
I also noticed that my custom link is not visible on mobile devices (whether Iām logged in or not). That kinda sucks. Is there a way to fix that?
dax
(Daniela)
June 19, 2016, 10:59pm
4
Look in your Admin > Custom > Html/CSS, copy and paste this code in CSS tab
a[href="http://www.singletrackbc.com"] {
font-style: italic;
}
On mobile device there is only one button. It is a dropdown menu, click on Latest and you will see Slideshow too.
4 Likes
That worked perfectly! Thank you very much!
1 Like
tomwrench
(Tom Wrench)
June 20, 2016, 1:13am
6
Iāve got a CSS question related to this which I hope is simple for you answer.
Iāve added the āBookmarksā link to the topnav and have styled it differently to stand out from ālatestā, ātopā etc. However, Iām having trouble specifying the style of this link when the link is active. I.e. when the user has clicked the bookmark link. What CSS would I use to specify ācurrent pageā?
The code I have used so far for styling is:
a[href="/bookmarks"] {
background: #ebebeb !important;
color: #000 !important;
border-radius: 0px;
border-bottom: 0px solid !important;
}
/* mouse over link */
a[href="/bookmarks"]:hover {
background: #B9B9B9 !important;
color: #fff !important;
border-radius: 0px;
border-bottom: 0px solid !important;
}
Many thanks.
dax
(Daniela)
June 20, 2016, 7:07am
7
I donāt know if this is the better way (but it works):
.list-controls .nav-pills .active a[href="/bookmarks"] {
font-style: italic;
}
However you can remove those lines from CSS:
border-radius: 0px;
border-bottom: 0px solid !important;
you donāt need them (they are relative to my specific case).
2 Likes
Just confirmed that the custom link I created does not appear when viewed on my phone, only on desktop (will have to confirm tablet later today).
dax
(Daniela)
June 21, 2016, 7:23pm
9
Yep, I donāt see your custom link too. But I can see mine on mobile device.
What version of Discourse are you running?
Iām on v1.6.0.beta7 +134.
Did you put yours under the Customize that shows when you click the āmobile deviceā icon above right ?
1 Like
Canāt remember the version # but Iām on latest version as of today.
dax
(Daniela)
June 21, 2016, 8:22pm
12
I put only the fontawesome icon here
a[href="/category/assistenza"]:before {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
content: "\f0fa";
margin-right: 3px;
}
and only for the Assistance button. I add the Chat icon right now.
BTW I can see them without adding anything on mobile CSS.
(I delete all the mobile CSS in that stylesheet and I can still see the links on mobile and they are ok.)
They works on mobile only with the script that I add in body
(in which tab you add the script @ron_jeremy ?)
This topic was automatically closed after 2911 days. New replies are no longer allowed.