Minor changes to V5

[Rajiv]

Forum URL: giffas.proboards.com/

I'm quickly getting used to the layout and functionality of V5, but I would like to make some minor changes, and it would take me too long to figure it out myself, so I'll just ask here.  

Here goes:

a.   How do I reduce the size of the folder legends:
    

b.   How do I do away with Hot threads being shown differently from other threads.


c.   For the listing of threads on each board, how do I get the subject to appear in bold (without affecting the other columns).


d.   On each board, how do I get the poll icon to appear to the right of the subject.  I only want to leave the locked icon to the left.  

Thanks in advance.  

[Former Member]

a. You could upload those to your computer and reduce their size with a photo editing program, there's a free one called GIMP. You could also request help in our graphics board here on Support. Then re-upload with the new size. I don't know how else to change the size, personally

b. Just replace the image with the normal folder image so they look the same

c. Go to Admin > Structure > Layout Templates > Board > Thread List > and then find $[thread] and change it to <b>$[thread]</b>

d. That's another layout change, I'll look into it and let you know.

[David Clark]

Hey Rajiv,

A. - Did you want to reduce the size of the legend containers, or the folder images within the legend containers? If the former, how would you prefer them to look?

B. For that, you can go to Admin > Themes > Theme Manager > your theme > Images and copy the regular folder icon over the "Hot Topic" icon so they're the same.

C. Go to Admin > Themes > Advanced Styles & CSS > Style Sheet tab, and paste the following at the bottom of everything. It'll only affect thread links.

.thread-link {
font-weight: bold;
}

D. This is possible, but it'll require you to edit the HTML layout templates. If you're not sure where to go with that, you can post for help accomplishing that over in our templates board.

[Rajiv]

Jan 25, 2014 16:54:32 GMT -8 David Clark said:

...

C. Go to Admin > Themes > Advanced Styles & CSS > Style Sheet tab, and paste the following at the bottom of everything. It'll only affect thread links.

.thread-link {
font-weight: bold;
}
....

Thanks, that worked.

How do I get the links shown marked by red in the image below to appear bold too?

Jan 25, 2014 16:54:32 GMT -8 David Clark said:

Hey Rajiv,

A. - Did you want to reduce the size of the legend containers, or the folder images within the legend containers? If the former, how would you prefer them to look?

B. For that, you can go to Admin > Themes > Theme Manager > your theme > Images and copy the regular folder icon over the "Hot Topic" icon so they're the same.

....

I'd like to reduce the size of the folder image. If possible, I'd like the lock, the pin and the pen (or whatever that is for announcements) to be more prominent.

I'm not sure what the legend container is.

Jan 25, 2014 16:41:47 GMT -8 Rajiv said:

....


d.   On each board, how do I get the poll icon to appear to the right of the subject.  I only want to leave the locked icon to the left.  

....

With the locked icon in the first column, I'd actually prefer to do away with the locked icon to the right of the subject in the second column.

[Craig]

For the board titles, go into your advanced styles and css option, and Categories (Board Lists) > Name > font-weight.

You can change the images for any theme via your admin area. Admin > themes > manage themes > select the theme you want to change the images > images. If you want to edit the icons, you will need to change them here.

[Rajiv]

Jan 27, 2014 2:11:51 GMT -8 Craig said:

For the board titles, go into your advanced styles and css option, and Categories (Board Lists) > Name > font-weight.

You can change the images for any theme via your admin area. Admin > themes > manage themes > select the theme you want to change the images > images. If you want to edit the icons, you will need to change them here.

Both done.  Thanks.

2 remaining questions:

a.   How do I bold the font in the bar marked in red in the attached image?


b.   How do I remove the lock that appears to the right of the subject (within in the second column)?  Is that one for the templates board as well?

Plus an additional question - how do I reduce the spacing between the rows listing the subjects on each board?
   
Would it be useful if this entire thread was moved to the Templates board?

[Brian]

You can change any aspect of that font by going to Themes > Advanced Styles & CSS and clicking your way through to Header (Top) > Navigation Tree Container > Links. All font declarations will be there.

The lock icon can be removed by removing the following code from Themes > Layout Templates > Board > Thread List. However, this will also prevent the bookmark, poll, falling, and event icons from showing.

<td>$[thread.icons]</td>

If you want the rest of the icons back you can replace it with this instead.

<td>
$[thread.icons.new]
$[thread.icons.poll]
$[thread.icons.bookmark]
$[thread.icons.event]
$[thread.icons.falling]
</td>

The spacing is determined by the padding in the CSS. You'll need to add this to the bottom of Themes > Advanced Styles & CSS > Style Sheet to reduce it.

.threads table.list > tbody > tr > td { padding: 0 5px; }

[Rajiv]

Thanks. All done except for the spacing between threads on the thread list.

I was also able to move the poll icon to after the thread link by placing it after the thread label, as follows:

<tr>
<td>
$[thread.labels]
<span class="link target">$[thread]</span>
{if $[thread.pagination]}<div class="ui-micro-pagination">Pages: $[thread.pagination]</div>{/if}
</td>
<td>
$[thread.icons.new]
$[thread.icons.poll]
$[thread.icons.bookmark]
$[thread.icons.event]
$[thread.icons.falling]
</td>
</tr>

Jan 27, 2014 9:45:15 GMT -8 Brian said:

....



The spacing is determined by the padding in the CSS. You'll need to add this to the bottom of Themes > Advanced Styles &amp; CSS > Style Sheet to reduce it.

.threads table.list > tbody > tr > td { padding: 0 5px; }

When I tried adding .threads table.list > tbody > tr > td { padding: 0 5px; } at the bottom of the style sheet, it removed the spacing altogether.  It's not possible to reduce the spacing by about 50%?

[Rajiv]

One more thing, now that I use the same folder icon for hot threads as for ordinary threads, how do I remove hot threads from the legend?

[Brian]

Jan 27, 2014 22:57:57 GMT -8 Rajiv said:

When I tried adding <td>$[thread.icons]</td> at the bottom of the style sheet, it removed the spacing altogether.  It's not possible to reduce the spacing by about 50%?

That's HTML. It's not supposed to be in the style sheet. The style sheet is for CSS.

Reduce the padding how? Horizontally, vertically, or both?

Jan 28, 2014 5:10:02 GMT -8 Rajiv said:

One more thing, now that I use the same folder icon for hot threads as for ordinary threads, how do I remove hot threads from the legend?

Find this in Themes > Layout Templates > Board.

{foreach $[legend]}
    <td>$[legend.icon] <span>$[legend.name]</span></td>
{/foreach}

Change it to this.

{foreach $[legend]}
{if $[legend.name] != "Hot"}
    <td>$[legend.icon] <span>$[legend.name]</span></td>
{/if}
{/foreach}

[Rajiv]

Jan 28, 2014 10:01:49 GMT -8 Brian said:

....

Jan 28, 2014 5:10:02 GMT -8 Rajiv said:

One more thing, now that I use the same folder icon for hot threads as for ordinary threads, how do I remove hot threads from the legend?

Find this in Themes > Layout Templates > Board.

{foreach $[legend]}
    <td>$[legend.icon] <span>$[legend.name]</span></td>
{/foreach}

Change it to this.

{foreach $[legend]}
{if $[legend.name] != "Hot"}
    <td>$[legend.icon] <span>$[legend.name]</span></td>
{/if}
{/foreach}

Done, thanks.

Jan 28, 2014 10:01:49 GMT -8 Brian said:

....

Reduce the padding how? Horizontally, vertically, or both?

....

Between rows, so that would be vertical.

I've corrected my post above, to refer to the correct text.

[Brian]

Change the number 0 to your preferred spacing. For example, this will change the vertical spacing to 2px.

.threads table.list > tbody > tr > td { padding: 2px 5px; }

[Rajiv]

Jan 27, 2014 4:34:19 GMT -8 Rajiv said:

....

Plus an additional question - how do I reduce the spacing between the rows listing the subjects on each board?

....

Jan 27, 2014 22:57:57 GMT -8 Rajiv said:

....

Jan 27, 2014 9:45:15 GMT -8 Brian said:

....

The spacing is determined by the padding in the CSS. You'll need to add this to the bottom of Themes > Advanced Styles &amp; CSS > Style Sheet to reduce it.

When I tried adding .threads table.list > tbody > tr > td { padding: 0 5px; } at the bottom of the style sheet, it removed the spacing altogether.  It's not possible to reduce the spacing by about 50%?

Jan 28, 2014 15:48:08 GMT -8 Brian said:

Change the number 0 to your preferred spacing. For example, this will change the vertical spacing to 2px.

.threads table.list > tbody > tr > td { padding: 2px 5px; }

I realise I can't use 0.5px.  I've reduced it to 0.35em.  Works now.

Thanks.  

[Rajiv]

2 new questions:

1. How to I make the date of each post bigger and in bold?
2. How do I remove the "Like" icon from every post.

[David Clark]

Rajiv, the timestamp you see above posts (and underneath thread subjects in the Last Post column on boards, etc etc) all share the same styles, so changing those styles in the visual editor will change them all across the forum. Did you want just the timestamp in posts to be affected this way?

The Like system can be disabled by going to Settings > Forum Settings > Enable Like System > No.