1. *PREVIEW* JA Jason - September Responsive Joomla template for Portfolio [ Sneak Peek ]


    *PREVIEW* JM Aroma - September Responsive Magento theme for online restaurant sites [Sneak Peek]


    **HOT** Best Support Guy - Vote, Comment & Win [ Vote ]


    8 more tutorial videos on developing with T3 Framework [released]


User Tag List

+ Reply to Thread
 
Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 24
  1. #1


    Join Date
    Apr 2012
    Posts
    12
    Points
    44.28
    Downloads
    1
    Uploads
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to design a module on the JA T3 template?

    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!

  2. #2

    winchester's Avatar
    Join Date
    Feb 2011
    Location
    Kingston, Jamaica
    Posts
    30
    Points
    100.91
    Downloads
    12
    Uploads
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    1
    Thanked 19 Times in 7 Posts
    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.

  3. #3


    Join Date
    Apr 2012
    Posts
    12
    Points
    44.28
    Downloads
    1
    Uploads
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    0
    Thanked 0 Times in 0 Posts

    where i edit them

    Quote Originally Posted by winchester View Post
    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

  4. #4

    winchester's Avatar
    Join Date
    Feb 2011
    Location
    Kingston, Jamaica
    Posts
    30
    Points
    100.91
    Downloads
    12
    Uploads
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    1
    Thanked 19 Times in 7 Posts
    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:
    HTML Code:
    .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.

  5. #5


    Join Date
    Apr 2012
    Posts
    12
    Points
    44.28
    Downloads
    1
    Uploads
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    0
    Thanked 0 Times in 0 Posts

    what is the code

    Quote Originally Posted by winchester View Post
    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:
    HTML Code:
    .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!

  6. #6

    winchester's Avatar
    Join Date
    Feb 2011
    Location
    Kingston, Jamaica
    Posts
    30
    Points
    100.91
    Downloads
    12
    Uploads
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    1
    Thanked 19 Times in 7 Posts
    Quote Originally Posted by sagi858 View Post
    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.
    HTML Code:
    	<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.
    HTML Code:
    style="rounded"
    It should look like this:
    HTML Code:
    	<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.

  7. #7


    Join Date
    Apr 2012
    Posts
    12
    Points
    44.28
    Downloads
    1
    Uploads
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    0
    Thanked 0 Times in 0 Posts

    not work

    Quote Originally Posted by winchester View Post
    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.
    HTML Code:
    	<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.
    HTML Code:
    style="rounded"
    It should look like this:
    HTML Code:
    	<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

    Code:
    .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

  8. #8

    winchester's Avatar
    Join Date
    Feb 2011
    Location
    Kingston, Jamaica
    Posts
    30
    Points
    100.91
    Downloads
    12
    Uploads
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    1
    Thanked 19 Times in 7 Posts
    Quote Originally Posted by sagi858 View Post
    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

    Code:
    .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.

  9. #9


    Join Date
    Apr 2012
    Posts
    12
    Points
    44.28
    Downloads
    1
    Uploads
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  10. #10

    winchester's Avatar
    Join Date
    Feb 2011
    Location
    Kingston, Jamaica
    Posts
    30
    Points
    100.91
    Downloads
    12
    Uploads
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    1
    Thanked 19 Times in 7 Posts
    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.

+ Reply to Thread
Page 1 of 3 1 2 3 LastLast

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Stop working on Weekend!X

If your Boss broke your Joomla template or extension and ask you to fix it today. Here is the immediate solution. Then leave your request on the right forum, we will be helping after the Weekend Happy hours
Our Happy Hours: Friday 18:00 - Monday 9:00

No working during happy hours. Keep calm and don't break anything.

-->

Your vote matters!X

Vote for Best Support Guy