Creating Theme from Scratch: Difference between revisions

From osCommerce Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 28: Line 28:
[[File:Image 799.png|none|thumb|800x800px]]
[[File:Image 799.png|none|thumb|800x800px]]
Under '''Theme settings''' and '''Main details''' tabs you can '''view/update''' the '''exising''' settings or '''add''' the new ones by clicking on the corresponding button.
Under '''Theme settings''' and '''Main details''' tabs you can '''view/update''' the '''exising''' settings or '''add''' the new ones by clicking on the corresponding button.
[[File:Image 800.png|none|thumb|800x800px]]
[[File:Image 800.png|none|thumb|800x800px]]Under '''Images''' tab you can upload the images for '''favicon, logo, background, default image for categories and products''' (if no image is uploaded for a category or a product) and '''image preloader for lazy loading'''.
 
[[File:Image 801.png|none|thumb|800x800px]]
 
 
Under '''Font''' tab you can '''view''' the '''exising''' fonts and '''add''' the '''new''' ones by clicking on the corresponding button.
 
[[File:Image 802.png|none|thumb|800x800px]]
 
 
In order to add a '''Google font''', go to '''fonts.google.com''', '''choose''' the required font, click on '''Link''' radio button and copy the '''highlighted''' link.
 
[[File:Image 803.png|none|thumb|800x800px]]
 
 
'''Paste''' this link into a '''new''' browser and '''copy''' the '''code''' from there.
 
[[File:Image 804.png|none|thumb|800x800px]]
 
 
Click on '''Add font''' button and '''paste''' the '''code''' in the new field.
 
[[File:Image 805.png|none|thumb|800x800px]]
 
 
Under '''Sizes for responsive design''' tab you can '''view/add''' the required settings for '''min-width''' and '''max-width'''.
 
[[File:Image 806.png|none|thumb|800x800px]]
.
 
Under '''Styles''' tab you can '''view/update''' styles for different blocks by clicking on '''+''' icon and then on '''pencil''' icon. You can also change '''font, background and border''' colors as well as '''font family''' by choosing the options in '''From''' and '''To''' fields and clicking on '''Change''' button.
 
[[File:Image 808.png|none|thumb|800x800px]]
 
 
Under '''CSS''' tab you can choose '''widget or page css class''' (options beginning with b means '''blocks''', with p - '''pages''' and with w - '''widgets'''). You can also add a '''new widget''' by clicking on '''Add''' button.
 
[[File:Image 809.png|none|thumb|800x800px]]

Revision as of 16:53, 29 August 2022

After you accessed the admin area of your website click on Design and CMS and Themes tabs. From this page you can add theme group, import theme and add theme by clicking on the corresponding buttons. You can also backup, move to group, copy or customize your existing themes by clicking on the corresponding buttons as well as change theme title, switch between information and image theme views and delete the theme by clicking on the corresponding icons. It will be much easier to create your own theme based on the existing one so we would recommend to copy the exising theme in order to create your own one.

Image 787.png


After the theme is copied (it may take some time), click on Customize button within this theme. Widgets can be added by poining the mouse to the required place and clicking on Add widgit option. After that click on Widgets button, find the required widget and click on it. Or the widget can be dragged and dropped to the required place without clicking on Add widgit option. The existing widget can be edited, dragged and dropped, exported or deleted by clicking on the corresponding icons.

Image 789.png

Widgets settings differ from one widget to another. For example, widget styles (font, background, padding) can be set up for the external widget div unless they are overriden by the styles within the widget.

Image 790.png

In the same way as widgets, widget groups can be added to the theme and managed.

Image 792.png

If a widget group is exported it is automatically added to the widget list and appears in the list under Widget groups tab. You can also add the new group by clicking on Add button and view/edit the name and page type or delete the exising group.

Image 793.png

If you click on Pages button you can find the required page, go to it by clicking on it or copy this page, edit its settings or delete it. You can also go to the required page by filling in its URL.

Image 794.png

If you click on Edit Texts button, direct your mouse and click on the required text link, you can edit it in the theme via translation tool..

Image 795.png
Image 797.png

Before you save the changes you can click on Preview in popup button to make sure everything meets your requirements.

Image 798.png

Under Backups tab the theme backups are done automatically or you can do it manually by clicking on New Backup button. You can also import or export a theme by clicking on the correspodning buttons. While exporting a theme it is possible to export menus or banners with a theme by checking the corresponding boxes.

Image 799.png

Under Theme settings and Main details tabs you can view/update the exising settings or add the new ones by clicking on the corresponding button.

Image 800.png

Under Images tab you can upload the images for favicon, logo, background, default image for categories and products (if no image is uploaded for a category or a product) and image preloader for lazy loading.

Image 801.png


Under Font tab you can view the exising fonts and add the new ones by clicking on the corresponding button.

Image 802.png


In order to add a Google font, go to fonts.google.com, choose the required font, click on Link radio button and copy the highlighted link.

Image 803.png


Paste this link into a new browser and copy the code from there.

Image 804.png


Click on Add font button and paste the code in the new field.

Image 805.png


Under Sizes for responsive design tab you can view/add the required settings for min-width and max-width.

Image 806.png

.

Under Styles tab you can view/update styles for different blocks by clicking on + icon and then on pencil icon. You can also change font, background and border colors as well as font family by choosing the options in From and To fields and clicking on Change button.

Image 808.png


Under CSS tab you can choose widget or page css class (options beginning with b means blocks, with p - pages and with w - widgets). You can also add a new widget by clicking on Add button.

Image 809.png