Forum Borders / Gridlines

[Lynne]

We can't help if you don't post your exact code. We need the link to the icons also. And, we need a link to the page.

[Spangle]

Originally Posted by Lynne

We can't help if you don't post your exact code. We need the link to the icons also. And, we need a link to the page.

This is the page, particularly the Clubs Forum with individual team sub forums, ideally I want to use the teams crest as the icon:

http://www.premierleagueforum.co.uk/

The code I have tried to alter is copied from css_global.css and pasted into css.additional.css

.forum-list-container .subforum-list .subforum-item .icon,
.forum-list-container .forum-item.sub .cell-forum .icon {
	background: transparent url("images/css/sprite_icons_vb_{vb:stylevar textdirection}.png") no-repeat scroll -272px -208px;
	display: inline-block;
	height: 11px;
	width: 10px;
	margin-{vb:stylevar right}: 7px;
	margin-top:2px;
	float:{vb:stylevar left};
}
.forum-list-container .subforum-list .subforum-item .icon.new,
.forum-list-container .forum-item.sub.new .cell-forum .icon {
	background: transparent url("images/css/sprite_icons_vb_{vb:stylevar textdirection}.png") no-repeat scroll -256px -208px;
}

[aleheroix]

Originally Posted by Lynne

This is what I use on my vB5 site for the main page:

/* border on homepage */
table.forum-list-container tr.forum-item td.cell-forum { border-width: 1px 1px 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}
table.forum-list-container tr.forum-item td.topics-count, table.forum-list-container tr.forum-item td.posts-count, table.forum-list-container tr.forum-item td.lastpost { border-width: 1px 1px 0 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}
table.forum-list-container tr.subforum-list td { border-width: 1px 1px 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px; padding-top: 15px;}
table.forum-list-container tr.subforum-list td.subforum-item { border: none; padding-top: 0;}
table.forum-list-container tr.category-header td { border-width: 1px 1px 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}
table.forum-list-container tr.subforum-list td.subforum-item { border: none; padding-top: 0;}
div.list-footer {border-width: 1px 1px 1px; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}

Just to add to this code, I've added the gridlines/borders on the topics tab view as well...

/* border of topics pages */
table.topic-list-container tbody.topic-list td.cell-topic { border-width: 1px 0 0 1px; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}
table.topic-list-container tbody.topic-list td.cell-icons { border-width: 1px 1px 0 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}
table.topic-list-container tbody.topic-list td.cell-lastpost { border-width: 1px 1px 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}
table.topic-list-container tbody.topic-list td.cell-inlinemod-item { border-width: 1px 1px 0 0; border-style: solid; border-color: #C8CCCE; border-spacing: 1px;}

/* moving various elements */
.forum-list-container .forum-item .lastpost > .lastpost-wrapper > .lastpost-info {position:relative;left:6px;}
.forum-list-container .forum-item .lastpost > .lastpost-wrapper > .avatar {position:relative;left:6px;}
.forum-list-container .forum-list-header .header-lastpost {padding-left:6px;}
.forum-list-container .subforum-list .subforum-header.h-clear {position:relative;top:8px;}
.topic-list-container .topic-list .cell-count .posts-count {position:relative;left:6px;}
.topic-list-container .topic-list .cell-count .votes-count {position:relative;left:6px;}
.topic-list-container .topic-list .cell-count .views-count {position:relative;left:6px;}
.topic-list-container .topic-list-header .header-stats {padding-left:6px;}
.topic-list-container .topic-list .cell-lastpost .lastpost-by {position:relative;left:6px;}
.topic-list-container .topic-list .cell-lastpost .post-date {position:relative;left:6px;}
.topic-list-container .topic-list .cell-lastpost .go-to-last-post {position:relative;left:6px;}
.topic-list-container .topic-list .cell-lastpost .avatar.h-left {position:relative;left:6px;}
.topic-list-container .topic-list-header .header-lastpost {padding-left:6px;}

[Lynne]

Originally Posted by Spangle

This is the page, particularly the Clubs Forum with individual team sub forums, ideally I want to use the teams crest as the icon:

http://www.premierleagueforum.co.uk/

The code I have tried to alter is copied from css_global.css and pasted into css.additional.css

.forum-list-container .subforum-list .subforum-item .icon,
.forum-list-container .forum-item.sub .cell-forum .icon {
	background: transparent url("images/css/sprite_icons_vb_{vb:stylevar textdirection}.png") no-repeat scroll -272px -208px;
	display: inline-block;
	height: 11px;
	width: 10px;
	margin-{vb:stylevar right}: 7px;
	margin-top:2px;
	float:{vb:stylevar left};
}
.forum-list-container .subforum-list .subforum-item .icon.new,
.forum-list-container .forum-item.sub.new .cell-forum .icon {
	background: transparent url("images/css/sprite_icons_vb_{vb:stylevar textdirection}.png") no-repeat scroll -256px -208px;
}

I do not see that in your css_additional.css file at all. Besides that, that code is just the default code, no? I asked you to tell us *exactly* what you tried.

[Spangle]

Originally Posted by Lynne

I do not see that in your css_additional.css file at all. Besides that, that code is just the default code, no? I asked you to tell us *exactly* what you tried.

Ok Sorry

I tried entering the data channel id numbers in various places within that code, and replacing the image url with one for the image I wanted.

I could make the default images disappear, but I couldn't get my custom images to replace them.

.forum-list-container .subforum-list .subforum-item**.icon,
.forum-list-container .forum-item.sub** .cell-forum .icon {
	background: transparent url("images/css/sprite_icons_vb_{vb:stylevar textdirection}.png") no-repeat scroll -272px -208px;
	display: inline-block;
	height: 11px;
	width: 10px;
	margin-{vb:stylevar right}: 7px;
	margin-top:2px;
	float:{vb:stylevar left};
}
.forum-list-container .subforum-list .subforum-item .icon.new**,
.forum-list-container .forum-item.sub.new .cell-forum .icon {
	background: transparent url("images/css/sprite_icons_vb_{vb:stylevar textdirection}.png") no-repeat scroll -256px -208px;
}

I tried the data channel id where the ** are.

Link to forum is http://www.premierleagueforum.co.uk

[Lynne]

This is the link to your css_additional.css file:
http://www.premierleagueforum.co.uk/...&ts=1401211294

I do not see the above code in there anywhere. I don't know how else to tell you that I CANNOT HELP if you don't have your code on the site so I can see what the problem is. I use firebug to look at sites and if you don't have your code in there, then I can't see what is wrong. Period.

[Spangle]

Originally Posted by Lynne

This is the link to your css_additional.css file:
http://www.premierleagueforum.co.uk/...&ts=1401211294

I do not see the above code in there anywhere. I don't know how else to tell you that I CANNOT HELP if you don't have your code on the site so I can see what the problem is. I use firebug to look at sites and if you don't have your code in there, then I can't see what is wrong. Period.

As it wasn't working I couldn't see the point in leaving it there?

I wasn't even sure if I had the right code.

I will add it back in for you.

If you concentrate on the sub forum called "arsenal" that will show me how to do the rest.

The image url for the Arsenal sub forum icon is http:http://www.premierleagueforum/images...s/ars14x14.png

[Lynne]

I'm still not seeing the CSS. But, I did click on the link for the icon here - http://www.premierleagueforum/images...s/ars14x14.png - and I get a google error. It should be http://www.premierleagueforum.co.uk/...s/ars14x14.png

[Spangle]

Originally Posted by Lynne

I'm still not seeing the CSS. But, I did click on the link for the icon here - http://www.premierleagueforum/images...s/ars14x14.png - and I get a google error. It should be http://www.premierleagueforum.co.uk/...s/ars14x14.png

It's definitely in css_additional.css

/* Start Subforum Icons*/
.forum-list-container .subforum-list .subforum-item.icon,
.forum-list-container .forum-item.sub .cell-forum .icon {
	background: transparent url("images/css/sprite_icons_vb_{vb:stylevar textdirection}.png") no-repeat scroll -272px -208px;
	display: inline-block;
	height: 11px;
	width: 10px;
	margin-{vb:stylevar right}: 7px;
	margin-top:2px;
	float:{vb:stylevar left};
}
.forum-list-container .subforum-list .subforum-item .icon.new,
.forum-list-container .forum-item.sub.new .cell-forum .icon {
	background: transparent url("images/css/sprite_icons_vb_{vb:stylevar textdirection}.png") no-repeat scroll -256px -208px;
}

/*End Subforum Icons*/

[Lynne]

Except the only examples I see right now are for forums with new posts and you only added the css for regular sub-forums with old posts (as I said, use firebug to get this stuff).

and you certainly don't want the stuff regarding the position unless you are using a sprite (which is why they would 'disappear' when you used the CSS for the old posts forums) and your image is not 10x11, it's 14x14, so you need to put those dimensions in.

.forum-list-container .subforum-list .subforum-item .icon.new, .forum-list-container .forum-item.sub.new .cell-forum .icon {
    background: url("http://www.premierleagueforum.co.uk/images/crests/ars14x14.png") rgba(0, 0, 0, 0);
    display: inline-block;
    height: 14px;
    width: 14px;
}

and, this image seems to be missing from your site (for your Support & Feedback forum):
images/icons/suppico.png