Is possible replacing with icon label text in heading in list view?

Status
Not open for further replies.
A small question.

Is possible to insert a icon ( f.e. field1.png) which i want to show in table view instead of label text in header? In header not in row with data...?
example:
column header: name -- to put icon here
column row: Jack, Ivonne, Mike,
 
the only way would be via some css I think.
Set the background image for the heading cell and use a large minus value for the text-indent css property to remove the text
 
I didn't try this yet but in this moment i have similar issue.
I need to add:
"icon1.png" --- instead : Heading - "Dodaj"
"icon2.png" --- instead: Button text - "Dodaj cel szczeg??owy"
on my Fabrik: edit list --- Data --- Related data ( see screen shot)

Have a problem with filename that i should modify and #..... identifier where i should place code "background image...".
I don't understand how to "use a large minus value for the text-indent css property" to remove my text...
 

Attachments

  • Zaznaczenie_128a.png
    Zaznaczenie_128a.png
    93.7 KB · Views: 367
filename that i should modify
If you are using the list default template, you could just add a custom.css into components/com_fabrik/views/list/tmpl/default/

To remove text from a link and replace with a background image, you need to ensure it's set to display:block eg.
Code:
td.related .addbutton a {
    background: url("/media/com_fabrik/images/image.png") no-repeat scroll 0 0 transparent !important;
    display: block;
    text-indent: -1000px;
}
 
Hi, Rob
This doesn't work for me
I am not enought advanced in CSS and have problem to understand why i don't see this code under firebug, :-(
Can you look at this once again?
 

Attachments

  • Zaznaczenie_228.png
    Zaznaczenie_228.png
    166.9 KB · Views: 345
  • Zaznaczenie_229.png
    Zaznaczenie_229.png
    93.8 KB · Views: 297
  • Zaznaczenie_230.png
    Zaznaczenie_230.png
    207.5 KB · Views: 304
Thanks jfquestiaux, but i have some problem with this

i write code:
<img src="images/android1.png" alt="Dopisz przegl?d" title="Dopisz przegl?d" />

and on my list in column i get apart from icon also code: ------ "> ---------
when move with mouse on this ------ "> --------- i see -------- img src= -------------

when move with mouse on icon then i see ------- Dopisz przegl?d ------- - this is OK.
------------------------------------------------------------
In this moment i am testing still this what write troester - code works in this moment, but i can't see icon,
 

Attachments

  • Zaznaczenie_231.png
    Zaznaczenie_231.png
    126 KB · Views: 293
  • Zaznaczenie_232.png
    Zaznaczenie_232.png
    129.5 KB · Views: 310
You can't use " in your CSS (because of echo "...."), change it to '
url('/media/com_fabrik/images/image.png')
but this also doesn't display my icon android1.png :-(

Try to analyze what is wrong but my css skills are not enought - can i get one more tip - what to modify?
this text-indent: -700px;
should be: text-indent: -1500px; - this is clear,
----------------------------------------------------------------------------------------------
I have now:
td.related .addbutton a {
background: url('/images/android1.png') no-repeat scroll 0 0 transparent !important;
display: block;
text-indent: -700px;
font-weight: bold;
color: darkred;
}
 

Attachments

  • Zaznaczenie_233.png
    Zaznaczenie_233.png
    135.9 KB · Views: 273
  • Zaznaczenie_234.png
    Zaznaczenie_234.png
    153.3 KB · Views: 290
  • Zaznaczenie_235.png
    Zaznaczenie_235.png
    89.9 KB · Views: 256
I have Joomla 2.5.11 and Fabrik 3.0.8.
My: <img src="images/android1.png" alt="Dopisz przegl?d" title="Dopisz przegl?d" /> --- images folder is at the root of my site also.
This is column from:
List --- Data --- RelatedData --- Forms --- Button text: ( <img src="images/android1.png" alt="Dopisz przegl?d" title="Dopisz przegl?d" /> )
this button is a link to other Form,

It display icon android1.png but also some strange characters:">
 
Well you asked to display an image in the header of the list, not in a button. I am not sure this is the right way to go: a button text is expecting... text, not something else.
 
Now, i need to display an image in a button:
List --- Data --- RelatedData --- Forms --- Button text: ( <img src="images/android1.png" alt="Dopisz przegl?d" title="Dopisz przegl?d" /> )
this button is a link to other Form,

Rob, troester can you help with this - Robs code works partially - text is removed from link - but icon is not displayed....?
 
Jfquestiaux's solution should do also in the "Button" text.
Make sure you have balanced ""
 
troester:
I have this code (your code)
PHP:
td.related .addbutton a {
background: url('/images/android1.png') no-repeat scroll 0 0 transparent !important;
display: block;
text-indent: -700px;
font-weight: bold;
color: darkred;
}

with single ['] bracket and those lines of this code work:
text-indent: -700px; OK
font-weight: bold; OK
color: darkred; OK

but this doesn't work:
background: url('/images/android1.png') no-repeat scroll 0 0 transparent !important;
--- image/icon is not displayed
----------------------------------
Jfquestiaux solution display icon but together with "code characters" like: "< >

Is a way to modify this code to have pretty "icon"?
 
friendly bump,

This code for image doesn't work...

All what i can do is:
custom_css.php
Code:
<?php
 
/**
* If you need to make small adjustments or additions to the CSS for a Fabrik
* list template, you can create a custom_css.php file, which will be loaded after
* the main template_css.php for the template.
*
* This file will be invoked as a PHP file, so the list ID
* can be used in order to narrow the scope of any style changes.  You do
* this by prepending #listform_$c to any selectors you use.  This will become
* (say) #listform_12, owhich will be the HTML ID of your list on the page.
*
* See examples below, which you should remove if you copy this file.
*
* Don't edit anything outside of the BEGIN and END comments.
*
* For more on custom CSS, see the Wiki at:
*
* http://fabrikar.com/wiki/index.php/3.x_Form_Templates#Custom_CSS
*
*/
 
header('Content-type: text/css');
$c = $_REQUEST['c'];
$buttonCount = (int) $_REQUEST['buttoncount'];
$buttonTotal = $buttonCount === 0 ? '100%' : 30 * $buttonCount ."px";
echo "
 
#listform_$c .fabrikForm {
    margin-top: 25px !important;
}
 
.splittotal {
display: none;
}
 
td.related .addbutton a {
/**    background: url('/images/android1.png') no-repeat scroll 0 0 transparent !important; */
    background: url('/images/android1.png') no-repeat scroll 0 0 transparent !important;
    display: block;
    text-indent: 2px;
    font-weight: bold;
    color: black;
}
 
 
";?>

and in: template_css.php:
PHP:
td.related .addbutton {
    /* background: url('/images/android1.png') no-repeat scroll 0 0 transparent !important; */ 
    background-color: #ccffff; 
    display: block; 
    text-indent: 2px;
    font-weight: bold;
    color: darkblue;
}

All what works, it is:
background-color: #ccffff;
This line:
background: url('/images/android1.png') no-repeat scroll 0 0 transparent !important;

doesn't work in any way, :-(
 
which url is this on - its impossible to comment on what you need to change without seeing the url
 
Status
Not open for further replies.
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top