how format column names in table header in CCv5

ad

admin_wiky 30 Jan, 2018

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.

Gr

GreyHead 30 Jan, 2018

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

ad

admin_wiky 31 Jan, 2018

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

Gr

GreyHead 31 Jan, 2018

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

ad

admin_wiky 01 Feb, 2018

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

Gr

GreyHead 01 Feb, 2018

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

ad

admin_wiky 05 Feb, 2018

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

Gr

GreyHead 09 Feb, 2018

Hi homeopat,

Presumably it is not working because something else is over-riding it?

Bob

ad

admin_wiky 12 Feb, 2018

Hi Bob,

what you mean? which element? what I have to focus on? I dont know why dont accepts my styles.

thank you.

Gr

GreyHead 12 Feb, 2018

Hi homeopat,

Please use your browser web developer tools to see exactly what CSS is being applied the the header.

Bob

ad

admin_wiky 13 Feb, 2018

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

Gr

GreyHead 13 Feb, 2018

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

ad

admin_wiky 13 Feb, 2018

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

Gr

GreyHead 13 Feb, 2018

Hi homeopat,

You need to look at what is *actually* being applied to help work out why that CSS is not working.

Bob

ad

admin_wiky 20 Feb, 2018

Hi Bob,

could you be more specific, please?

Gr

GreyHead 20 Feb, 2018

Hi homeopat,

Not easily - you need to determine what CSS is currently being used to format the table header.

Bob

ad

admin_wiky 09 Mar, 2018

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

Gr

GreyHead 09 Mar, 2018

Hi homeopat,

If you use your browser Web Developer tools you can see exactly what CSS is being applied to the <th> elements.

Bob

ad

admin_wiky 09 Mar, 2018

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

how format column names in table header in CCv5 image 1

how format column names in table header in CCv5 image 1

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.