• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Need some help with my add-ons

R

ragtek

Guest
#1
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..:D), 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:D

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^^ )
 

Bob

Well-known member
#6
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

Well-known member
#7
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.
 
R

ragtek

Guest
#8
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:D
 

Bob

Well-known member
#9
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:D
Nothing wrong with using tables, just need to use tables within default xf format for them to look nice :D ... 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)

ragtek-1.png ragtek-2.png ragtek-3.png

Code Sample for image 1
HTML:
<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
HTML:
<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
HTML:
<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>
 
R

ragtek

Guest
#10
Hm, it's not working for me:(

Code:
<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:
tab.PNG

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

Bob

Well-known member
#11
you need to use <th> and not <td> for the Table heads.. you are using <td> in your table head area..

swap with this...

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

CyberAP

Well-known member
#14
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.