MyBB Community Forums

Pages: 1 2

Well, I found a good one I like, I just need to change the Forum Status Icons, now.

(2016-08-15, 12:13 PM)Bojangles Wrote: [ -> ]Well, I found a good one I like, I just need to change the Forum Status Icons, now.

The status icons are sprite images. If you want to change them for CSS icons you can see this tutorial:

https://community.mybb.com/thread-156711.html

Thanks Ashley!

Do you know if there's anyway I could change them to the icons I had here: http://web.archive.org/web/2010061615234...orror.com/

^ reply here might help for above requirement

You can use them but you will have to create a sprite image similar to the one used by MyBB. That image is in the images folder called forum_icon_sprite.png

(2016-08-15, 02:42 PM)Bojangles Wrote: [ -> ]Thanks Ashley!

Do you know if there's anyway I could change them to the icons I had here: http://web.archive.org/web/2010061615234...orror.com/

Yes, it is fairly easy and no..., it does not require sprites in the least... I did not have much time to look and help you on this but here is a quick thought to get you there:

Go to your global.css

Home -> Themes -> Dim -> Editing global.css -Advanced mode -> Full Stylesheet for global.css

Find:

.forum_status {
	height: 50px;
	width: 50px;  
	font-size: 30px;
	text-align: center;
}
.forum_status i {
	display: inline-block;
	line-height: 50px;
}
.forum_on {
	color: #696969;
}
.forum_off, .forum_offlock, .forum_offlink {
	color: #a0a0a0;
}
.forum_off i {
	opacity: .4;
}
.forum_offlock i:before {
	content: "\f023";
}
.forum_offlink i:before {
	content: "\f0c1";
}
.ficons_2 i:before {
	content: "\f086";
}
.ficons_3 i:before {
	content: "\f086";
}
.ficons_4 i:before {
	content: "\f086";
}
.ficons_6 i:before {
	content: "\f086";
}
.ficons_7 i:before {
	content: "\f086";
}
/** **/

.subforumicon {
	height: 10px;
	width: 10px;
	display: inline-block;
	margin: 0 5px;
}
.subforum_minion {
	color: #a0a0a0;
}
.subforum_minioff, .subforum_miniofflock, .subforum_miniofflink {
	color: #a0a0a0;
}
.subforum_minioff {
	opacity: .4;
}
.subforum_miniofflock i:before {
	content: "\f023";
}
.subforum_miniofflink i:before {
	content: "\f0c1";
}

Replace with:

.forum_status {
        height: 50px; /** Because your original image was this size **/
        width: 50px;  /** Because your original image was this size **/
        display: inline-block;
}

.forum_on {
	background-image: url('themes/dim/on.png'); /** for individual on/off icon usage **/
}

.forum_off {
	background-image: url('themes/dim/off.png');  /** for individual on/off icon usage **/
}

.forum_offlock {
	background-image: url('themes/dim/offlock.png');  /** for individual on/off icon usage **/
}

.forum_offlink {
	background-image: url('themes/dim/offlink.png');  /** for individual on/off icon usage **/
}

.subforumicon {
	height: 16px; /** for individual mini on/off icon usage **/
	width: 16px; /** for individual mini on/off icon usage **/
	display: inline-block;  
	vertical-align: middle; /** for individual mini on/off icon usage **/
}

.subforum_minion {
    background-image: url('themes/dim/minion.png');  /** for individual mini on/off icon usage **/
}

.subforum_minioff {
	background-image: url('themes/dim/minioff.png');  /** for individual mini on/off icon usage **/
}

.subforum_miniofflock {
	background-image: url('themes/dim/miniofflock.png');  /** for individual mini on/off icon usage **/
}

.subforum_miniofflink {
	background-image: url('themes/dim/miniofflink.png');  /** for individual mini on/off icon usage **/
}

This will make the forum icons and mini forum icons individual..., add your forum icons from your old board to the "themes/dim" folder and make sure to rename them to the correct names as described above.

Next.... go to the template sets for "Dim"

   Home -> Template Sets -> Dim -> Templates

Find: Index Page Templates and only select "index"

look at the options for "index" and select "revert to original"

Now find: Forum Bit Templates and only select

      forumbit_depth2_cat    and select "revert to original"
      forumbit_depth2_forum and select "revert to original"
      forumbit_depth3_statusicon and select "revert to original"

That should do it. Good luck!

* Now if you do not want to also change the forum "miniicons" you can now add them back as follows:

Go to your global.css

   Home -> Themes -> Dim -> Editing global.css -Advanced mode -> Full Stylesheet for global.css

Find:

.subforumicon {
	height: 16px; /** for individual mini on/off icon usage **/
	width: 16px; /** for individual mini on/off icon usage **/
	display: inline-block;  
	vertical-align: middle; /** for individual mini on/off icon usage **/
}

.subforum_minion {
    background-image: url('themes/dim/minion.png');  /** for individual mini on/off icon usage **/
}

.subforum_minioff {
	background-image: url('themes/dim/minioff.png');  /** for individual mini on/off icon usage **/
}

.subforum_miniofflock {
	background-image: url('themes/dim/miniofflock.png');  /** for individual mini on/off icon usage **/
}

.subforum_miniofflink {
	background-image: url('themes/dim/miniofflink.png');  /** for individual mini on/off icon usage **/
}

and replace with:

.subforumicon {
	height: 10px;
	width: 10px;
	display: inline-block;
	margin: 0 5px;
}
.subforum_minion {
	color: #a0a0a0;
}
.subforum_minioff, .subforum_miniofflock, .subforum_miniofflink {
	color: #a0a0a0;
}
.subforum_minioff {
	opacity: .4;
}
.subforum_miniofflock i:before {
	content: "\f023";
}
.subforum_miniofflink i:before {
	content: "\f0c1";
}

Next.... go to the template sets for "Dim"

Home -> Template Sets -> Dim -> Templates

Now find: Forum Bit Templates and only select:

forumbit_depth3_statusicon and replace all with:

<div title="{$lightbulb['altonoff']}" class="subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"><i class="fa fa-comment"></i></div>

(2016-08-16, 12:03 AM)vintagedaddyo Wrote: [ -> ]
(2016-08-15, 02:42 PM)Bojangles Wrote: [ -> ]Thanks Ashley!

Do you know if there's anyway I could change them to the icons I had here: http://web.archive.org/web/2010061615234...orror.com/

Yes, it is fairly easy and no..., it does not require sprites in the least... I did not have much time to look and help you on this but here is a quick thought to get you there:

Go to your global.css

Home -> Themes -> Dim -> Editing global.css -Advanced mode -> Full Stylesheet for global.css

Find:
.forum_status {
	height: 50px;
	width: 50px;  
	font-size: 30px;
	text-align: center;
}
.forum_status i {
	display: inline-block;
	line-height: 50px;
}
.forum_on {
	color: #696969;
}
.forum_off, .forum_offlock, .forum_offlink {
	color: #a0a0a0;
}
.forum_off i {
	opacity: .4;
}
.forum_offlock i:before {
	content: "\f023";
}
.forum_offlink i:before {
	content: "\f0c1";
}
.ficons_2 i:before {
	content: "\f086";
}
.ficons_3 i:before {
	content: "\f086";
}
.ficons_4 i:before {
	content: "\f086";
}
.ficons_6 i:before {
	content: "\f086";
}
.ficons_7 i:before {
	content: "\f086";
}
/** **/

.subforumicon {
	height: 10px;
	width: 10px;
	display: inline-block;
	margin: 0 5px;
}
.subforum_minion {
	color: #a0a0a0;
}
.subforum_minioff, .subforum_miniofflock, .subforum_miniofflink {
	color: #a0a0a0;
}
.subforum_minioff {
	opacity: .4;
}
.subforum_miniofflock i:before {
	content: "\f023";
}
.subforum_miniofflink i:before {
	content: "\f0c1";
}
Replace with:
.forum_status {
        height: 50px; /** Because your original image was this size **/
        width: 50px;  /** Because your original image was this size **/
        display: inline-block;
}

.forum_on {
	background-image: url('themes/dim/on.png'); /** for individual on/off icon usage **/
}

.forum_off {
	background-image: url('themes/dim/off.png');  /** for individual on/off icon usage **/
}

.forum_offlock {
	background-image: url('themes/dim/offlock.png');  /** for individual on/off icon usage **/
}

.forum_offlink {
	background-image: url('themes/dim/offlink.png');  /** for individual on/off icon usage **/
}

.subforumicon {
	height: 16px; /** for individual mini on/off icon usage **/
	width: 16px; /** for individual mini on/off icon usage **/
	display: inline-block;  
	vertical-align: middle; /** for individual mini on/off icon usage **/
}

.subforum_minion {
    background-image: url('themes/dim/minion.png');  /** for individual mini on/off icon usage **/
}

.subforum_minioff {
	background-image: url('themes/dim/minioff.png');  /** for individual mini on/off icon usage **/
}

.subforum_miniofflock {
	background-image: url('themes/dim/miniofflock.png');  /** for individual mini on/off icon usage **/
}

.subforum_miniofflink {
	background-image: url('themes/dim/miniofflink.png');  /** for individual mini on/off icon usage **/
}
This will make the forum icons and mini forum icons individual..., add your forum icons from your old board to the "themes/dim" folder and make sure to rename them to the correct names as described above.

Next.... go to the template sets for "Dim"

   Home -> Template Sets -> Dim -> Templates

Find: Index Page Templates and only select "index"

look at the options for "index" and select "revert to original"

Now find: Forum Bit Templates and only select

      forumbit_depth2_cat    and select "revert to original"
      forumbit_depth2_forum and select "revert to original"
      forumbit_depth3_statusicon and select "revert to original"

That should do it. Good luck!

* Now if you do not want to also change the forum "miniicons" you can now add them back as follows:

Go to your global.css

   Home -> Themes -> Dim -> Editing global.css -Advanced mode -> Full Stylesheet for global.css

Find:
.subforumicon {
	height: 16px; /** for individual mini on/off icon usage **/
	width: 16px; /** for individual mini on/off icon usage **/
	display: inline-block;  
	vertical-align: middle; /** for individual mini on/off icon usage **/
}

.subforum_minion {
    background-image: url('themes/dim/minion.png');  /** for individual mini on/off icon usage **/
}

.subforum_minioff {
	background-image: url('themes/dim/minioff.png');  /** for individual mini on/off icon usage **/
}

.subforum_miniofflock {
	background-image: url('themes/dim/miniofflock.png');  /** for individual mini on/off icon usage **/
}

.subforum_miniofflink {
	background-image: url('themes/dim/miniofflink.png');  /** for individual mini on/off icon usage **/
}
and replace with:
.subforumicon {
	height: 10px;
	width: 10px;
	display: inline-block;
	margin: 0 5px;
}
.subforum_minion {
	color: #a0a0a0;
}
.subforum_minioff, .subforum_miniofflock, .subforum_miniofflink {
	color: #a0a0a0;
}
.subforum_minioff {
	opacity: .4;
}
.subforum_miniofflock i:before {
	content: "\f023";
}
.subforum_miniofflink i:before {
	content: "\f0c1";
}
Next.... go to the template sets for "Dim"

Home -> Template Sets -> Dim -> Templates

Now find: Forum Bit Templates and only select:

forumbit_depth3_statusicon and replace all with:
<div title="{$lightbulb['altonoff']}" class="subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"><i class="fa fa-comment"></i></div>

You sir, are a scholar and a gentleman! I've made the changes and it looks AMAZING! Big Grin

(2016-08-16, 07:10 AM)Bojangles Wrote: [ -> ]You sir, are a scholar and a gentleman! I've made the changes and it looks AMAZING!

Cool beans! Glad to help and happy to hear it all worked out well for you. Smile

Pages: 1 2

Bojangles

Ashley1

Bojangles

.m.

Ashley1

User 6029

Bojangles

User 6029