Public Forums 71,145 posts

[sagi858 Friend sagi858Join date: April 2012Posts: 12Downloads:0Uploads:1]

#176542

hi
i worked on my website with this tutorial video
http://www.youtube.com/watch?annotation_id=annotation_31648&v=u4GGnnvEjjM&src_vid=NU2-a0lLKQ0&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 Friend WinchesterJoin date: February 2011Posts: 32Downloads:24Uploads:3 Thanks: 2 Thanked: 19 times in 6 posts]

#450598

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.

Best regards,
H. Winchester Lyon

[sagi858 Friend sagi858Join date: April 2012Posts: 12Downloads:0Uploads:1]

#450611

<em>@winchester 316591 wrote:</em><blockquote>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.</blockquote>

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 Friend WinchesterJoin date: February 2011Posts: 32Downloads:24Uploads:3 Thanks: 2 Thanked: 19 times in 6 posts]

#450616

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

Best regards,
H. Winchester Lyon

[sagi858 Friend sagi858Join date: April 2012Posts: 12Downloads:0Uploads:1]

#450620

<em>@winchester 316613 wrote:</em><blockquote>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//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.</blockquote>

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 Friend WinchesterJoin date: February 2011Posts: 32Downloads:24Uploads:3 Thanks: 2 Thanked: 19 times in 6 posts]

#450651

<em>@sagi858 316619 wrote:</em><blockquote>
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!</blockquote>

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.

Best regards,
H. Winchester Lyon

[sagi858 Friend sagi858Join date: April 2012Posts: 12Downloads:0Uploads:1]

#450674

<em>@winchester 316663 wrote:</em><blockquote>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.</blockquote>

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 Friend WinchesterJoin date: February 2011Posts: 32Downloads:24Uploads:3 Thanks: 2 Thanked: 19 times in 6 posts]

#450888

<em>@sagi858 316705 wrote:</em><blockquote>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</blockquote>

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.

Best regards,
H. Winchester Lyon

[sagi858 Friend sagi858Join date: April 2012Posts: 12Downloads:0Uploads:1]

#450910

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 Friend WinchesterJoin date: February 2011Posts: 32Downloads:24Uploads:3 Thanks: 2 Thanked: 19 times in 6 posts]

#451698

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.

Best regards,
H. Winchester Lyon

[sagi858 Friend sagi858Join date: April 2012Posts: 12Downloads:0Uploads:1]

#451699

<em>@winchester 318006 wrote:</em><blockquote>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.</blockquote>

http://www.shiraz-design.co.il/joomla/

thank you very much

[Winchester Friend WinchesterJoin date: February 2011Posts: 32Downloads:24Uploads:3 Thanks: 2 Thanked: 19 times in 6 posts]

#451700

ok.. This is the easiest way to get this done.

Step 1: Remove all the styling you did to .ja-box-br, .ja-box-bl, .ja-box-tr and .ja-box-tl that you placed in your “theme” template.css file.

Step 2: Add the following lines to your template.css file at the bottom.

/* Rounded Corner Modules */
#ja-left .ja-module {
border:1px solid #ccc; /* Change this to the color you want */
background-color:#ccc !important; /* Change this to the color you want */
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}

See results:

Note: you need to change the colour of the border and the background – #ccc (light grey) – to the colour you want to use.

Note 2: This is CSS version 3 syntax. It should work in all modern web browsers. It will not work in IE 7 and below and other older versions of other web browsers…

---

Attachments:

1. 

Best regards,
H. Winchester Lyon

[sagi858 Friend sagi858Join date: April 2012Posts: 12Downloads:0Uploads:1]

#451701

<em>@winchester 318008 wrote:</em><blockquote>ok.. This is the easiest way to get this done.

Step 1: Remove all the styling you did to .ja-box-br, .ja-box-bl, .ja-box-tr and .ja-box-tl that you placed in your “theme” template.css file.

Step 2: Add the following lines to your template.css file at the bottom.

/* Rounded Corner Modules */
#ja-left .ja-module {
border:1px solid #ccc; /* Change this to the color you want */
background-color:#ccc !important; /* Change this to the color you want */
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}

See results:

Note: you need to change the colour of the border and the background – #ccc (light grey) – to the colour you want to use.

Note 2: This is CSS version 3 syntax. It should work in all modern web browsers. It will not work in IE 7 and below and other older versions of other web browsers…</blockquote>

Hi

i didnt do any change in the base folder

1.i did it like in the video.. i created a new theme and in the template.css file i put the code that i showed you
its not ok to do?

2. my question was how to make a photoshop unique design of a box and then after the cut to html to make it fit to each module sizes
because the sizes are changing from module to module.. how i do it how can i make it flexible size from module to module?it is possible?

thank you for you help ! appriciate it
sagi

[Winchester Friend WinchesterJoin date: February 2011Posts: 32Downloads:24Uploads:3 Thanks: 2 Thanked: 19 times in 6 posts]

#451703

<em>@sagi858 318010 wrote:</em><blockquote>Hi

i didnt do any change in the base folder

1.i did it like in the video.. i created a new theme and in the template.css file i put the code that i showed you
its not ok to do?

2. my question was how to make a photoshop unique design of a box and then after the cut to html to make it fit to each module sizes
because the sizes are changing from module to module.. how i do it how can i make it flexible size from module to module?it is possible?

thank you for you help ! appriciate it
sagi</blockquote>

Sorry.. I realized this after making the post. I’ve corrected it since. I was hoping that you wouldn’t see it till after the correction.

Also, like I size before, the video was done a long time ago. Not that it won’t work, but it’s the old way of doing this.

Best regards,
H. Winchester Lyon

[sagi858 Friend sagi858Join date: April 2012Posts: 12Downloads:0Uploads:1]

#451704

<em>@winchester 318012 wrote:</em><blockquote>Sorry.. I realized this after making the post. I’ve corrected it since. I was hoping that you wouldn’t see it till after the correction.

Also, like I size before, the video was done a long time ago. Not that it won’t work, but it’s the old way of doing this.</blockquote>

so all the changes that i added to the theme folder i created i need to put in the css folder that you showed me?this is the best way to do it now?

and about how to make it with css programming i know.. but if i have special design that cant be done with the creation of css i cant make it on photoshop and then make it feet to each module?

thanks

[Author]

Posts