What's the difference between a Magento theme and a Magento skin? What's the relationshiop between these and a Magento module?
A theme is any combination of layout, template, locale and/or skin file(s) that create the visual experience...
A theme consists of any or all of the following:
Layout (located in app/design/frontend/your_interface/your_theme/layout/)
These are basic XML files that define block structure for different pages as well as control META information and page encoding.For in-depth look into layouts, read Intro to Layouts)
Templates (located in app/design/frontend/your_interface/your_theme/template/)
These are PHTML files that contain (X)HTML markups and any necessary PHP tags to create logic for visual presentation.
Locale (located in app/design/frontend/your_interface/your_theme/locale/)
These are simple text documents organized on a per language basis that contain translations for store copy.
Skins (located in skin/frontend/your_interface/your_theme/)
These are block-specific Javascript and CSS and image files that compliment your (X)HTML.
Source: http://www.magentocommerce.com/design_guide/articles/magento-design-terminologies4
Related
I am new to Magento.
I am creating Magenta 2 site, I have managed to install Magento, and for it to use the luma theme.
I want to be able to edit the theme (through Inheritance), I understand it uses XML files to design the layout, how do I change these, should they be in the new theme folder, and change them there?
If so, where do I get the origonal Luma xml files, or does magento create these? - There are no themes within the app/ folder, is it here where I create the new theme (that inherits from Luma)?
Many thanks for any help, I am completely new to Magento.
You have to create a custom theme and make theme.xml and set a parent to LUMA.
Now app/design/frontend/customthemename
So anything that you want to customized used in customthemename folder
Thanks
You should create a child theme to edit XML file. To create a child theme, there are 3 steps to do:
Firstly, create a new theme directory in app/design/frontend.
Secondly, declare the new theme by:
Creating theme.xml: this file identifies the name, parent and other
basic info of the new theme.
Creating Composer.json: this file is used to install the theme via Composer later.
Creating registration.php: this file is required in any Magento 2 Extension
and Themes.
Creating static files directories: this folder is used to store CSS, JS, image files.
Creating logo folder: this folder contains files that determine the location and size of your new theme logo.
Thirdly, apply and configure theme in admin: - Run Upgrade Command. - Apply the theme. - Deploy.
For more detailed tutorial, go to Guide to create Magento 2 theme.
The original XML files of any module and themes are located in vendor/magento//view/frontend/layout, with the module_name is the module related to the XML file you want to edit.
For example, with homepage CMS, the XML file is located in vendor/magento/module-cms/view/frontend/layout
Hugo is a general purpose website framework and a static site generator. However, most of the themes are single page themes.
Is it possible to add more pages to these single-page themes in Hugo?
I am specifically interested in the Dimension theme.
Thank you very much for your help.
This depends on how the theme is constructed. In Dimension's case, the answer is no - you can add new markdown files to your content folder, but they will only be rendered on the index page, not as their own individual pages. If you want to generate multiple pages, you will have to either edit the theme or choose a new theme that supports multiple pages.
To edit the theme, see the docs on customising a theme and creating a theme. You will also need to know Hugo templates, so the go template primer is an essential read. Editing themes can be a little tricky, but if you have worked with other templating languages then it is not too much different.
In your case, you will want to edit layouts/_default/single.html to create a single-page view for all of your markdown files. You will also need to edit layouts/index.html to link to them from the index page, otherwise no-one will find them.
Hugo is not just a general purpose website framework/generator. I have been using it for article publishing, news website and to generate a blog! Most of the themes are single pages because people created themes in the way they love. Although still in development, you can check my website Desktop Luxury that is fully static and built with hugo. It's super fast, supports AMP and users just love it. They can't tell the difference between Wordpress sites and Desktopluxury.com in terms of look. Note: The difference is clearly visible in terms of load time, speed and customization ability!
Although it varies by theme, you can easily create a .md (file that contains content - similar to .html*) file out of your blog folder. For example, you want to create an About page. In the root folder that contains your hugo files, create a directory root/content/blog. Add permalinks to your config file that tells the theme to categorize files present in /root/content/blog folder as the blog files. Create the pages such as an about.md & contact.md in root/content folder. They won't show in the blog list, however, they'll be rendered and accessed by siteurl.xyz/about or siteurl.xyz/contact.
*I said .md file similar to .html file as the OP seems new to webdevelopment.
EDIT:
Final homepage after adding few posts
I just downloaded the theme mentioned in the question, added few .md files by opening CMD in the root directory of Hugo website folder and running command ~~ $ hugo new professional.md ~~
Created various pages and added content in them just like we write articles. I achieved the result you wanted with no issue at all. It was super easy!
I want to add extension - All Category Product Carousel in my Magento Website and it has RWD theme.The components of the extension are by default installing in:
app/design/frontend/default/default/layout
app/design/frontend/default/default/template
skin/frontend/default/default
I have moved the components in my theme folder i.e. RWD, and components are now in the following folders:
app/design/frontend/rwd/default/layout
app/design/frontend/rwd/default/template
skin/frontend/rwd/default
But after this also the extension is not working. I am new to Magento so does not know much things about it. Does anything else be done?
The products are there but css and js is not getting applied on them. The data is showing like: Please View Here
You can paste your extension key here. Now you can check if you have copied all the files to RWD.
The extension tell to insert below block in cms page. Include it in your cms->home page.
{{block type="pcarousel/pcarousel" pcarousel_id="carousel id" template="pcarousel/pcarousel.phtml"}}
After that navigate to system->permission->blocks->Add new block and add the type pcarousel/pcarousel there and allow it.
The css and js files were not loading in the main page, have added them externally. Now working
I have created a new Magento 2 theme and added it's parent as LUMA.
It's all working fine but I want to change the layout of my theme and the templates too.
Under Vendor ... I can see that there's all the folders and templates used in LUMA.
I work like to take a copy of all the LUMA view templates and layouts and copy them for use on my theme.
My question is ...
What do I copy and from where?
And where do I place them templates, views etc ?
Below is the reference for theme integration in magento 2:
http://blog.magestore.com/how-to-create-custom-theme-on-magento-2-part-1/
To copy luma,blank theme or module templates, layout and web files to own custom theme
1) To Copy template file:
vendor/magento/module-catalog/view/frontend/templates/product/list.phtml
Follow this path
app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/list.phtml
2) To Copy layout file:
vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml
Follow this path
app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml
I am still trying to understand the themeing engine of magento by studying a theme. im my theme there is breadcrumb pthml file in templates/page/html folder which manipulates the bradcrumbs. How does magento know about the file? does the page/html folder is standard.
and what is the role of the
files do in page.xml
The template system in magento consists of
• XML layout configuration
• PHP template files
• PHP block classes
All layout XML files will be found in the app/design/frontend/<interface>/<theme>/layout folder.
All template files will be in the .phtml files found in various folders under the app/design/frontend/<interface>/<theme>/template folder.
All blocks will be in the app/code/<core,local,community>/<namespace>/<module>/Block folder.
You may not find all the layout/template files in same theme say telescope. For example, Magento will check the following folders, in order, for a file named catalog.xml:
app/design/frontend/interface/telescope/layout/
app/design/frontend/interface/default/layout/
app/design/frontend/base/default/layout/
Breadcrumbs template file will be under your current theme.
for example:
app/design/frontend/<pkg>/<theme>/template/page/html/breadcrumbs.phtml
If its not present in current theme then it will be in base theme
app/design/frontend/base/default/template/page/html/breadcrumbs.phtml
Magento template engine first looks block/page template in active theme if not found the will look in base theme.
this is handled by layout handlers and block descriptions so if you are new in business head to magento knowledgebase and read theming tutorials there
app/design/frontend/base/default/layout/page.xml:82: <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>