I just installed magento onto a server, and previous to that made a website layout ( basic html website) which i'm aiming to implement as a main layout on the magento site.
I'm new to Magento, and i've tried working with custom wordpress layout with the use of css. Yet this project gives me the assignment to use the html/css layout and change if not delete the default magento template. I Have no idea how to even get started at this.
Can anyone give me some pinpointers? if not just a link to a tutorial.
The idea is the use the layout i made and use it as a template, but with the goal of using Magento's e-shop functionalities.
thank you.
Philip
Magento has a Design folder and a Skin folder to customize your front-end.
File hierarchy
If you set up the folder structure of your custom theme correctly, Magento will only use the files you overwrite in the new theme. If you go to Magento>app>design>frontend you will see a "base" and "default" folder, base is the uppermost folder in this hierarchy.
Design (html + xml layout)
If you want to create a new theme you start with creating a new folder in Magento>app>design>frontend and copy the files you want to change in your theme. So if your theme will change the 1column layout to start with, you'll end up with this:
Magento>app>design>frontend>[YOUR FOLDER]>default>template>page>1column.phtml
Skin (images + css)
Same goes for the Skin folder. When you want to change the main css file for your theme you'll end up with this structure:
Magento>skin>frontend>[YOUR FOLDER]>default>css>styles.css
Setting Current Package
In the Admin panel you will have to go to System>Configuration>Design>Package and set the "Current Package Name" to the name of [YOUR FOLDER].
Manage Stores
You might want to add a store view, store or website to be able to change views so you could for example show a different front-end for different countries or special offers. Make sure you set the package name to the right scope, in this case.
Related
I have developed a website using xampp. And I want it to replace a current website on Wordpress.
I tried looking for tutorial/steps online, have tried a few, nothing seems to work.
I desperately need to upload it, so it would replace the current website. So any help would be greatly appreciated.
P.S: the website is fully static, no database is required.
Remove everything in the wordpress folder (or move it to a subfolder for the time being while you test) via ftp and upload the html site. As long as your new site has a index.html/index.htm it will replace the wordpress site at the url.
Step 1. Create Template in theme folder
Step 2. Give Template at the top of the page Like this
Step 3. Place all Html code below the template name
Step 4. Go to wordpress dashborad choose your template 'CustomPageT1' from dropdown
Further Detail check the link below
For Example: http://www.wpbeginner.com/wp-themes/how-to-create-a-custom-page-in-wordpress/
I made a website with Twitter bootstrap and the design is finished in terms of all the HTML and CSS.
Now I need to add functions like making an account and blogging. I decided to use Ruby on Rails to do this, but I have no idea where to put the files and how to connect them.
So far I have figured out that I want to put them in the "views" folder and have it say, for example, "index.html.erb" but I don't know if that goes into another folder in "views" or how any of that works.
I also don't know where to put all the CSS and JavaScript incorporated with bootstrap.
Following Rails conventions, views should go in a dir that mirrors the model name (plural), which also aligns with the controller name. i.e. model = user, views dir = users, controller = users_controller.rb. You should read through at least the first few Rails guides; esp this layout and rendering one:
RE the bootstrap portion of this question, just use the bootstrap-sass gem and follow the instructions for including it in your application.scss and application.js.
Ok so I've made an basic upload system with php to upload files from a device to a selected folder.
Trouble is the look of the folder where the files go to is basically the default index look(Basically it looks bland)
I'm wondering what code (html, php etc.) can display the items inside as a more user friendly way.
Get the hierarchy of a directory with PHP
... and style that using css or use a javascript api like Galleria or jsTree
So I understand that a similar question has been asked somewhat before : Structure a stylesheet to manage skins or themes Although I think due to kapsula not being able to articulate (him/her)self properly it was deemed unclear.
I am working on a large project with mulitple CSS/LESS files. We have broken up a lot of the monolithic CSS files into individual ones for CSS specific to certain pages as well as common CSS files for common elements on each page (menus, image placeholders, etc..)
We would like to incorporate multiple themes for the project so we decided upon the following structure:
In the base directory we have all the CSS/LESS specific to all the pages in project, except the colours which we set in the theme directories which are situated within the base directory.
So it looks something to the effect of this:
-CSS
- ORANGE [directory]
-> classic.less
-> controls.less
-> classic.less
-> controls.less
Inside the classic.less file in the ORANGE directory we simply insert the directive #import "../classic.less" and upon saving the file our CSS is generated with all our lovely colour themeing as stipulated in the ORANGE->classic.less file.
So while this process has saved a little bit of work in terms of management of the files, every time I make a change in base directory (maybe i added a new element type to the front end) I have to go into each LESS file that inherits from it and save it again in order for the new CSS to be generated.
Is there a more efficient way of doing this? Or am I looking at doing themeing in an incorrect manner. Should I illustrate what I am trying to do a little bit more?
There is a more flexible way, but you'll need WinLess (maybe it's doable with something else, I just found this to serve my needs) which requires Windows. There should be something similar for other OS'es if you search.
What I've done is, in the CSS or Stylesheet folder of my project, I've created another one named LessBase. Here I keep the core stylesheets. Example:
-Stylesheets
-LessBase
->jquery-ui.less
->forms.less
->buttons.less
->grids.less
->widgets.less
->etc
Then, in the Stylesheets folder, you'll need additional folders with your individual themes. Building on the previous example:
-Stylesheets
-LessBase
->jquery-ui.less
->forms.less
->buttons.less
->grids.less
->widgets.less
->...
->all.less
-Orange
->color-theme.less
->main.css
-Black
->color-theme.less
->main.css
Please note the all.less file. This one is used to import all the files within the LessBase:
#import "buttons.less";
#import "forms.less";
etc
The color-theme.less will basically hold all of your colors. Inside LessBase, all of your .less files will have variables which will be defined in each of the color-theme.less file residing in the theme folder.
Your color-theme.less file might look like this:
#main_color: #edf123;
#secondary_color: #daa123;
#border_color: #e7e7e7;
.
.
.
#import "../LessBase/all.less"
The import of all.less has to be at the end, in order to have the variables defined.
Then, inside WinLess you will make the color-theme.less compile into the main.css placed in the corresponding theme folder.
Here is a screenshot with an example (I blurred out the sctructure. Also, default_1, default_2 are the theme names, replace them with orange, black or whatever theme name you have):
I have an issue. I have made a custom website using CSS and HTML. I want to allow my client to edit and add posts to the website without any knowledge of HTML or CSS while still giving myself the ability to manage the code. Is there any programs or online tools?
I have tried wordpress at (Wordpress.org) and set it up on my website but I was unable to figure out how to use my custom HTML and CSS on the wordpress.
You can create custom sites in Wordpress by using the default installation (I think currently it's the "TwentyTwelve theme), and simply copying the files you want to customize into a child theme directory - named anything you want.
Also copy the default CSS into the child theme directory you make. These files will then be what supercedes the default files when you choose yuor child theme in the Appearance > Themes menu in the default dashboard.