Announcement
Collapse
No announcement yet.
How did I do that?
Collapse
This topic is closed.
X
This is a sticky topic.
X
X
-
Enable the use of Font Awesome Glyphs.- Turn on Site Builder.
- On any page, click the Style tab in Site Builder.
- In the Style editor, click on CSS Editor.
- Add the following code at the very top. Code:
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css);
- Save your changes.
- Close the CSS Editor.
If you have your own personal Font Awesome CDN Code for CSS, you can use that instead. Please note that the CSS version of the Font Awesome embed doesn't provide accessibility options.
Font Awesome Icon List
To see the code for a specific icon, click on it in the list above.
- Likes 1
-
Use Font Awesome Glyphs in your Navigation Tabs
This effect can be seen at the top of this page.- To enable this you need to head into the AdminCP.
- Go to Languages & Phrases.
- Go to Search in Phrases.
- Type in the text of the tab you want to change in the "Search For..." box.
- Select "Navbar Links" in the Phrase Type selection box.
- On the results page, click on Edit to the right of your phrase.
- At the bottom, you're going to translate your phrase. If the basic text isn't in the translation box, pressing "Copy Default Text" button will add it.
- Add your image code before the text. For example: Code:
<i class="fa fa-home" aria-hidden="true"></i> Home
- Save the phrase.
- Repeat for each tab.
- Change should take effect on the next page load of the front end.
- Likes 1
Comment
-
Move the Search Box to the Navigation Bar
The instructions for this effect can be found in the main vBulletin.com Community at this link:
https://www.vbulletin.com/forum/foru...navigation-bar
Comment
-
Rotating Banner in Header
To do this first upload the images you want to use in the AdminCP using the vBCloud File Manager.
Once your images are uploaded create a new notice in the Notice Manager within the Admincp.
Place this content in it:
Code:<script type="text/javascript"> var dir = 'url(core/css/0/0/0/0/9/2/images/'; var images = ['background0.jpg','background1.jpg','background2.jpg','background3.jpg','background4.jpg','background5.jpg','background6.jpg','background7.jpg','background8.jpg']; document.getElementById("header").style.backgroundImage = "url(" + dir + images[Math.floor(Math.random() * images.length)] + ")"; </script>
For the images list your image names surrounded by single quotes (') and separated by commas as shown.
Save the new notice. In the list of notices note the ID for your new notice.
Add the following to your site CSS to hide the notice:
Code:[data-notice-id="X"] {display:none;}
- Likes 1
Comment
-
Import Google Fonts.
Fonts are a great way of enhancing your presentation. However, if the end user's computer doesn't have the font installed, they won't see it. Luckily you can tell your website to install a font on the end-user's computer temporarily so that it can be used. This is done via CSS. Google has created a large library of free to use fonts that you can use on your vBulletin site. The simplest way is to use the @import attribute in CSS to do this.
Pick the fonts you want on Google and then use their tool to get the code. We're interested in the @import code. As presented it looks like this:
Code:<style> @import url('https://fonts.googleapis.com/css?family=Roboto'); </style>
Code:@import url('https://fonts.googleapis.com/css?family=Roboto');
Now, you can call the font name ('Roboto' in this example) in style variables or additional custom CSS. You would use the font-family attribute of CSS. Here is an example:
Code:body { font-family: 'Roboto', sans-serif; }
- Likes 1
Comment
-
Updated Article Channel Layout
This will update the article layout to appear like the articles on this site. One important thing to remember is that the first attached image will be used as the article's preview image. Make sure it is an image that you want to use.
In the Article Channel Display Module, I've chosen the layout of 1 article then 2 articles per row. You can change this by clicking on the pencil icon in the module's control menu.
To update the layout, just add this to your custom CSS:
Code:.article-list.stream-view.stream-view-full-width .list-item { background: #feffff; /* Old browsers */ border: 2px solid #FAFAFA; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); padding: 6px; margin-bottom: 12px; } .article-list.stream-view .list-item:first-child { border: 2px solid #FAFAFA; } .article-list.stream-view .list-item:first-child img.b-post__preview-image { width: 900px; height: 160px; border: 0px; padding: 0px; } .article-list li .post-links {text-align:right;}
Comment
-
Using Font Awesome for Status Icons.
First, you need to clear the existing images. Unfortunately, I had to do this on an ID basis. Without doing this the original background image would continue to show. Here is the CSS:
Code:/* Force background image clear on Forum Icons */ #forum19 .cell-forum .icon, #forum20 .cell-forum .icon, #forum22 .cell-forum .icon, #forum36 .cell-forum .icon, #forum34 .cell-forum .icon, #forum283 .cell-forum .icon, #forum269 .cell-forum .icon, #forum270 .cell-forum .icon, #forum271 .cell-forum .icon, #forum281 .cell-forum .icon, #forum277 .cell-forum .icon, #forum447 .cell-forum .icon, #forum276 .cell-forum .icon, #forum272 .cell-forum .icon, #forum274 .cell-forum .icon, #forum275 .cell-forum .icon, #forum278 .cell-forum .icon, #forum279 .cell-forum .icon, #forum280 .cell-forum .icon, #forum1299 .cell-forum .icon, #forum273 .cell-forum .icon, #forum1300 .cell-forum .icon, #forum282 .cell-forum .icon, #forum3049 .cell-forum .icon { background: transparent; }
Code:/* forum icon for forums with no new posts */ .forum-list-container .forum-item .cell-forum .icon::before {color:gray;font-family:'FontAwesome';font-size:19px;content: "\f1b0";} /* forum icon for forums with new posts */ .forum-list-container .forum-item.new .cell-forum .icon {background: transparent;} .forum-list-container .forum-item.new .cell-forum .icon::before {color:green;font-family:'FontAwesome';font-size:19px;margin-top:-4px;content: "\f1b0"; } /* forum icons for some individual forums */ #forum269.forum-item.main .cell-forum .icon::before{content:"\f0ac";} #forum269.forum-item.main.new .cell-forum .icon::before{content:"\f0ac";} #forum270.forum-item.main .cell-forum .icon::before{content:"\f0d6";} #forum270.forum-item.main.new .cell-forum .icon::before{content:"\f0d6";} #forum271.forum-item.main .cell-forum .icon::before{content:"\f0c3";} #forum271.forum-item.main.new .cell-forum .icon::before{content:"\f0c3";} #forum281.forum-item.main .cell-forum .icon::before{content:"\f0f2";} #forum281.forum-item.main.new .cell-forum .icon::before{content:"\f0f2";} #forum277.forum-item.main .cell-forum .icon::before{content:"\f03d";} #forum277.forum-item.main.new .cell-forum .icon::before{content:"\f03d";} #forum1300.forum-item.main .cell-forum .icon::before{content:"\f21e";} #forum1300.forum-item.main.new .cell-forum .icon::before{content:"\f21e";} #forum283.forum-item.main .cell-forum .icon::before{content:"\f292";} #forum283.forum-item.main.new .cell-forum .icon::before{content:"\f292";}
Comment
Related Topics
Collapse
-
The Signing Machine from Swiss watchmaker Jaquet Droz is an extraordinary piece of work. Created to showcase the company's mechanical clockwork technology,...
-
Channel: Mobile
April 23, 2018, 05:00 -
-
You can't grow money on trees, but if you could, it would probably be with the help of something like the Cloudponics GroBox, a grow system that allows...
-
Channel: Smart Home
July 25, 2018, 16:00 -
-
You know that little line of dust that you inevitably leave as you sweep debris into a dustpan? The Bruno garbage can could eliminate that forever, with...
-
Channel: Smart Home
October 23, 2017, 12:09 -
-
If you're wondering how to check your IMEI number, then this guide will show you how to do it, regardless of what phone you have. You can find your IMEI...
-
Channel: Mobile
August 6, 2018, 11:30 -
-
by Music MaryIn this installment of Weekend Workshop, we show you how to build a classy record stand that makes milk crates look downright barbaric. Better yet, it...
-
Channel: Music
May 26, 2018, 04:00 -
Comment