From Photoshop to Gantry Framework Template?
-
-
- TheCrazyWombat
- Newbie
- Posts: 12
- Thanks: 0
-
Hi all,
I would like to create a Joomla template with the Gantry Framework for my Photoshop design.
I have been working with Joomla for about six years, but I'm new with the Gantry Framework, have been reading and watching allot of the documentation, but don't really know where to start. I can probably do some quick and dirty file modifications to get what I want, but thats the opposite of why you guys created this awesome framework. :cheesy:
If someone please can give me answers for these basic questions, keeping in mind the following version numbers and without changing core files and keeping the benefits of LESScss and the Responsive Template functions, it would be much appreciated.
Joomla! 2.5.8
Gantry 4.1.4
- What file do I have do modify to insert a full-screen background image?
- What (CSS) file do I have to modify to change (border) colours, font sizes, paddings, margins ect?
If I'm right, there is still no Step by Step tutorial to for Photoshop Design to a Gantry Framework Template. I'm happy to create one as soon as I know what I'm doing. :cheesy:
Cheers,
Robert
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, there is no tutorial because the process is far too complicated to make one that would apply to more than a few templates or people. Each PSD and website is unique and the methods required will vary on a case by case basis.
The styling process is no different than any other framework or code base. If you're not familiar with the Gantry HTML code structures, you're going to want to spend some time using a web inspector in your browser to get a better understanding of how to apply your CSS codes.
There is no CSS file that specifically controls all of those things. Gantry is built so you can add them as you see fit. You can either remove the basic default codes or override them. Since it's all in LESS, the web inspector will not show you the file location, so you're going to want to use a code editor that can search files for text to find where the codes you want to change are, or just override them by creating a custom LESS file.
I know this is all general information, but what you're trying to do here is more than we can provide direct support with. If you're not able to find the codes you need to edit by using a web inspector or code editor, you're going to have an extremely difficult time doing this. There honestly is no easy answer, it's going to take you spending enough time with it to figure out how it works and then applying your design.
If you have basic questions, I can help, but I can't tell you how to do everything. Custom theme development is more complicated than I can explain here. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- TheCrazyWombat
- Newbie
- Posts: 12
- Thanks: 0
-
Hi Cliff,
Thank you very much. What you are telling is pretty much how I thought it was going to be.
I also found this post yesterday, that was pretty helpful: http://www.rockettheme.com/forum/index.php?f=485&t=185466&rb_v=viewtopic#p915077
An other question, what files / folders must I not touch and were can I put my files to override HTML/PHP and CSS/LESS?
If I understand the post from David, is should create a "template-custom.less" file and put it in public_html/<JOOMLA-FOLDER>/templates/gantry/less. Is that correct? The Gantry Framework will notice I've put that file there and will compile it and overrule anything from "template.less" I mention in my "template-custom.less" file right? So if I want a change in the menu style, I create a "menu-custom.less" for "menu.less". By doing that my changes keep working after a update of the Gantry Framework.
If you please can correct me or confirm what I just, that would be great. Than I know I'm on the right track. :cheesy:
And how about changes in the HTML/PHP files? Where can I do that, without loosing changes after an update?
Thanks again!
Robert
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, basically the Gantry theme is meant to be modified. The updates to it are less frequent than our club themes, just because it's more of a blank slate than an actual theme. However, there are updates occasionally, so putting together a game plan for dealing with it is a good idea.
The CSS files, if you're planning on overriding, then you should not change any of the files, but instead add your own file, or set of files, and place your changes in there. See the Gantry documentation for how to add custom CSS files: www.gantry-framework.org/documentation/j...-a-custom-stylesheet
Any changes to HTML or PHP files should be documented somewhere that you can reference when you need to update. If you've made changes to a file that needs to be updated, you'll have to manually copy the changes you've made into the new file. There isn't any other way, so keeping notes is a good strategy.
I'm actually in the process of putting some of this information together for a blog or series of posts. I'm still trying to compile all the details - there are way too many, I could probably write a book that would be outdated by the time I was done with it. I've done a ton of custom themes on Gantry, it's a lot of work and rarely the exact same process for each one. The best advice I can give is to find methods that work for you and stick to them. It really doesn't matter how you do it, just as long as it works and you can deal with it. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- TheCrazyWombat
- Newbie
- Posts: 12
- Thanks: 0
- Hi Cliff, Thanks again or your extensive reply! I'm looking forward to your blog about this.
-
Time to create page: 0.101 seconds