Forums

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.

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

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

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

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

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

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

Hi homeopat,
​
Presumably it is not working because something else is over-riding it?
​
Bob

Hi Bob,
​
what you mean? which element? what I have to focus on? I dont know why dont accepts my styles.
​
thank you.

Hi homeopat,
​
Please use your browser web developer tools to see exactly what CSS is being applied the the header.
​
Bob

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

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

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

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

Hi Bob,
​
could you be more specific, please?

Hi homeopat,
​
Not easily - you need to determine what CSS is currently being used to format the table header.
​
Bob

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

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

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
​

​
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.