Simple Machines Community Forum

Customizing SMF => SMF Coding Discussion => Aiheen aloitti: ballin - maaliskuu 16, 2014, 11:49:56 AP

Otsikko: changing width of boards to be smaller than the catbg!
Kirjoitti: ballin - maaliskuu 16, 2014, 11:49:56 AP
Hi everyone, I've been stuck on this new theme i'm designing. I've been trying this out for days, but still no luck.

http://avalonpk.com/testrepos/index.php?theme=4

As you can see, the board is bigger than the catbg. All that i'm trying to do is make the board smaller than the catbg.

Here is what my final aim for it to look like is:

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FptpI7Vi.png&hash=42e962b4e4f56d98f0d1aff6b9d12cf28fc3aab3)

Any help would be greatly appreciated! Thank you :)
Otsikko: Re: changing width of boards to be smaller than the catbg!
Kirjoitti: emanuele - maaliskuu 16, 2014, 12:16:19 IP
I'm not a theme expert, but try to have rows of different widths doesn't look possible (I may be badly wrong).
What you'd have to do is re-work the boardindex to get rid of the tables entirely, or alternatively you can try to place some dummy cells in the boards tbody in order to squash the cells with the content.
Otsikko: Re: changing width of boards to be smaller than the catbg!
Kirjoitti: Antes - maaliskuu 16, 2014, 12:27:30 IP
Your theme looks very nice indeed :) I liked it. But your forum's width are not really big enough to hold that much info in small area. I think you need to define td.info and give width to it as well.

If i were you, I'll remove the td.stats area and put those stats under description of board. It also gives you more width.
Otsikko: Re: changing width of boards to be smaller than the catbg!
Kirjoitti: ballin - maaliskuu 16, 2014, 12:37:58 IP
Lainaus käyttäjältä: emanuele - maaliskuu 16, 2014, 12:16:19 IP
I'm not a theme expert, but try to have rows of different widths doesn't look possible (I may be badly wrong).
What you'd have to do is re-work the boardindex to get rid of the tables entirely, or alternatively you can try to place some dummy cells in the boards tbody in order to squash the cells with the content.

Is there an alternative to your knowledge? Sticking in dummy cells wouldn't be efficient because they wouldn't allow my design to look as I plan it to.

Lainaus käyttäjältä: Antes - maaliskuu 16, 2014, 12:27:30 IP
Your theme looks very nice indeed :) I liked it. But your forum's width are not really big enough to hold that much info in small area. I think you need to define td.info and give width to it as well.

If i were you, I'll remove the td.stats area and put those stats under description of board. It also gives you more width.

How can I increase the margin of the board though? I just want the board to have a smaller width.
Otsikko: Re: changing width of boards to be smaller than the catbg!
Kirjoitti: emanuele - maaliskuu 16, 2014, 04:49:27 IP
The first part of the sentence was the "proper" alternative:
LainaaWhat you'd have to do is re-work the boardindex to get rid of the tables entirely,
That means change "completely" the boardindex template to use <div>s instead of <table>s.
Otsikko: Re: changing width of boards to be smaller than the catbg!
Kirjoitti: Antes - maaliskuu 16, 2014, 04:51:39 IP
Lainaus käyttäjältä: emanuele - maaliskuu 16, 2014, 04:49:27 IP
The first part of the sentence was the "proper" alternative:
LainaaWhat you'd have to do is re-work the boardindex to get rid of the tables entirely,
That means change "completely" the boardindex template to use <div>s instead of <table>s.

I support this, get rid of table styling and use div's instead. (That needs some extra work because currently your board-index template defined based on table styling, you need to edit some CSS parts to fit or write from zero).
Otsikko: Re: changing width of boards to be smaller than the catbg!
Kirjoitti: ballin - maaliskuu 16, 2014, 04:54:23 IP
Lainaus käyttäjältä: emanuele - maaliskuu 16, 2014, 04:49:27 IP
The first part of the sentence was the "proper" alternative:
LainaaWhat you'd have to do is re-work the boardindex to get rid of the tables entirely,
That means change "completely" the boardindex template to use <div>s instead of <table>s.

Alright, thanks guys. I was hoping I could find a simpler alternative rather than going the extra mile and making it table-less.
Otsikko: Re: changing width of boards to be smaller than the catbg!
Kirjoitti: emanuele - maaliskuu 16, 2014, 06:40:20 IP
The simple alternative are the dummy cells.
As I said I'm expert, but I think are the only two alternatives... :(

But do not believe my words without a second confirmation, I'm pretty bad at design. ;)
Otsikko: Re: changing width of boards to be smaller than the catbg!
Kirjoitti: Antechinus - maaliskuu 16, 2014, 08:27:56 IP
It's a PITA because the entire board index is just one big table. However, you can get cunning. While tableless for the whole thing is a better option in many ways, if you want an easier option I'd be playing with negative left and right margins on the h3. You should be able to get them poking outside the th that way.

If that doesn't work, you'll have to get a bit more cunning. Relative and absolute positioning might be useful. If the .cat_bar div is defined as position: relative; and the h3 as absolute, you should be able to make the h3 do anything you want.