Joomla Templates Club 406,261 posts

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#129461

I have seen this question from a number of posters, more specifically for users of the Joomla 1.5.x — JA Teline II

Problem:
I just looked at one of my installations using Joomla 1.5.x — JA Teline II

The title in the Hot Topic color is blue (default color for links in Joomla?); but the background is dark, so blue and dark background is not a good combination.

Isolating the problem
To find out how to change this you have to find out the CSS specification that defines the header in Hot Topic (I posted in the response a detailed procedure on how to do this so you may be able to learn how to change any CSS specification on your own in the future.

Using the procedure indicated in the response, the title of the first Hot Topic in the Demo turned out to be:


<div class="ja-catslwi-display" style="height:120px; color:#FFFFFF;"><h3>3 Days in Puerto Rico</h3>Eget hendrerit vel Integer dictum sapien Nunc congue tempor Sed lacinia. Ut pellentesque v...</div>


the CSS that defines the title is
<h3>3 Days in Puerto Rico</h3>
,

This means that the CSS
<h3></h3>
defines the specifications of the Hot Topic title; so this must be the CSS specification that must be changed.

One possible solution (but see Warning & Caution below)

As it turned out, the
<h3></h3>
is defined in template.css

(via FTP you will find this by following this route)

templates =>ja_teline_ii => css => template.css

h3
{
font-size: 150%;
}


You may change it to this:

h3
{
font-size: 150%;
color: #ffffff;
text-decoration: none;
}


but heed the caution below.

Warning & Caution:

Note that the headers h1, h2, h3, etc are general headline (titl specifications

This may be a palliative solution (Joomlart must comment whether s
<h3></h3>

) is used only for the Hot Topic headline or with dark background. if not, if it is used with a white or light background — the above is a bad solution.

Cornelio

1 user says Thank You to cgc0202 for this useful post

1. questbg

[felsimedia Friend felsimediaJoin date: April 2008Posts: 84Downloads:0Uploads:0 Thanks: 4 Thanked: 9 times in 1 posts]

#256732

Joomlart please verify if this is a good solution so your customers won’t get crazy waiting for answers and reading every post on the forum.

Kindy say yes or no whether this could solve the problem.
Thanks cgc for the suggestion. God bless you.

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#256792

<em>@felsimedia 62806 wrote:</em><blockquote>Joomlart please verify if this is a good solution so your customers won’t get crazy waiting for answers and reading every post on the forum.

Kindy say yes or no whether this could solve the problem.
Thanks cgc for the suggestion. God bless you.</blockquote>

Hi felsimedia,

There are other alternative solutions to this. For example, as discussed in another thread, and pointed out by another poster. the CSS for the Hot Topic is found in another directory in Joomla 1.5.3, for example. And, if you make the changes there, you can change a more specific css that will do the same trick.

I felt it odd though that the css file would be placed elsewhere (in the modules) in Joomla 1.5x and not in the templates:

=>templates => ja_teline_ii => css => (check the various css)

Cornelio

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#259511

In a number of threads, we discovered that the ja_catslwi.css was found in another directory, not in the css in the templates directory associated with ja_teline_ii:

Via FTP

templates => ja_teline_ii :=> css :=> (css files here)

because I like to make revisions of css in one place, I copied the ja_catslwi.css and uploaded it to:

templates => ja_teline_ii => css => (css files here)

I then modified the index.php

templates => ja_teline_ii => index.php

to recognize the new location of the ja_catslwi.css (see note below). This requrired adding in the index.php

<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>

<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/editor.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/highslide/highslide.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/typo.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja.news.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja.news.fp.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja_catslwi.css" type="text/css" />
<link href="<?php echo $tmpTools->templateurl(); ?>/mootabs/mootabs1.2.css" rel="stylesheet" type="text/css" />


The other scripts were included to position of ja_catslwi.css

Using “View Page Source”, I was able to isolate the general area

<div class="ja-catslwi-display" style="height:120px; color:#FFFFFF;"><h3>3 Days in Puerto Rico</h3>Eget hendrerit vel Integer dictum sapien Nunc congue tempor Sed lacinia. Ut pellentesque v...</div>
</div>


To change the color of the blue Hot Topic titles to white, for example, the “3 Days in Puerto Rico“, the closes CSS specification as shown above is

class=”ja-catslwi-display”. From the related CSS scripts (not shown), this would be found in the ja_catslwi.css

To access the ja_catslwi.css via FTP:

templates => ja_teline_ii => css => ja_catslwi.css (click edit to open)

then find the CSS specification, class=”ja-catslwi-display”

which showed the following:

.ja-catslwi-display
{
position: absolute;
top:0;
left:0;
padding: 0 10px;
} /* orig added */

.ja-catslwi-display h3
{
letter-spacing: normal !important;
}


Note that it was the CSS specification .ja-catslwi-display h3 that defines the the actual CSS specification for the titles.

Since the background is dark, a white color (color: #ffffff; ) would make the title standout. Thus, the CSS specification color: #ffffff; was added, as shown:

.ja-catslwi-display
{
position: absolute;
top:0;
left:0;
padding: 0 10px;
} /* orig added */

.ja-catslwi-display h3
{
letter-spacing: normal !important;
color: #ffffff;
} /* orig added color: #ffffff; */


Check in the front end (you have to clean cache and refresh browser) to see if the desired color change was achieved.

Eureka!

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#259513

In a number of threads, we discovered that the ja_catslwi.css was found in another directory, not in the css in the templates directory associated with ja_teline_ii:

Via FTP

templates => ja_teline_ii :=> css :=> (css files here)

because I like to make revisions of css in one place, I copied the ja_catslwi.css and uploaded it to:

templates => ja_teline_ii :=> css :=> (css files here)

I then modified the index.php

templates => ja_teline_ii :=> index.php

to recognize the new location of the ja_catslwi.css (see note below). This requrired adding in the index.php

<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>

<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/editor.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/highslide/highslide.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/typo.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja.news.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja.news.fp.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/ja_catslwi.css" type="text/css" />
<link href="<?php echo $tmpTools->templateurl(); ?>/mootabs/mootabs1.2.css" rel="stylesheet" type="text/css" />


The other scripts were included to position of ja_catslwi.css

Using “View Page Source”, I was able to isolate the general area for one of the titles in the Hot Topic, for example, in this case “3 Days in Puerto Rico“


<div class="ja-catslwi-display" style="height:120px; color:#FFFFFF;"><h3>3 Days in Puerto Rico</h3>Eget hendrerit vel Integer dictum sapien Nunc congue tempor Sed lacinia. Ut pellentesque v...</div>
</div>


Thus, to change the color of the blue titles to white, for example, the “3 Days in Puerto Rico“, the closes CSS specification as shown above is

class=”ja-catslwi-display”. From the related CSS scripts (cursory area analysis not shown), this would be found in the ja_catslwi.css

To access the ja_catslwi.css via FTP:

templates => ja_teline_ii => css => ja_catslwi.css (click edit to open)

then find the CSS specification, class=”ja-catslwi-display”

which showed the following:

.ja-catslwi-display
{
position: absolute;
top:0;
left:0;
padding: 0 10px;
} /* orig added */

.ja-catslwi-display h3
{
letter-spacing: normal !important;
}


Note that it was the CSS specification .ja-catslwi-display h3 that defines the the actual CSS specification for the titles.

Since the background is dark, a white color (color: #ffffff;) would make the title standout. Thus, the CSS specification color: #ffffff; was added, as shown:

.ja-catslwi-display
{
position: absolute;
top:0;
left:0;
padding: 0 10px;
} /* orig added */

.ja-catslwi-display h3
{
letter-spacing: normal !important;
color: #ffffff;
} /* orig added color: #ffffff; */


Check in the front end (you have to clean cache and refresh browser) to see if the desired color change was achieved.

Eureka!

Note: the added /* orig added color: #ffffff; */ is a reminder to the webmaster of what was changed. Anything placed between /* */ is not read by the server program.

Cornelio

[cgc0202 Friend cgc0202Join date: August 2007Posts: 2244Downloads:0Uploads:3 Thanks: 206 Thanked: 262 times in 1 posts]

#259515

The above more extensive presentation is used to show the scheme that is required to edit any CSS specification.

Basically the general steps would be as follows:

1. Perform a Page View Source
2. Isolate the area where you may want to change the CSS
=> in the example above, I focused on “3 days in Puerto Rico” which is one of the titles with blue color in dark background.
3. It was then easy to show that the CSS specification I wanted to edit was “ja-catslwi-display” and as it actually turned out “ja-catslwi-display h3” because of the <h3></h3>
4. In general most of the css specification would be found in the templates.css, and that should be where you look first, and if not found there, consider the other CSS files.
5. From my cursory analysis of the adjacent CSS specifications, I guessed that the actual css file was
ja_catslwi.css
6. I prefer editing files via FTP because it is so much faster, and much easier to do.
To access the ja_catslwi.css via FTP:

templates => ja_teline_ii => css => ja_catslwi.css (click edit to open)

7. Once the desired CSS specification has been located, it is a matter of experimentation to effect the desire change.
In the example shown, it was color. However, the same general procedure outlined here may be used to find and edit any CSS specification in a css file via FTP.
8. Be sure to save.
9. Check that it worked, by viewing the front end.
[You will need to clean cache and reload your browser window content to view the change.]

Once you master the general procedure outlined above, you should be able to change almost anything you want in the page layout”

color, size of characters, border, bold or not bold (called normal), with and without border, etc.

Cornelio

[Author]

Posts