Columner theme - two rows of sections?

Skaatar / 2013-08-02 19:57:49   

Hi,
I would like to create two rows with the columner theme.

That is; sections that handle stuff such as about, contact and so forth are in one row, horizontally.

then, there shuold be a row beneath, where each section represents a project title.

-still letting the section titles move when you resize. I mention this since one could set a specific px-width to make titles jump down.

my site: skatar.com

arsondpi / 2013-08-02 20:15:48   

It's been described many times in the past - however once again switch off HTML Proccessing by clicking the P button. Then in your text area insert HTML*

* indexhibit.org/forum/thread/18369/

Skaatar / 2013-08-02 21:01:43   

hmmm. Thanks for answering so fast.

However, I wasn't clear I think.
I am only referring to the section titles. Exhibits are hidden.
(I want visual index to appear immediately you see).

I want specific section titles in top row.
And projects in a row below, like this image shows:
skatar.com/…

arsondpi / 2013-08-03 08:53:21   

Oh now I understand - then after activating the Columner theme (which is currently a beta version) try editing the width of #index to get waht you're after.

Skaatar / 2013-08-03 20:54:26   

well, I have made my #index width 100% so that it adjust to different displays, e.g. tablets.
What I am after is perhaps to wrap section_title_8, 1, 4, etc and position them using padding or margin-top.
Have tried a bit with only weird results.

Might be that the idea is a dead end anyway

arsondpi / 2013-08-03 22:44:57   

No. Each section title has a different id thus you can assign different position to each one...

Skaatar / 2013-08-03 22:49:13   

that's what I thought..
should I work with something like #index ul.section span.section_title_8 in style.css?
Or how would you do that?

arsondpi / 2013-08-03 23:06:53   

Just edit style.css to affect #index ul.section span.section_title_8
;-)

Skaatar / 2013-08-04 07:11:56   

I have... Nothing really changes. Has it to do with the order of code? That is, previous styles dominate

arsondpi / 2013-08-04 08:01:14   

in certain cases yes - it has to do with what you're targeting. However this seems to work...

  1. #index .container div { width: 300px;  }
Skaatar / 2013-08-04 10:06:55   

it was also my initial idea.
It works but is only a temporary solution.
When new sections are added, they will destroy everything.

I still can't do the #index .container div
Where and how can I do this?

Skaatar / 2013-08-04 10:21:32   

or maybe I could just move a couple of section_id to the pre-nav text area?

arsondpi / 2013-08-04 12:26:25   

Then what you can do is to find the css selector of the section you want to break in two lines and change the float: left; property back to the default.
For example if you want to break the menu in two after "Research" add the following to your style.css

  1. ul#section_6.section {
  2.     float: none;
  3. }

Use Firebug or look at your source code to track down the correct css selector...
:-)

Skaatar / 2013-08-04 12:48:49   

arsondpi - awesome!
This is good!

For future extensions, it would be cool to do it with more rows.

Tried with an additional section number and changed the float and tried position properties but it didn't work.

Anyhow, for now this is really good!
Thanks!

arsondpi / 2013-08-04 12:49:50   

Skaatar as I mentioned above use Firebug or look at your source code to track down the correct css selector...
:-)

This thread has been closed, thank you.