Need some help with my add-ons

[ragtek]

I'm searching for an designer, who could help me to finish my add-ons.
The php part is "finished" (ok that's a lie, my add-ons are never "finished" because i have million ideas for new features..), i've coded a "debug output", but i have no clue, how to make a nice and clean user interface for them, so i could release them finally here

Because my add-ons are (and will be always) free & without an branding, i'm not really making a big money with this, so it would be great if somebody would make it for free (or for a small donation.. :/ )



I'm a lazy and not creative php coder, without css knowledge
( i'm only creative when i'm spraying^^ )

 

[ragtek]

*up*

 

[Allan]

You need pictures for your hack, right?

 

[ragtek]

You need pictures for your hack, right?

No, i need a nice UI (design) for my hacks^^

 

[Allan]

ok, no for me ^^

Good luck

 

[Bob]

How are you outputing your data right now? just in raw tables or are you at least using some of the basic xf divs?

 

[physicspirate]

I could submit a portfolio of my current work, or you can view the most recent threads in this forum to see what I am capable of. If you require my services let me know.

 

[ragtek]

How are you outputing your data right now? just in raw tables or are you at least using some of the basic xf divs?

Both.
I've tried to put everything into "divs", but because this didn't work how i wanted, i used also html tables to format some of the data...
For my article system, i have now somebody helping me with the design, but the linklist outputs atm only
<ol>
<li>{xen:helper 'dump', $link}</li>
</ol>
without any nice formatting because i'm not sure how to show the data...
with vB3 and the table design it was much easier. i had only to put it into <table class="tborder"><tr class="thead"><td>links</td>........
but now with the divs and the classes i'm really lost

 

[Bob]

Both.
I've tried to put everything into "divs", but because this didn't work how i wanted, i used also html tables to format some of the data...
For my article system, i have now somebody helping me with the design, but the linklist outputs atm only
<ol>
<li>{xen:helper 'dump', $link}</li>
</ol>
without any nice formatting because i'm not sure how to show the data...
with vB3 and the table design it was much easier. i had only to put it into <table class="tborder"><tr class="thead"><td>links</td>........
but now with the divs and the classes i'm really lost

Nothing wrong with using tables, just need to use tables within default xf format for them to look nice ... use this format (for quick development) then expand to the class via your own CSS to further format them.

For quick easy development use this format..

<table class="dataTable"> (using dataTable and (dataRow in the tr) is similar to class=tborder)
<tr class="dataRow">
<td> or <th> (using th is like using the tr class="thead")

That will give you the BASIC output of tables within the clean usable default xf table format That will convert and place nice with custom styles (see image 2). Also use the col element of the table to specify column widths (see examples below)



Code Sample for image 1

<div class="sectionMain">
    <h3 class="subHeading"><b>Hello Ragtek</b></h3>
    <div class="primaryContent">
        <table class="dataTable">
            <tr class="dataRow">
                <th><b>Blah 1</b></th>
                <th><b>Blah 2</b></th>
                <th><b>Blah 3</b></th>
                <th><b>Blah 4</b></th>
            </tr>
            <tr class="dataRow">
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr class="dataRow">
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
        </table>
    </div>
</div>

Code sample for image 2

<div class="sectionMain">
    <h3 class="subHeading"><b>Hello Ragtek</b></h3>
    <div class="primaryContent">
        <table class="dataTable">
        <col style="width:50%;">
        <col style="width:20%;">
        <col style="width:20%;">
        <col style="width:10%;">
            <tr class="dataRow">
                <th><b>Blah 1</b></th>
                <th><b>Blah 2</b></th>
                <th><b>Blah 3</b></th>
                <th><b>Blah 4</b></th>
            </tr>
            <tr class="dataRow">
                <td>Data 1 at 50% col width</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr class="dataRow">
                <td>Data 1 at 50% col width</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
        </table>
    </div>
</div>

Code sample for image 3

<div class="sectionMain">
    <h3 class="subHeading"><b>Hello Ragtek, this is a H3 using the subHeading class</b></h3>
    <div class="primaryContent">
        <table class="dataTable">
        <col style="width:50%;">
        <col style="width:20%;">
        <col style="width:20%;">
        <col style="width:10%;">
            <tr class="dataRow">
                <td><b>Blah 1</b></td>
                <td><b>Blah 2</b></td>
                <td><b>Blah 3</b></td>
                <td><b>Blah 4</b></td>
            </tr>
            <tr class="dataRow">
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr class="dataRow">
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
        </table>
    </div>
    <h3 class="sectionFooter"><b>Hello Ragtek, this is a H3 using the footer class</b></h3>
</div>

 

[ragtek]

Hm, it's not working for me

<div class="sectionMain">
    <xen:if hascontent="true">
        <h3 class="subHeading"><b>{xen:phrase ragtek_qus_linkedAccounts}</b></h3>
        <div class="primaryContent">
            <table class="dataTable">
                <xen:contentcheck>
                    <xen:if is="{$associatedAccounts}">
                        <tr class="dataRow">
                            <td>{xen:phrase username}</td>
                            <td>{xen:phrase delete}</td>
                        </tr>
                        <xen:foreach loop="$associatedAccounts" value="$user">
                            <tr class="dataRow">
                                <td>{$user.username}</td>
                                <td>
                                    <a href="{xen:link qus/qus-delete, $user}">{xen:phrase delete}</a>
                                </td>
                            </tr>
                        </xen:foreach>
                    </xen:if>
                </xen:contentcheck>
            </table>
        </div>
        <xen:else/>
        no associated accounts
        </xen:if>
</div>

shows:


As you see it's not like on your first and second image (the table head have no other design)

 

[Bob]

you need to use <th> and not <td> for the Table heads.. you are using <td> in your table head area..

swap with this...

                        <tr class="dataRow">
                            <th>{xen:phrase username}</th>
                            <th>{xen:phrase delete}</th>
                        </tr>

 

[ragtek]

argllllllll

thx very very much

 

[Bob]

argllllllll

thx very very much

you are welcome

 

[CyberAP]

There is also a non-table method to output data.
You could just use display: table-cell;
If you need some help with styling addons I can help you.