vb.org Archive
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB5 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=264)
-   -   Forum Borders / Gridlines (https://vborg.vbsupport.ru/showthread.php?t=311446)

aleheroix 05-17-2014 07:02 PM
Forum Borders / Gridlines
 
*I've moved to a new thread in the correct forum, please delete this thread*

Hi, I've asked vBulletin and they've directed me here, as it isn't a minor customisation apparently.

I have been using the following code to add border lines to the forum module on the forum page and sub forum pages :
Code:
.forum-list-container { border-spacing: 3px; }
.topic-list-container { background: none repeat scroll 0 0 #B6B6B8; border-spacing: 3px; }
Putting that (on fresh install) however causes the lines to appear out of place, and independent of the frontend structure of the forum you see on your page. See below...

https://vborg.vbsupport.ru/external/2014/05/19.png
https://vborg.vbsupport.ru/external/2014/05/20.png

Now, I have been told by support that...
"it exists to house the rss feed icon when it is enabled, and it's showing like that because the style is designed not to have table borders...putting the borders in shows the table." (Ticketid: 1257733)

Traditionally forums have lines on them, its just something that should be optional, which it isn't in vB5. :confused:

Code:
.cell-count {
padding-left: 5px !important;
}
.cell-lastpost {
padding-left: 5px !important;
}
If this code worked (which it doesn't) I would probably be able to make do, but on topics page, we would still need to address the issue of the extra (empty) column.

aleheroix 05-19-2014 11:32 PM
bump!

Spangle 05-21-2014 10:58 AM
Quote:
Originally Posted by aleheroix (Post 2498210)
*I've moved to a new thread in the correct forum, please delete this thread*

Hi, I've asked vBulletin and they've directed me here, as it isn't a minor customisation apparently.

I have been using the following code to add border lines to the forum module on the forum page and sub forum pages :
Code:
.forum-list-container { border-spacing: 3px; }
.topic-list-container { background: none repeat scroll 0 0 #B6B6B8; border-spacing: 3px; }
Putting that (on fresh install) however causes the lines to appear out of place, and independent of the frontend structure of the forum you see on your page. See below...

https://vborg.vbsupport.ru/external/2014/05/19.png
https://vborg.vbsupport.ru/external/2014/05/20.png

Now, I have been told by support that...
"it exists to house the rss feed icon when it is enabled, and it's showing like that because the style is designed not to have table borders...putting the borders in shows the table." (Ticketid: 1257733)

Traditionally forums have lines on them, its just something that should be optional, which it isn't in vB5. :confused:

Code:
.cell-count {
padding-left: 5px !important;
}
.cell-lastpost {
padding-left: 5px !important;
}
If this code worked (which it doesn't) I would probably be able to make do, but on topics page, we would still need to address the issue of the extra (empty) column.
Hoirizontal lines maybe, but not vertical, why not just alternate the column colours, that way you can do away with the lines, but you still create the illusion of a boundary between the headers?

aleheroix 05-21-2014 11:20 AM
Quote:
Originally Posted by Spangle (Post 2498771)
Hoirizontal lines maybe, but not vertical, why not just alternate the column colours, that way you can do away with the lines, but you still create the illusion of a boundary between the headers?
TBH I, like most others, am considering going to vB4 instead. vB4 has lines/borders. Such a shame because everything else is great but it's just a must that we have the lines, thats what is required.

Using colours wouldn't work, as we have a lot of older users who want the lines, they want a traditional looking forum page. (I don't see what the problem is though, 5.05 had the lines in the correct place with the above code, why did they change it?)

Spangle 05-21-2014 01:39 PM
Quote:
Originally Posted by aleheroix (Post 2498774)
TBH I, like most others, am considering going to vB4 instead. vB4 has lines/borders. Such a shame because everything else is great but it's just a must that we have the lines, thats what is required.

Using colours wouldn't work, as we have a lot of older users who want the lines, they want a traditional looking forum page. (I don't see what the problem is though, 5.05 had the lines in the correct place with the above code, why did they change it?)
what you want must be achievable, have you tried asking the question on VB.com.

You may also want to change the thread title, as it doesn't really describe what you are trying to do

aleheroix 05-21-2014 01:44 PM
Quote:
Originally Posted by Spangle (Post 2498787)
what you want must be achievable, have you tried asking the question on VB.com.

You may also want to change the thread title, as it doesn't really describe what you are trying to do
Yep, the ticket number is in OP. They redirected me to ask here.

I totally agree, it must be achievable and I would have thought they would be able to do it.

Spangle 05-21-2014 06:20 PM
Quote:
Originally Posted by aleheroix (Post 2498789)
Yep, the ticket number is in OP. They redirected me to ask here.

I totally agree, it must be achievable and I would have thought they would be able to do it.
Seems strange that you were directed here, when most of the support staff who are able to help out with this sort of thing are also on VB.com forum !

aleheroix 05-22-2014 07:22 AM
Quote:
Originally Posted by Spangle (Post 2498834)
Seems strange that you were directed here, when most of the support staff who are able to help out with this sort of thing are also on VB.com forum !
What can I say/do? TBH this is the only issue we have with vB5, everything else is great! Like I mentioned earlier, the lines/borders looked great on 5.05 and the code worked. But for some reason with 5.1 that has changed.

I would hate to have to go to vB4 seen as I have never used it before, I've had about a year or so learning vB5, I don't want to have to start again over something so small...

Spangle 05-23-2014 07:19 AM
Quote:
Originally Posted by aleheroix (Post 2498913)
What can I say/do? TBH this is the only issue we have with vB5, everything else is great! Like I mentioned earlier, the lines/borders looked great on 5.05 and the code worked. But for some reason with 5.1 that has changed.

I would hate to have to go to vB4 seen as I have never used it before, I've had about a year or so learning vB5, I don't want to have to start again over something so small...
What you could do is use "inspect element", right click on the page in firefox and it's in the menu that appears, that will show you the page html and css, you can make alterations in there to see what effect it has.

When you get the desired effect search for the css in templates, or add it to the css additional css.

aleheroix 05-24-2014 11:50 AM
Quote:
Originally Posted by Spangle (Post 2499075)
What you could do is use "inspect element", right click on the page in firefox and it's in the menu that appears, that will show you the page html and css, you can make alterations in there to see what effect it has.

When you get the desired effect search for the css in templates, or add it to the css additional css.
The issue is that the code that puts gridlines on the forum module, etc doesn't allow you to then move those borders (or remove them).

Spangle 05-24-2014 03:33 PM
Quote:
Originally Posted by aleheroix (Post 2499205)
The issue is that the code that puts gridlines on the forum module, etc doesn't allow you to then move those borders (or remove them).
Hmm I always thought anything added to css additional css overrides previous code.

Have you tried entering it into additional css ?

aleheroix 05-24-2014 08:38 PM
Quote:
Originally Posted by Spangle (Post 2499226)
Hmm I always thought anything added to css additional css overrides previous code.

Have you tried entering it into additional css ?
Thats how I have been adding it ;)

Spangle 05-24-2014 08:46 PM
Quote:
Originally Posted by aleheroix (Post 2499263)
Thats how I have been adding it ;)
try something along these lines ?

Code:
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
If you leave out the left/right on the relevant cells you should make the RSS Cell appear as if it's not there.

http://www.w3schools.com/css/css_border.asp

aleheroix 05-24-2014 11:44 PM
Quote:
Originally Posted by Spangle (Post 2499264)
try something along these lines ?

Code:
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
If you leave out the left/right on the relevant cells you should make the RSS Cell appear as if it's not there.

http://www.w3schools.com/css/css_border.asp
I've gotten this far...

Code:
.cell-forum {
        border-left-style:dotted;
        border-bottom-style:dotted;
        border-top-style:dotted;
        border-width:1px
}
.topics-count {
        border-left-style:dotted;
        border-right-style:dotted;
        border-bottom-style:dotted;
        border-top-style:dotted;
        border-width:1px
}
.posts-count {
        border-right-style:dotted;
        border-bottom-style:dotted;
        border-top-style:dotted;
        border-width:1px
}
.lastpost {
        border-right-style:dotted;
        border-bottom-style:dotted;
        border-top-style:dotted;
        border-width:1px
}
Which looks like this :
https://vborg.vbsupport.ru/external/2014/05/14.png

That solves the extra column issue. As you can see, the positioning of the borders problem is still there, and using padding to try and reposition text doesnt work...

EDIT : Thanks for the link btw!

Spangle 05-25-2014 09:44 AM
Quote:
Originally Posted by aleheroix (Post 2499291)
I've gotten this far...

Code:
.cell-forum {
        border-left-style:dotted;
        border-bottom-style:dotted;
        border-top-style:dotted;
        border-width:1px
}
.topics-count {
        border-left-style:dotted;
        border-right-style:dotted;
        border-bottom-style:dotted;
        border-top-style:dotted;
        border-width:1px
}
.posts-count {
        border-right-style:dotted;
        border-bottom-style:dotted;
        border-top-style:dotted;
        border-width:1px
}
.lastpost {
        border-right-style:dotted;
        border-bottom-style:dotted;
        border-top-style:dotted;
        border-width:1px
}
Which looks like this :
https://vborg.vbsupport.ru/external/2014/05/14.png

That solves the extra column issue. As you can see, the positioning of the borders problem is still there, and using padding to try and reposition text doesnt work...

EDIT : Thanks for the link btw!
Have you tried using "text-align" or even "span"

If you search W3 Schools there should be an answer in there.

aleheroix 05-25-2014 10:18 AM
Quote:
Originally Posted by Spangle (Post 2499330)
Have you tried using "text-align" or even "span"

If you search W3 Schools there should be an answer in there.
Using relative movement is closest to what I require, but it also created a gap in between the cells were my new gridlines are. See below :
https://vborg.vbsupport.ru/external/2014/05/13.png

Im sure its padding like they suggested at vB.com but it just doesn't work, at least I can't get it to work. The text in the cells look fixed in position relative to the cell borders, surely that can't be the way its supposed to work can it? That completely takes the power away from any web designers hands in customising the look of the site :confused:

Spangle 05-25-2014 10:34 AM
Quote:
Originally Posted by aleheroix (Post 2499334)
Using relative movement is closest to what I require, but it also created a gap in between the cells were my new gridlines are. See below :
https://vborg.vbsupport.ru/external/2014/05/13.png

Im sure its padding like they suggested at vB.com but it just doesn't work, at least I can't get it to work. The text in the cells look fixed in position relative to the cell borders, surely that can't be the way its supposed to work can it? That completely takes the power away from any web designers hands in customising the look of the site :confused:
Not sure if this will help, however when I wanted to use larger Icons for my forum, Lynne gave me this to add to css.additional.css it may help, or even point you in the right direction

Code:
.forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {padding-left: 45px;}

aleheroix 05-25-2014 03:00 PM
Quote:
Originally Posted by Spangle (Post 2499335)
Not sure if this will help, however when I wanted to use larger Icons for my forum, Lynne gave me this to add to css.additional.css it may help, or even point you in the right direction

Code:
.forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {padding-left: 45px;}
Yes, thanks. That did help actually.

It's still not right as the colour of some of the borders aren't included in the stylevar editor (if not all of them). I couldn't manage to get a border around the subforums section or category header however, no amount of poking and prodding got a border on that. Also, some of the borders from the default style kinda look rough with the new (retro) borders, though I suspect I can make them transparent in the stylevar editor.

https://vborg.vbsupport.ru/external/2014/05/10.png

https://vborg.vbsupport.ru/external/2014/05/11.png

https://vborg.vbsupport.ru/external/2014/05/12.png

In the hope that anyone else finds this useful, and anyone else helping me further with it, I will post the code here :
Code:
/* Moving the lastpost feed slightly away from the cell border to have a margin between the wrapper and the cell wall */
.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;}

/* We need to adjust the lastpost column header so it aligns with the lastpost feed. */
.forum-list-container .forum-list-header .header-lastpost {padding-left:6px;}

/* Add the columns on the main page */
.cell-forum, .cell-forum-main {border-style:none dotted dotted dotted;border-width:1px}
.lastpost {border-style:none dotted dotted none;border-width:1px}
.topics-count, .posts-count {border-style:none dotted dotted none;border-width:1px;}

/* The subforum header would be out of place if we add the border, so we move it down. */
.forum-list-container .subforum-list .subforum-header.h-clear {position:relative;top:8px;}

/* Moving the stats feed in the topics page slightly away from the cell border to have a margin between the wrapper and the cell wall */
.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;}

/* Adjusting the column headers on the topics page */
.topic-list-container .topic-list-header .header-lastpost {padding-left:6px;}
.topic-list-container .topic-list-header .header-stats {padding-left:6px;}

/* Add the columns on the topics page */
.topic-list-container .topic-list .cell-inlinemod-item {border-style:none dotted dotted dotted;border-width:1px}
.cell-topic {border-style:none none dotted dotted;border-width:1px}
.cell-lastpost {border-style:none none dotted dotted;border-width:1px}
.cell-icons {border-bottom-style:dotted;border-width:1px}
.cell-count {border-style:none none dotted dotted;border-width:1px}

/* In the topics feed for posts, there is an inherited border style that looks out of place */
.topic-list-container.conversation-list .topic-list .cell-count .posts-count {border-style:none}
Through no experience of CSS I have managed get the classic vBulletin borders back on the listing pages. It looks so much clearer and easy to distinguish than the standard skin, why they decided to not have them in I wouldn't know. I even bought a crappy skin just because it had the borders on, but it looks even worse than the modified default skin so that was a waste of $20.

Any help is much appreciated!

Spangle 05-25-2014 03:15 PM
Quote:
Originally Posted by aleheroix (Post 2499348)
Yes, thanks. That did help actually.

It's still not right as the colour of some of the borders aren't included in the stylevar editor (if not all of them). I couldn't manage to get a border around the subforums section or category header however, no amount of poking and prodding got a border on that. Also, some of the borders from the default style kinda look rough with the new (retro) borders, though I suspect I can make them transparent in the stylevar editor.

https://vborg.vbsupport.ru/external/2014/05/10.png

https://vborg.vbsupport.ru/external/2014/05/11.png

https://vborg.vbsupport.ru/external/2014/05/12.png

In the hope that anyone else finds this useful, and anyone else helping me further with it, I will post the code here :
Code:
/* Moving the lastpost feed slightly away from the cell border to have a margin between the wrapper and the cell wall */
.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;}

/* We need to adjust the lastpost column header so it aligns with the lastpost feed. */
.forum-list-container .forum-list-header .header-lastpost {padding-left:6px;}

/* Add the columns */
.cell-forum, .cell-forum-main {border-style:none dotted dotted dotted;border-width:1px}
.lastpost {border-style:none dotted dotted none;border-width:1px}
.topics-count, .posts-count {border-style:none dotted dotted none;border-width:1px;}

/* The subforum header would be out of place if we add the border, so we move it down. */
.forum-list-container .subforum-list .subforum-header.h-clear {position:relative;top:8px;}

/* Moving the stats feed slightly away from the cell border to have a margin between the wrapper and the cell wall */
.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;}

/* Adjusting the column headers */
.topic-list-container .topic-list-header .header-lastpost {padding-left:6px;}
.topic-list-container .topic-list-header .header-stats {padding-left:6px;}

/* Add the columns on the topics page */
.topic-list-container .topic-list .cell-inlinemod-item {border-style:none dotted dotted dotted;border-width:1px}
.cell-topic {border-style:none none dotted dotted;border-width:1px}
.cell-lastpost {border-style:none none dotted dotted;border-width:1px}
.cell-icons {border-bottom-style:dotted;border-width:1px}
.cell-count {border-style:none none dotted dotted;border-width:1px}

/* In the topics feed for posts, there is an inherited border style that looks out of place */
.topic-list-container.conversation-list .topic-list .cell-count .posts-count {border-style:none}
Through no experience of CSS I have managed get the classic vBulletin borders back on the listing pages. It looks so much clearer and easy to distinguish than the standard skin, why they decided to not have them in I wouldn't know. I even bought a crappy skin just because it had the borders on, but it looks even worse than the modified default skin so that was a waste of $20.

Any help is much appreciated!
have you tried :

border-color:red; ? or whatever colour you want ?

The subforums re a PIA, I wanted to change the icons for them as well as the main icons, but no-one seems to know how to do that either, so adding borders will be in the same boat I suspect.

aleheroix 05-25-2014 03:32 PM
Quote:
Originally Posted by Spangle (Post 2499349)
have you tried :

border-color:red; ? or whatever colour you want ?

The subforums re a PIA, I wanted to change the icons for them as well as the main icons, but no-one seems to know how to do that either, so adding borders will be in the same boat I suspect.
I've tried :
Code:
.forum-list-container.stretch .subforum-list {border-color:red;border-width:1px;border-style:solid}
.forum-list-container .subforum-list {border-color:red;border-width:1px;border-style:solid}
.subforum-list {border-color:red;border-width:1px;border-style:solid}
.forum-list-container .subforum-list .td {border-color:red;border-width:1px;border-style:solid}
The last one not having anything after the prefix (as in "tr.subforum-list" then its just "td" with no ".")

Lynne 05-25-2014 03:46 PM
Quote:
Originally Posted by Spangle (Post 2499349)
I wanted to change the icons for them as well as the main icons, but no-one seems to know how to do that either, so adding borders will be in the same boat I suspect.
I have posted that before a couple of times. I think I posted it on vbulletin.com, so you may want to try a search there.

aleheroix 05-25-2014 03:51 PM
Quote:
Originally Posted by Lynne (Post 2499359)
I have posted that before a couple of times. I think I posted it on vbulletin.com, so you may want to try a search there.
No help with the category-header and subforum-list?

--------------- Added [DATE]1401042273[/DATE] at [TIME]1401042273[/TIME] ---------------

Code:
.forum-list-container.stretch .category-header td {border-style:solid}
This does put an ugly black line on the category-header...

https://vborg.vbsupport.ru/external/2014/05/9.png

Lynne 05-25-2014 07:16 PM
This is what I use on my vB5 site for the main page:
HTML Code:
/* 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;}
This is what I use to change the icons:
HTML Code:
.forum-list-container .forum-item .cell-forum .icon {
    background: url("path/here/image_old.png") no-repeat;
    height: 20px;
    width: 20px;
}
.forum-list-container .forum-item.new .cell-forum .icon {
  background: url("path/here/image_new.png") no-repeat;
}

Spangle 05-25-2014 07:16 PM
Quote:
Originally Posted by aleheroix (Post 2499360)
No help with the category-header and subforum-list?

--------------- Added [DATE]1401042273[/DATE] at [TIME]1401042273[/TIME] ---------------

Code:
.forum-list-container.stretch .category-header td {border-style:solid}
This does put an ugly black line on the category-header...

https://vborg.vbsupport.ru/external/2014/05/9.png
try removing .category-header from that bit of css

The border styling should not be applied to it then

Spangle 05-25-2014 07:27 PM
Quote:
Originally Posted by Lynne (Post 2499359)
I have posted that before a couple of times. I think I posted it on vbulletin.com, so you may want to try a search there.
Tried a search on VB.com and found this :
Code:
http://www.vbulletin.com/forum/forum/vbulletin-5-connect/vbulletin-5-connect-questions-problems-troubleshooting/vbulletin-5-tutorials/4028327-vb5-temp-fix-for-custom-forum-icons-any-size
But that doesn't work for sub forums.

The code you suggested above is OK if you only want a new and old icon, I would like to have a different icon for each sub-forum.

aleheroix 05-25-2014 07:43 PM
Quote:
Originally Posted by Lynne (Post 2499377)
This is what I use on my vB5 site for the main page:
HTML Code:
/* 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;}
This is what I use to change the icons:
HTML Code:
.forum-list-container .forum-item .cell-forum .icon {
    background: url("path/here/image_old.png") no-repeat;
    height: 20px;
    width: 20px;
}
.forum-list-container .forum-item.new .cell-forum .icon {
  background: url("path/here/image_new.png") no-repeat;
}
Wow, cheers Lynne!

That looks loads better than my attempt. I guess I need to have a bit more practice, huh?

Lynne 05-25-2014 09:47 PM
Quote:
Originally Posted by Spangle (Post 2499382)
Tried a search on VB.com and found this :
Code:
http://www.vbulletin.com/forum/forum/vbulletin-5-connect/vbulletin-5-connect-questions-problems-troubleshooting/vbulletin-5-tutorials/4028327-vb5-temp-fix-for-custom-forum-icons-any-size
But that doesn't work for sub forums.

The code you suggested above is OK if you only want a new and old icon, I would like to have a different icon for each sub-forum.
Then use the data-channel-id in the CSS declaration. (He gives an example of how to use that in post 4 of the thread you just linked to).

Spangle 05-25-2014 10:03 PM
Quote:
Originally Posted by Lynne (Post 2499393)
Then use the data-channel-id in the CSS declaration. (He gives an example of how to use that in post 4 of the thread you just linked to).
I tried that and it didn't work for sub-forums

Lynne 05-25-2014 11:02 PM
Try using firebug, or whatever web developer tool you have, to see the CSS. It uses this as the declaration:

.forum-list-container .subforum-list .subforum-item .icon, .forum-list-container .forum-item.sub .cell-forum .icon {stuff}

So, use that with the data-id stuff.

Spangle 05-26-2014 09:22 AM
Quote:
Originally Posted by Lynne (Post 2499403)
Try using firebug, or whatever web developer tool you have, to see the CSS. It uses this as the declaration:

.forum-list-container .subforum-list .subforum-item .icon, .forum-list-container .forum-item.sub .cell-forum .icon {stuff}

So, use that with the data-id stuff.
I've been trying that for several hours on and off, I can remove the default icons, but cannot display the custom icons, even if I use the full url.

Lynne 05-26-2014 03:26 PM
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 05-26-2014 03:41 PM
Quote:
Originally Posted by Lynne (Post 2499490)
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

Code:
.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 05-27-2014 12:22 PM
Quote:
Originally Posted by Lynne (Post 2499377)
This is what I use on my vB5 site for the main page:
HTML Code:
/* 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...

Code:
/* 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 05-27-2014 04:16 PM
Quote:
Originally Posted by Spangle (Post 2499491)
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

Code:
.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 05-27-2014 05:37 PM
Quote:
Originally Posted by Lynne (Post 2499655)
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.

Code:
.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 05-27-2014 07:03 PM
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 05-27-2014 07:15 PM
Quote:
Originally Posted by Lynne (Post 2499675)
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 05-27-2014 07:28 PM
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 05-27-2014 08:51 PM
Quote:
Originally Posted by Lynne (Post 2499680)
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

Code:
/* 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 05-27-2014 11:07 PM
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.

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


All times are GMT. The time now is 05:51 PM.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01595 seconds
  • Memory Usage 1,953KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (22)bbcode_code_printable
  • (6)bbcode_html_printable
  • (32)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (40)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete