JoomlArt Forums 32,862 posts

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

#139790

or perhaps 90% (or more) of the questions you asked in the Forums, irrespective of template. These are perhaps among the most asked questions but most of the responses provided tend to just provide the “specific answers” but not how they were actually solved. We resort to spoonfeeding.

As the saying goes: “Teach a person to fish, and you may not have to feed him for life.”

The others are more difficult scripting issues, and surprise, actual bugs, for the remainder.

Page Source and CSS files

Perform a Page Source (from your browser), to find the “CSS tags” that surround whatever is in the location you want. Then, go to your template.css

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

to find the CSS specifications of the “CSS tags” — there are usually several of them (e.g., #ja-containerwrap, div.moduletable h3, p.site-slogan, ul.menu li, etc.) They define the width, height, bordering, spacing (margin and padding), the stylesheet of the contents (bold, uppercase, lowercase, size, color, etc.)

Note that there are module specific CSS tags — for example for the modules:

• JA News Frontpage <= ja.news.fp.css (same route path as template.css: see above)
• JA News <= ja.news.css (same route path as template.css: see above)
• Hot Topic <= (see below)
• etc.

You can find their CSS either in the above directory, or in the modules directory for the respective modules.

Once you master the above general procedure outlined above, you will be able to answer most layout cascading stylesheet (CSS) questions on your own.

Easy for you to say. So how come you still ask questions?

There are more difficult ones though because of the way the CSS files are all over the place. For example, some of the CSS specifications that define the Hot Topic module is found elsewhere:

modules => mod_jacatslwi => ja_catslwi => ja.catslwi.css

Moreover, Joomlart scripters have their own style of definining a CSS tag. There are pros and cons for different styles. At times, there are CSS tags used in the scripts but not defined in the CSS files.

The above was hastily prepared, and suggestions for refinement or clarifications from non-programmmers, like myself may improve it further.

Cornelio

N.B. This was a response to another post in the Teline II template. However, since I responded to and have read quite similar questions in other templates, I thought a more general response place elsewhere might be appropriate. I will include also, a more specific example, in the response.

5 users say Thank You to cgc0202 for this useful post

1. faktapress
2. mfcphil
3. Hieu Nguyen
4. Arvind Chauhan
5. benarmeriii

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

#299332

The example below was based on the default Demo structural layout of Teline II. If someone can improve this furhter, so that it is better understood by others who might have similar questions, I would be grateful. Further questions and clarifications from members would be most welcome.

<em>@elbahri 121572 wrote:</em><blockquote>I am looking for the same information as the above message, namely dimension in pixel for my banners in User 5, 6 and 7. I did the above procedure but could not find anything called User 5, 6 ans 7. Can you please give me a help or a hint, thanks a lot</blockquote>

Hi elbahri,

Sorry it was not more clear. Users 5, 6, and 7 are positions. As such, they do not appear in the CSS tags that will appear if you perform the “Page Source”. However, if you know the position location — the right column

• Postion 5 <= this is where you have the video module in Teline II
• Position 6 <= this is where you have the “Latest” “Popular”, “You Tube” and “Media”
• Position 7 <= I think this position is empty, so you have to fill it up so that you can view the CSS tags

Apart from the above, you must also know the CSS tags that define the dimensions of the right column. These are usually expressed in percentage:

/* PRIMARY COLUMN
--------------------------------------------------------- */
#ja-content <= this is the left column of the body
{
clear: both;
display: block;
float: left;
width: 65%;
}

#ja-content div.ja-innerpad
{
padding: 0 15px 0 0;
}

/* COLUMNS
--------------------------------------------------------- */
#ja-colwrap <= this is the right column of the body
{
float: right;
overflow: hidden;
width: 34.9%;
}


based from a defaut size of 970 px

#ja-header,
#ja-mainnav,
#ja-subnav,
#ja-container,
#ja-footer {
width: 970px;
margin: 0 auto;
clear: both;
text-align:left;
}

so that you can calculate the maximum width. Note that you may change the above values, if you know what you are doing. If you total the percentage width of the left (Primary Column) and right column (simply called Columns) the total is slightly under 100%.

Anyway, before you do anything, you need to decide whether to keep width of the page at 970px, reduce or increase it. Your choice, each has its own merits and demerits. Alternatively, you can keep the page width=970px but change the relative widths of the Primary Column (left body) and the Columns (right column). Or, if you are confident width your skills, you can change all of them.

My suggestion is keep the default sizes, for now Experiment later once you are more confident with your skills.

“Learn to walk before you run”, as the saying goes.

And, before you do any changes (or during the progression of your modifications) keep a copy of the previous stages of the modification. This way, you can always go back to a previous step and not start all over again. If worse comes to worst, don’t panic. Your downloaded copy should have the default sizes. Or, you can download a fresh one, in case you messed up the master download files.

Then, after that, you may calculate the potential maximum width that could be placed in positions users 5, 6, 7.

If you use maximum width for your banners to place in these positions, you break your layout. Why? because there are wrapper that you have to consider. Also, the CSS tags of your image and banners themselves may have other specifications that you have to consider — for example, the banner or image wrap — may have margin and padding that are not zero. They further reduce the maximum width that you can place in a position.

The best is to experiment with the maximum width of your images and banners, after you have set the widths of the right column (see above).

Cornelio

2 users say Thank You to cgc0202 for this useful post

1. mfcphil
2. joof

[wooohanetworks Friend wooohanetworksJoin date: September 2008Posts: 1239Downloads:0Uploads:2 Thanks: 148 Thanked: 138 times in 41 posts]

#299356

In general you save yourself a lot of time with simply using the Firefox Browserplugin “Firebug” and the “Developer Toolbar” for Internet Explorer and also available for Firefox as an additional extension.

This will solve most of the steps in the first post with simply using those tools and may save 90% of the time needed in comparison. But most people already use these tools as you can see when looking over the forums.

Much success!

Firebug – Web Development Evolved

http://getfirebug.com

Internet Explorer Developer Toolbar

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

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

#299687

[Note: This was posted originally in response to hsyon’s thread. However, I realized this is minor issue, compared to other problem he raised there. And, he might know how to solve this already. I deleted response below in his thread and posted here. It will be useful still to others, who are just beginning to understand layouting and CSS.]

Hi hsyon,

This is a case of a padding issue in the CSS tag of the wrapper for each hot topic image. I will walk you through it. For you to solve the problem yourself.

A general strategy of solving your question and related questions (about 90% of those you are likely to ask) is outlined in:

All you ever wanted to know to change the layout, image and text specifications
http://www.joomlart.com/forums/topic/all-you-ever-wanted-to-know-to-change-the-layout-image-and-text-specifications/

First, using your browser. perform what is called a Page Source. The Page Source provides the complete scripts, including the hidden html and CSS tags that define the layout of the entire page you are viewing — the layout each component , width, height, background colors, margin, padding, etc, also everything that define how the image or text are presented.

As you can see, the issue you raised falls in what was described. In case of layout issues, your goal is to identify the set of CSS tags that surround the module you have a problem )or want to modify) — this will be the Hot Topic and more specifically, the layout surrounding each image.

Next. The Page Source file is a huge file. So, you perform a Search (use Find) to find the general location of the Hot Topic section. And, since by default, the title of the module appears, so just perform a Find => type “Hot Topic”

It will send you to the “Hot Topic” module portion of the “Page Source” file.

You will find things like this:


(div id="tag name here")

(div class="tag name here")

(span class="tag name here")


Note, I use

(div …)

above and hereafter. What you will actually see would be the “less than” and “greater than” symbols — for “(” and “)”, respectively.****

Copy the set of “CSS tags” that surround whatever is in the location you want. In this case, as stated above, for those that envelop the Hot Topic module, e.g.


(div id="CSS tag name here")
(div class="CSS tag name here")
Hot Topic

(there are lots of stuff here CSS tags, the actual text and image specifications (more CSS tags) -- a mile long because the -- before you see the closing tags below)
.....
(/div)
(/div)


Note, there may be more tags than the example, but you get the idea, I hope.

and also more particularly look also for the set of CSS tags that surround the image. Generally, they are the same for all images, so you really on have to look at the first image

(div id=”CSS tag name here”)
(div class=”CSS tag name here”)

(img src=”url path of image here” “also some other inform here”)

(there are lots of stuff here –but not a mile long this time — before you see the closing tags below)

(/div)
(/div)

Copy all the unique set of CSS tags — focusing your attention on the closest set of CSS tags near the object that requires layout modification, in this case, the image.

Many of the CSS tags are defined in several CSS files in the CSS directory

templates => ja_teline_ii => css

most of them are in defined in the template.css

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

but you will not find all the css files in the css directory.

The Hot Topic module actually is a very powerful module, when you learn more about it. There is a separate module for Hot Topic called “mod_jacatslwi ” found in the modules directory.

modules => mod_jacatslwi => (several files and another directory here)

to make you suffer further in this hunt, there is another directory inside

modules => mod_jacatslwi => ja_catslwi

where you find a special css file, ja.catslwi.css

modules => mod_jacatslwi => ja_catslwi => ja.catslwi.css

where you will actually find the specifications of the CSS tag that you needed to modify:

I have no access to my notebook computer, but if you examine the ja.catslwi.css file, the first CSS tag:

(name of CSS tag here)
{
margin: 0;
padding: 0;
etc.
}

Change the above to:

(name of CSS tag here)
{
margin: 0px 0px 10px 0px;
padding: 0;
etc.
}

the margins refer to the top, right, bottom and left margins, respectively. Thus, changing the bottom margin to 10px (or as you want provides a space between images.

Cornelio
______

N.B. ***I am using a very very old iMac right now with an obsolete browser (the cord that charges my also very notebook had problems last night and had to be replaced)

<em>@hsyong 122274 wrote:</em><blockquote>Hi,

I have just downloaded and installed Teline II (Quickstart installation). There seems to be a problem with the Hot Topics area.

1. There is no vertical space between the images (same with FF 3, IE 6 and Google Chrome)
2. The sliding dark panel drops to the bottom of the page (in IE6, a bit misaligned in Google Chrome & FF3)

Screenshots (the first is from Chrome/FF3, the second from IE6):

Joomla 1.5.10
Teline II 1.6

Pls help. Thanks.

PS:
Just installed. Have not touched any of the admin settings.</blockquote>

[Author]

Posts