Buy Now
Sign in

how format column names in table header in CCv5

homeopat , January 30 at 08:10
H
homeopat
Hello to everyone,
I have table in CCv5 where I need to format names of columns like (text-align, font-family, size).
for example I set up in Front list -> settings -> columns.settings:
model.column:<div style="font-family: Calibri;font-size: 14px;text-align:left;">NAMEOFCOLUMN</div>


but when I set up sorting for this column then the sorting buttons are offset to next row a I figure out that this do using of DIV.
I figure out too that is using span and css class:
<th class="th-model.column"><span>ZÁZNAM
</span></th>


Can you tell me how modify (add attributes like text-align) to the dynamic class "th-model.column"?
thank you.
GreyHead

Hi Homeopat,

You can add a block of CSS in the Header block of the listing, that is probably the simplest way to add styling.

<?php​
​$jdoc = \JFactory::getDocument();​
​$style = "​
​. . .​
​";​
​$jdoc->addStyleDeclaration($style);​
​?>

Bob

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
H
homeopat

Hi Bob,

I add to header this code:

 $style = "
.th-prehled.filialka {font-family: Calibri;font-size: 14px;text-align:left;}
.th-prehled.datum {font-family: Calibri;font-size: 14px;text-align:center;}
.th-prehled.saldo {font-family: Calibri;font-size: 14px;text-align:right;}
";
$doc->addStyleDeclaration($style)

​but doesnt works​
​I take a look to source code and found:​
<th class="th-prehled.filialka"><span><a href="../?act=index&amp;orderfld=prehled.filialka&amp;orderdrc=asc">FILIÁLKA
<i class="fa fa-sort"></i></a></span>
so I thought that I must use class name
.th-prehled.filialka

but it doenst help and I try some variations like:

th prehled.filialka​
​th .prehled.filialka​
​.prehled.filialka

but without result.

what I am doing wrong?

THX

GreyHead

Hi homeopat ,

Is the CSS being added to the page? The snippet that you posted is incomplete.

Bob

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
H
homeopat

Hi Bob,

of course, I wrote that I added css style to header (front list -> list display -> table)​

GreyHead

Hi homeopat,

And if you look at the listing using your browser web developer tools, is the CSS being added to the page.

Bob

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
H
homeopat

Hi Bob,

Yes, I see in DEV tools in style editor as embedded styling, but not working.​

GreyHead
Hi homeopat,
Presumably it is not working because something else is over-riding it?
Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
H
homeopat
Hi Bob,
what you mean? which element? what I have to focus on? I dont know why dont accepts my styles.
thank you.​
GreyHead
Hi homeopat,
Please use your browser web developer tools to see exactly what CSS is being applied the the header.
Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
H
homeopat
Hi Bob,
if you mean header between <head> </head> so I see:​
<link href="/portal2/templates/protostar/css/template.css?e7217a9cdd0bc92fa85319f84b73e31f" rel="stylesheet" />​
​<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />​
​<link href="http://portal.wiky.cz/portal2/media/editors/arkeditor/css/squeezebox.css" rel="stylesheet" />
<link href="http://portal.wiky.cz/portal2/libraries/cegcore/assets/bootstrap/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />​
​<link href="http://portal.wiky.cz/portal2/libraries/cegcore/assets/bootstrap/css/bootstrap-theme.css" media="screen" rel="stylesheet" type="text/css" />​
​<link href="http://portal.wiky.cz/portal2/libraries/cegcore/assets/bootstrap/css/bootstrap-gcore.css" media="screen" rel="stylesheet" type="text/css" />​
​<link href="http://portal.wiky.cz/portal2/libraries/cegcore/assets/font_awesome/css/font-awesome.css" media="screen" rel="stylesheet" type="text/css" />​
​<link href="http://portal.wiky.cz/portal2/libraries/cegcore/assets/gplugins/gtabs/gtabs.css" media="screen" rel="stylesheet" type="text/css" />​
​<link href="http://portal.wiky.cz/portal2/libraries/cegcore/assets/gplugins/gsliders/gsliders.css" media="screen" rel="stylesheet" type="text/css" />​
​<link href="http://portal.wiky.cz/portal2/libraries/cegcore/assets/gplugins/gmodal/gmodal.css" media="screen" rel="stylesheet" type="text/css" />​
​<link href="http://portal.wiky.cz/portal2/libraries/cegcore/assets/gplugins/gdropdown/gdropdown.css" media="screen" rel="stylesheet" type="text/css" />​
<style>​
​​
​ .th-prehled.filialka{font-family: Calibri;font-size: 24px;text-align:left;}​
​ .th-prehled.datum {font-family: Calibri;font-size: 14px;text-align:center;}​
​ .th-prehled.saldo {font-family: Calibri;font-size: 14px;text-align:right;}​
​ ​
​ h1, h2, h3, h4, h5, h6, .site-title {​
​ font-family: 'Open Sans', sans-serif;​
​ }​
​ body.site {​
​ border-top: 3px solid #1b7020;​
​ background-color: #ffa600;​
​ }​
​ a {​
​ color: #1b7020;​
​ }​
​ .nav-list > .active > a,​
​ .nav-list > .active > a:hover,​
​ .dropdown-menu li > a:hover,​
​ .dropdown-menu .active > a,​
​ .dropdown-menu .active > a:hover,​
​ .nav-pills > .active > a,​
​ .nav-pills > .active > a:hover,​
​ .btn-primary {​
​ background: #1b7020;​
​ }
thank you
GreyHead
Hi homeopat,
I actually meant the Header of your listing table which I think is what you are trying to apply the CSS to.
Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
H
homeopat
Oh, but I mentioned it before
$style = "​
​ .th-prehled.filialka{font-family: Calibri;font-size: 24px;text-align:left;}​
​ .th-prehled.datum {font-family: Calibri;font-size: 14px;text-align:center;}​
​ .th-prehled.saldo {font-family: Calibri;font-size: 14px;text-align:right;}​
​ ";​
​ $doc->addStyleDeclaration($style);​
GreyHead
Hi homeopat,
You need to look at what is *actually* being applied to help work out why that CSS is not working.
Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
H
homeopat
Hi Bob,
could you be more specific, please?
GreyHead
Hi homeopat,
Not easily - you need to determine what CSS is currently being used to format the table header.
Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
H
homeopat
Hi Bob,
I am not sure ... here is the starting code of the form:
<div class="gbs3">​
​<div class="chrono-page-container">​
​ <form action="/portal2/component/chronoconnectivity5/?cont=lists&ccname=prehledzustatku" method="post" name="admin_form" id="admin_form">​
​ <p style="font-family: Calibri;font-size: 14px;display:block;float:right;text-align:right;">CELKOVÝ ZŮSTATEK: <br><b>1 373 855,00 Kč</b></p>​
​ <table class="table table-hover table-censored" id="gcore_table_list">​
​ <thead>​
​ <tr>​
​ <th class="th-prehled.filialka">​
​ <span>​
​ <a href="http://XXXXXXXXXXX/portal2/index.php?option=com_chronoconnectivity5&cont=lists&act=index&ccname=prehledzustatku&orderfld=prehled.filialka&orderdrc=asc" >​
​ FILIÁLKA​
​ <i class="fa fa-sort"></i>​
​ </a>​
​ </span>​
​ </th>​
​ <th class="th-prehled.cf_created">​
​ <span>​
​ ZÁZNAM​
​ </span>​
​ </th>​
​ <th class="th-prehled.saldo">​
​ <span>​
​ <a href="http://XCXXXXXXXXX/portal2/index.php?option=com_chronoconnectivity5&cont=lists&act=index&ccname=prehledzustatku&orderfld=prehled.saldo&orderdrc=asc" >​
​ ZŮSTATEK​
​ <i class="fa fa-sort"></i>​
​ </a>​
​ </span>​
​ </th>​
​ </tr>​
​ </thead>
and I need to format cells with classes th-prehled.filialka, th-prehled.cf_created and th-prehled.saldo where is written FILIÁLKA, ZÁZNAM AND ZŮSTATEK.
thank you bob
GreyHead
Hi homeopat,
If you use your browser Web Developer tools you can see exactly what CSS is being applied to the <th> elements.
Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
H
homeopat
Hi,
I am trying but cant figure out, how define class to rewrite it my own styling.
for example, when I select row with <th class="th-prehled.cf_created"> then I see
ScreenShot1681.jpg
and dont know how set text-align for this element only
in template.css is class like this.
.table th,​
​.table td {​
​ padding: 8px;​
​ line-height: 18px;​
​ text-align: left;​
​ vertical-align: top;​
​ border-top: 1px solid #ddd;​
​}
so I tried
.prehled .filialka th{font-family: Calibri;font-size: 24px;text-align:right;}
but not working
thank you.
Attachments
ScreenShot1681.jpg
ScreenShot1681.jpg
(53.15 KiB)
115 Downloads/Views