how to design a module on the JA T3 template?

[sagi858]

hi
i worked on my website with this tutorial video
http://www.youtube.com/watch?annotat...KQ0&feature=iv

and in 8:00 they do a design for the right module

1.my question is how i make a css class of type of design so i can choose each module creation in which stile he will be(like they did with the blue class in the video)

2.i dont have the ja purity so i dont have the fiels of like in the video..
i want to do it in the basic blanck template of ja t3..
where i can deal with the css of the type of css classes of the modules?becausse i dont want to change all of them i want different styles of modules


hope you understand my question
thank you for helping!

[winchester]

Hi,

For Question 1:
I'm not sure what you mean by this. Are you talking about the module style or layout?

If it's styling, you can just add your style to your template CSS file. If it's the layout, this is call template override. Template overrides are not something I can just explain easily, but it there are tutorials in Joomla documents to help with this.

For Question 2:
Your can place all your custom styles in "ja_t3_blank/css/template.css". It will work from here. It helps though to have a better understanding of how CSS works in successions and how JA T3 lays out the template.css files and how to override them.

JA T3 uses a base template (template.css) with holds all of the framework's base styles. This is located in the plugin folders which you shouldn't need to do any editing to.

The default template is located in the ja_t3_blank/css folder and overrides the base template. It is also named template.css

When you use a theme to display your page(s) it loads a 3rd template.css file loaded that overrides the default and base template.css files.

I hope this helps.

[sagi858]

Hi,

For Question 1:
I'm not sure what you mean by this. Are you talking about the module style or layout?

If it's styling, you can just add your style to your template CSS file. If it's the layout, this is call template override. Template overrides are not something I can just explain easily, but it there are tutorials in Joomla documents to help with this.

For Question 2:
Your can place all your custom styles in "ja_t3_blank/css/template.css". It will work from here. It helps though to have a better understanding of how CSS works in successions and how JA T3 lays out the template.css files and how to override them.

JA T3 uses a base template (template.css) with holds all of the framework's base styles. This is located in the plugin folders which you shouldn't need to do any editing to.

The default template is located in the ja_t3_blank/css folder and overrides the base template. It is also named template.css

When you use a theme to display your page(s) it loads a 3rd template.css file loaded that overrides the default and base template.css files.

I hope this helps.

hi
But what is the code i need to that ,to the design css of the module..
look at the video 8:00 there you will see alll that i meant here with my question

i know how to override with 3 template css but what is the classes and div of the module where there i can play and change their design

and question 2 is like in the video..there they in the create module in the advanced setting changing it to blue class..how i create classes lije that..where i do that and edit them?


thank you for helping

[winchester]

Ok.. You are talking Phase 11, Rounded corners on modules in the video which starts at 8:00 mins in... Correct?

If so, you will first need to create the image files for the rounded corners and upload them to your images folder.

Next, you add the CSS codes as illustrated in the video. These codes may be added to the template.css file located in the css folder.

ie: templates/[template_name]/css/template.css

In the video it first the attributes needed for the rounded corners and then another new class, "moduleblue" for the blue rounded corner modules.

The first set of css codes applies to ALL modules while the second set (blue) applies only to modules with the "moduleblue" class added to the module in the module's properties. The module properties can be found in the "Module Manager" under the "Extensions" tab.. Click on the Title of the module you would like to change to get into it's properties.

Look for "Advanced Options" for "Module Class Suffix" and type the name of the class there.

One thing you should note first though is that the module already carries a class named "module". When you type in the "Module Class Suffix" - for example: "snazzy" - field it appends it to the class that is already there. In the case of the example, you would get "modulesnazzy" and to make this work, you will have to have "modulesnazzy" as the name of the class in your css file. This is why in the video, they only typed, "blue" when in the CSS codes it says "moduleblue".

There's one thing that I noticed the video didn't say, which is that you need 4 divs to be able to do this. To get Joomla to output 4 divs, the module position style attribute should be set to "rounded".

In the T3 template, you can do this in your layout. You will have to check the T3 tutorials for find out exactly how to do this though.

You should take into account also that those videos are somewhat outdated now. You don't really have to use images to create rounded corners anymore. This can be done using CSS3 attributes.

Example:

.moduleblue {border:1px solid blue; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}

To understand this better, you should read up on CSS more. There are some great tutorials on the web.

[sagi858]

Ok.. You are talking Phase 11, Rounded corners on modules in the video which starts at 8:00 mins in... Correct?

If so, you will first need to create the image files for the rounded corners and upload them to your images folder.

Next, you add the CSS codes as illustrated in the video. These codes may be added to the template.css file located in the css folder.

ie: templates/[template_name]/css/template.css

In the video it first the attributes needed for the rounded corners and then another new class, "moduleblue" for the blue rounded corner modules.

The first set of css codes applies to ALL modules while the second set (blue) applies only to modules with the "moduleblue" class added to the module in the module's properties. The module properties can be found in the "Module Manager" under the "Extensions" tab.. Click on the Title of the module you would like to change to get into it's properties.

Look for "Advanced Options" for "Module Class Suffix" and type the name of the class there.

One thing you should note first though is that the module already carries a class named "module". When you type in the "Module Class Suffix" - for example: "snazzy" - field it appends it to the class that is already there. In the case of the example, you would get "modulesnazzy" and to make this work, you will have to have "modulesnazzy" as the name of the class in your css file. This is why in the video, they only typed, "blue" when in the CSS codes it says "moduleblue".

There's one thing that I noticed the video didn't say, which is that you need 4 divs to be able to do this. To get Joomla to output 4 divs, the module position style attribute should be set to "rounded".

In the T3 template, you can do this in your layout. You will have to check the T3 tutorials for find out exactly how to do this though.

You should take into account also that those videos are somewhat outdated now. You don't really have to use images to create rounded corners anymore. This can be done using CSS3 attributes.

Example:

.moduleblue {border:1px solid blue; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}

To understand this better, you should read up on CSS more. There are some great tutorials on the web.

i understand all that you wrote and i know how to do it with css
the only thing i dont know is that:

What is the code i need to create the blue divs for example so later i can edit like in the video?
What are the steps.. fir example:make jarounded and then what?.. i will know how to implement the explanation i just need to know the steps of create the types of design class that later i can use in the module properties..

thank you veryyy much you really helps!

[winchester]

What is the code i need to create the blue divs for example so later i can edit like in the video?
What are the steps.. fir example:make jarounded and then what?.. i will know how to implement the explanation i just need to know the steps of create the types of design class that later i can use in the module properties..

thank you veryyy much you really helps!

I'm sorry, I'm getting confused now. Between my first and last posts everything is explain except implementing the 4 divs around the module. If this is what you're talking about then follow below.

1: In Joomla backend, go to the Template Manager and then, under the Styles tab, click on your Ja T3 template. This will take you to your template's parameters' page.

2. Go over to the Layouts tab and click the Edit link that corresponds to your template's layout.

3. Look for the middle blocks which should look like this.

	<blocks name="middle" colwidth="20">
		<block name="left1">position-7</block>
		<block name="right1">position-5</block>
	</blocks>

4. Add the following attribute to the left1 (position-7) and the right1 (position-5) blocks.

style="rounded"

It should look like this:

	<blocks name="middle" colwidth="20">
		<block name="left1" style="rounded">position-7</block>
		<block name="right1" style="rounded">position-5</block>
	</blocks>

5. Save the Layout and then Save the Template. This should place 4 divs around each module.

Like I said in my last post, the example in the video is outdated and can not be done using CSS3. The line of codes in my last post is for the rounded corners. The only thing you needed to add to that is the background-color attribute.

[sagi858]

I'm sorry, I'm getting confused now. Between my first and last posts everything is explain except implementing the 4 divs around the module. If this is what you're talking about then follow below.

1: In Joomla backend, go to the Template Manager and then, under the Styles tab, click on your Ja T3 template. This will take you to your template's parameters' page.

2. Go over to the Layouts tab and click the Edit link that corresponds to your template's layout.

3. Look for the middle blocks which should look like this.

	<blocks name="middle" colwidth="20">
		<block name="left1">position-7</block>
		<block name="right1">position-5</block>
	</blocks>

4. Add the following attribute to the left1 (position-7) and the right1 (position-5) blocks.

style="rounded"

It should look like this:

	<blocks name="middle" colwidth="20">
		<block name="left1" style="rounded">position-7</block>
		<block name="right1" style="rounded">position-5</block>
	</blocks>

5. Save the Layout and then Save the Template. This should place 4 divs around each module.

Like I said in my last post, the example in the video is outdated and can not be done using CSS3. The line of codes in my last post is for the rounded corners. The only thing you needed to add to that is the background-color attribute.

i did all and its not working
1. i did the issue of the JArounded style in the layouts
2.i made the images in the photoshop and named them like they should be
3. i posted the code in the template.css

.ja-box-br {
background: url(../images/b-br.gif) no-repeat bottom right #fff;
}

.ja-box-bl {
background: url(../images/b-bl.gif) no-repeat bottom left;
}

.ja-box-tr {
background: url(../images/b-tr.gif) no-repeat top right;
}

.ja-box-tl {
background: url(../images/b-tl.gif) no-repeat top left;
padding: 0 15px 10px;
}

and it is not working what can be the problem?
i try to understand also where the "ja-box-bl/br/tl/tr" are located?


thank you

[winchester]

i did all and its not working
1. i did the issue of the JArounded style in the layouts
2.i made the images in the photoshop and named them like they should be
3. i posted the code in the template.css

.ja-box-br {
background: url(../images/b-br.gif) no-repeat bottom right #fff;
}

.ja-box-bl {
background: url(../images/b-bl.gif) no-repeat bottom left;
}

.ja-box-tr {
background: url(../images/b-tr.gif) no-repeat top right;
}

.ja-box-tl {
background: url(../images/b-tl.gif) no-repeat top left;
padding: 0 15px 10px;
}

and it is not working what can be the problem?
i try to understand also where the "ja-box-bl/br/tl/tr" are located?


thank you

Like I said, the video is quite out dated and may not carry the same classes in your template. You can give me a link to your site so I can look at it (with the changes that I described in my last posts). It may be easier for me to help when I can see your HTML output.

[sagi858]

hi man

thank you for your help i did it on a local server and when i uploaded it to the web it was good and worked..

but i have one problem:
its not feet its size to the module..
i thought of makim the photoshop also of the top bottom righ and left to repeat-x or y and then i can make it to match to each module size i choose..

but i tried there is no .ja-box-b//ja-box-l and so on so i dont know how to do it

else you have another idea how to make it feet?

thank you very much you very helped me!
sagi

[winchester]

Could you give me a link to your website so I can take a look. I will be able to help you fine tune it when I can see it.