Joomla Templates Club 406,261 posts

[nkamp Friend nkampJoin date: March 2006Posts: 32Downloads:6Uploads:2 Thanks: 5 Thanked: 3 times in 1 posts]

#193313

Hello,

Last time Ninja lead helpt me in the right direction. I have changed the layout as informed by Ninja lead in my last thread.

I have split:

user1 from user2,3,4
user 5 from 6
user 7 from 8

I have developed on a full hd screen 1900/1080, but I realize now that this was maybe not the best screen resolution to develop. I think the most people have a lower resolution so with a lot of screens user 1, 5 and 7 will be already very close to the other positions. Ok anyway I did it and now I want to have it responsive also for screen resolution 1366/768 or 1024/800 and of course tablet/mobile

Here is my test site!

Beneath are the thngs whch I want to make responsive:

1. top-header which I have added: At the top-header I have added three divs. The only div I want to keep is the logo right in the middle of the menu. The other two divs (with volg ons right side and facebook left side) I want to hide these.
2. For the user 1 position: On all the four main pages place the “custom_caption_block” div’s (like LOOKBOOK, DE EXPERTISE) I want that these have the same behaviour as on the original puresite template.
3. But also user 2, 3, 4, 6 or 8, I want that these have the same behaviour
4. On the bottom it speaks for themselves that they must be placed under each other.

The main problem for me is there are so lot of css file’s

1. Template/resetfashion/css. There are for example layout-mobile, layout-normal and layout-tablet
2. if I make the screen smaller then I see with firebug all kind css files like http://puresite/t3-assets/css_be65d.css (=localhost). I did a puresite quick install and made a copy of the puresite template but this dir is missing!!?? Is this dir with these css/js file’s necessary? (How did I noticed this? I have made another quick install of puresite on my localhost to compare such things and there I see this dir and with firebug I see that these files are used)
3. And I have already changed for the normal-layout the css file’s at “pluginssystemjat3jat3base-themesdefaultcss” template.css and layout.css

So as already said the t3-asset dir is missing? Did I something wrong or is something gone wrong when I copied the template?
And where must I start or which css do I have to change to make it responsive again for all kind of different resolutions (mobile, tablet, other screens?)?

Second question:
I think I have already asked earlier, but I have changed the template.css and layout.css file’s at “pluginssystemjat3jat3base-themesdefaultcss”. But how can prevent that when I update the template that these file’s are not overwritten?

I hope again that someone can help out because I still like the template but it cost a lot of time to find out how it works. I’m not a guru but I know css, php, asp javascript, html.

Nico

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#516826

Hi Nico,

First of all, t3-asset folder only contains compressed CSS file of your site so you should not change CSS file in this folder. You could go to backend and disable Optimize Css option in template manager. Then with help of Firebug, you will see which CSS file you should edit.

<blockquote>And where must I start or which css do I have to change to make it responsive again for all kind of different resolutions (mobile, tablet, other screens?)?</blockquote>

As you can see in this file: /templates/ja_puresite/etc/layouts/default.xml


<stylesheets>
<file media="all">css/layout.css</file>
<file media="all">css/template.css</file>
<file media="all">css/modules.css</file>
<file media="only screen and (max-width:479px)">css/layout-mobile-port.css</file>
<file media="only screen and (max-width:735px)">css/layout-mobile.css</file>
<file media="only screen and (min-width:736px) and (max-width: 985px)">css/layout-tablet.css</file>
<file media="only screen and (min-width:986px) and (max-width: 1235px)">css/layout-normal.css</file>
</stylesheets>


When your site is loaded, based on the screen size, it will load the appropriated CSS file as defined above. Hence, for each screen resolution, you just edit associated CSS file. This tips will help you know more about media jQuery

<blockquote>but I have changed the template.css and layout.css file’s at “pluginssystemjat3jat3base-themesdefaultcss”. But how can prevent that when I update the template that these file’s are not overwritten?</blockquote>

It’s recommended to change CSS in CSS file in template folder: /templates/ja_puresite/css. If you change in above CSS folder in T3 framework and when you update T3 framework, your custom CSS will be lost.

Hope it makes senses.

[nkamp Friend nkampJoin date: March 2006Posts: 32Downloads:6Uploads:2 Thanks: 5 Thanked: 3 times in 1 posts]

#516894

Hello Squaros,

I don’t know exactly anymore but when I bought the template I remember from that time, I start the video tutorials but I couldn’t good access these from my local host and the beginning was ‘simple’, so I thought I know this already keep it.

Now I have the feeling that I’m getting stuck and getting no progress. Default screen looks in the beginning what I want, but responsive it’s not what I want.
I tried today to upgrade the joomla test puresite and it crashed and I couldn’t even start the site anymore. Ok it was still the demo puresite and not the development environment of the customer.

So I have downloaded the newest puresite again and installed it. AND START TO WATCH THE VIDEO TUTORIALS AGAIN! AND NOT ONLY AGAIN BUT LOOK TO THEM ALL

So sorry to ask this on this forum but I understand now why t3-asset exist. Again Sorry.

BUT WHAT IS MOST WORRYING ME NOW IS, NOW I HAVE SEEN THE TUTORIALS, WHAT I DID IS THAT RIGHT???
(I will also watch the tutorials of T3 framework)

1. I have made a copy of the template manual by copying it with the explorer or in the backend from joomla. In the video I see you copy/add the default.xml –> to let say new_template.xml and edit that file. Is this the way it works? (My reason to copy the complete template is that I can always fallback on the orignal template)
2. I edit the default.xml file with the npp++ and not from the backend. I don’t know but maybe it is better to edit these files from the backend?
3. The menu/heade/slider, I want to have these 100%width.

I still want the user1 position horizontal on the same hight as user2,3, and 4 but I want to position user 1 indepent of the other positions user2,3 and 4. (idem for position 5 versus 6, position 7 versus 8). I think I could not realize this without making changes in “pluginssystemjat3jat3base-themesdefaultcss”, or do I make mistakes?

4. <stylesheets>

<file media=”all”>css/layout.css</file>
<file media=”all”>css/template.css</file>
<file media=”all”>css/modules.css</file>
<file media=”only screen and (max-width:479px)”>css/layout-mobile-port.css</file>
<file media=”only screen and (max-width:735px)”>css/layout-mobile.css</file>
<file media=”only screen and (min-width:736px) and (max-width: 985px)”>css/layout-tablet.css</file>
<file media=”only screen and (min-width:986px) and (max-width: 1235px)”>css/layout-normal.css</file>
</stylesheets>
Ok I understand now where the t3-asset css are comming from. I didn’t saw these dir/files at development of my customer. And when I did a check at the original puresit template I saw these css file’s So I thought how does this work. At least I understand now that I only have to change the css file’s mentioned here above.

5. Maybe I will see it in other video’s but if I change the default.xml so as explained in my other quesion, do I also have to change the mobile.xml etc.

I will watch the video tuts further but I still doubting do walk in the right direction? I mean I want to change the header some positions AND KEEP IT RESPONSIVE?

******* EDIT *******
I’m watching the video’s and I will watching further but now I’m looking the video of the flexible layout created by the T3 framework and what is possible. But what is confusing me is they are talking about the blocks and header.php. This file is in the template/blocks dir. But they are also talking about the middle.php and footer.php. But this file is at the “015_puresitepluginssystemjat3jat3base-themesdefaultblocks” directory. So if I changed this…

This is misleading me and gives me the idea that it is a mess. This is maybe also that I not understand the T3 framework yet, but this was always my objection against wordpress. The theme was put in a lot of files. And in one file -for instance header.php – a div was opened and in the footer it is closed. It is time consuming to find out and to understand this. I don’t know what other people think about this.

I hope in the next video’s is explained how to change such things like what I have asked in another thread, but it is hard to understand.

***** EDIT AGAIN *****
I see now more features in the video like CPanel etc. On this moment I don’t know how to realize my wish about the user module position user 1/5/7 but I think I have first to watch all the video’s first.
SORRY!
Nico

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#516965

Hi Nico,

When changing CSS, it’s recommended to override that file in template folder: /templates/ja_puresite/css so that whenever you update framework, your custom code will not be lost.

And remember that this JA Puresite is based on old T3V2 framework, not the new T3 framework. Please checkout documentation and let me know if I can be of further helps.

Regards

1 user says Thank You to Saguaros for this useful post

1. nkamp

[nkamp Friend nkampJoin date: March 2006Posts: 32Downloads:6Uploads:2 Thanks: 5 Thanked: 3 times in 1 posts]

#517275

Hi Saguaros,

My appologizes. I’ve been watching the video’s and reading the wiki pages. And now understand a lot more about the T3 framework. I’ve build the site again and indeed than it is not necessary to change some css file’s of the framework plugin, what I have did. for instance I was not aware of the ‘no-main=”1″‘ parameter etc.

I have also everything created from the backend and NOT with my editor! Yeah only css changes, but I mean the layout xml I have made/created from the backend.

I’m happy and it’s a big releave now. Maybe I come back for a few responsive things, because I have added a ‘top-header’ block with logo. This works fine except when I make the browser smaller.

On this moment:

• It is not important now, but I do not understand exactly what ‘theme’ are. Yeah red/blue etc. I will read the wiki pages again but what files or.. what does a theme made?
• Now there is T3 version 3. Is that not going wrong with automatic updating? If you not watch out, is it not possible that you upgrade it by accident to version 3?
• I will look further the wiki pages, but is there a overview of parameters? Or are only: no-main, no-wrap, name, type, main-inner1/2/3, specialwidth…, the parameters? I mean, I still more understand of the T3 framework and it amazed me a lot and I’m asking myself what is more possible with this framework? What are the borders?

Thanks for helping me till now!!

Nico

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#517462

@nico,

1. Thought that in wiki document, we’ve already mentioned about Themes in T3v2 framework: http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guides#Themes. With theme, you can apply specific color to specific page in your site.

2. New T3 framework is not an upgrade of old T3v2 one. We develop this new version to adapt the changes in new version of Joomla 3.x which uses Less & Bootstrap, and we also implement Bootstrap in our new T3. One drawback here is that you can’t update from T3v2 to new T3 version and can’t use both versions at the same time since it causes conflict.

In case that you want to try great things which new T3 brings out, here is its documentation page: http://t3-framework.org/

3.
<blockquote> no-main, no-wrap, name, type, main-inner1/2/3, specialwidth….</blockquote>

These are default parameter types of Joomla, pls have a look at this for more info: http://docs.joomla.org/J1.5:Defining_a_parameter_in_templateDetails.xml

Hope that helps.

[Author]

Posts