Main Page: Difference between revisions

Revision as of 09:14, 19 March 2025

Features for OJS Theme

The latest version of the Ashvisual theme for Open Journal Systems (OJS) introduces seven innovative features designed to enhance and beautify the visual appearance of your OJS website. These features provide users with customizable options to improve both aesthetics and functionality, ensuring a modern, polished, and user-friendly design. The following is an explanation of these features.

1. Colour, and Accent Colour

Description

Choose a color for both your primary and secondary color themes to personalize your design, ensuring it aligns with your desired aesthetic. Alternatively, if you have a specific color in mind, you can manually enter the exact hex codes for each color. This allows you to fully customize the color scheme to your exact preferences, giving you more control over the look and feel of your design.

Option Field Type: Click and choose / Hex code

2. Typography

Description

Choose the appropriate font combination that best suits your design and aesthetic preferences. We have carefully curated and provided 9 thoughtfully selected combinations for you to choose from. Each combination is designed to offer a balance of style, readability, and visual appeal, making it easier for you to create a cohesive and professional look for your project. Feel free to explore the options and select the one that best aligns with your vision and the overall tone you want to convey.

Option Field Type: Dropdown Options

Plus Jakarta Sans/Noto Serif: The heading uses a plus jakarta sans font, and text uses a serif font
Noto Sans: The entire website uses the sans-serif font
Noto Serif: The entire website uses the serif font
Noto Serif/Noto Sans: The heading uses a serif font, and text uses a sans-serif font
Noto Sans/Noto Serif: The heading uses a sans-serif font, and text uses a serif font
Montserrat/Noto Serif: The heading uses a montserrat font, and text uses a serif font
Lato: The entire website uses the Lato font
Lora: The entire website uses the Lora font
Lora/Open Sans: The heading uses a Lora font, and text uses Open-sans font

3. Header, Content, and Footer Style

Description

These sections form the core structure of a website, and their design can significantly influence the user experience and overall visual appeal. The available styles are categorized into four main types: PKP Default, Classic, Creative, and Modern, each offering a unique aesthetic and user experience. Additionally, you have the flexibility to combine these styles to create a hybrid design that best suits your website’s needs. For example, you might choose a Classic header, a Modern content layout, and a Creative footer to achieve a distinctive and dynamic look. This approach provides greater customization, allowing you to cater to your audience while maintaining a cohesive and engaging design.

Option Field Type: Dropdown Options

We are committed to enhancing the user experience by introducing new visual aesthetics and layouts to suit different design preferences. To keep you informed, you can easily track the progress of these updates by referring to our development roadmap, which includes a detailed release schedule outlining when new styles will be available. This will help you stay up to date with the latest improvements and anticipate the next steps in the evolution of the theme.

In the current version of the theme the following styles are available:

PKP Default Theme, Default theme view of Open Journal Systems platform
The Clasical Style, Visit theme demo website

4. Journal Summary

This content is currently under construction, it will be available in the next few weeks. contact us if you have any further questions.

5. Article Genesis

Displays the genesis (received, accepted, published) date of the article on the article details page. If activated, genesis will appear as shown in the image below.

6. Citations and Statistics

Displays the number of galley downloads and abstract views on the article detail and article summary pages. there are 3 settings (None, Basic, and Dimensions).

None: Disable any statistics
Click image to enlarge
Basic statistics: Displays the number of downloads and views
Click image to enlarge
Dimensions Statistics AI: Display dimensions citations and statistics
Click image to enlarge

7. Header Background Image

This content is currently under construction, it will be available in the next few weeks. contact us if you have any further questions.

Description: Choose a color for both your primary and secondary color themes to personalize your design, ensuring it aligns with your desired aesthetic. Alternatively, if you have a specific color in mind, you can manually enter the exact hex codes for each color. This allows you to fully customize the color scheme to your exact preferences, giving you more control over the look and feel of your design

Type: Click and choose / Hex code

Preview:

@@ Line 1: / Line 1: @@
 <div class="container px-0">
 <ol class="breadcrumb">
-   <li class="breadcrumb-item active" aria-current="page">Home</li>
+  <li class="breadcrumb-item">[[Main Page|Home]]</li>
+   <li class="breadcrumb-item active" aria-current="page">Features for OJS Theme</li>
 </ol>
 </div>
 <div class="container px-0 pt-4">
-<div class="fonthead">Theme Documentations</div>
+<div class="fonthead">Features for OJS Theme</div>
-<p>This documentation contains tutorials for installing, upgrading, and customizing the AshVisual Themes for OJS (Open Journal Systems), OMP (Open Monograph Press), and OPS (Open Preprint Systems) platforms by PKP (Public Knowledge Project). In general, we provide a complete tutorial here. '''[https://www.ashvisual.com/contact-us/ Contact us]''' if you have any further questions.</p>
+<p>The latest version of the Ashvisual theme for Open Journal Systems (OJS) introduces seven innovative features designed to enhance and beautify the visual appearance of your OJS website. These features provide users with customizable options to improve both aesthetics and functionality, ensuring a modern, polished, and user-friendly design. The following is an explanation of these features.</p>
 </div>
+<div class="container px-0 my-4">
+    <div class="row">
+        <div class="col">
+            <div class="panel-group bsc_accordion" id="bsc_accordion_0">
+                <div class="card">
+                    <div class="card-header" data-toggle="collapse" data-target="#bsc_card_0" aria-controls="bsc_card_0" aria-expanded="true" id="bsc_card_0_header">1. Colour, and Accent Colour
+                    </div>
+                    <div id="bsc_card_0" class="card-collapse collapse fade show" data-parent="#bsc_accordion_0" aria-labelledby="bsc_card_0_header">
+                        <div class="card-body">
+'''Description'''
+<p>Choose a color for both your primary and secondary color themes to personalize your design, ensuring it aligns with your desired aesthetic. Alternatively, if you have a specific color in mind, you can manually enter the exact hex codes for each color. This allows you to fully customize the color scheme to your exact preferences, giving you more control over the look and feel of your design.</p>
+<hr>
+'''Option Field Type:''' Click and choose / Hex code
+<div class="row">
+<div class="col-md-6">
+[[File:ColourFeature.png|none|thumb|500x500px|Click image to enlarge]]
+</div>
+<div class="col-md-6">
+[[File:AccentFeature.png|none|thumb|500x500px|Click image to enlarge]]
+</div>
+</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-header" data-toggle="collapse" data-target="#bsc_card_1" aria-controls="bsc_card_1" aria-expanded="false" id="bsc_card_1_header">2. Typography
+                    </div>
+                    <div id="bsc_card_1" class="card-collapse collapse fade" data-parent="#bsc_accordion_0" aria-labelledby="bsc_card_1_header">
+                        <div class="card-body">
+'''Description'''
+<p>Choose the appropriate font combination that best suits your design and aesthetic preferences. We have carefully curated and provided 9 thoughtfully selected combinations for you to choose from. Each combination is designed to offer a balance of style, readability, and visual appeal, making it easier for you to create a cohesive and professional look for your project. Feel free to explore the options and select the one that best aligns with your vision and the overall tone you want to convey.</p>
+<hr>
+'''Option Field Type:''' Dropdown Options
+<div class="row">
+<div class="col-md-4">
+[[File:TypographyFeature.png|none|thumb|Click image to enlarge]]
+</div>
+<div class="col-md-8">
+# '''Plus Jakarta Sans/Noto Serif:''' The heading uses a plus jakarta sans font, and text uses a serif font
+# '''Noto Sans:''' The entire website uses the sans-serif font
+# '''Noto Serif:''' The entire website uses the serif font
+# '''Noto Serif/Noto Sans:''' The heading uses a serif font, and text uses a sans-serif font
+# '''Noto Sans/Noto Serif:''' The heading uses a sans-serif font, and text uses a serif font
+# '''Montserrat/Noto Serif:''' The heading uses a montserrat font, and text uses a serif font
+# '''Lato:''' The entire website uses the Lato font
+# '''Lora:''' The entire website uses the Lora font
+# '''Lora/Open Sans:''' The heading uses a Lora font, and text uses Open-sans font
+</div>
+</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-header" data-toggle="collapse" data-target="#bsc_card_2" aria-controls="bsc_card_2" aria-expanded="false" id="bsc_card_2_header">3. Header, Content, and Footer Style
+                    </div>
+                    <div id="bsc_card_2" class="card-collapse collapse fade" data-parent="#bsc_accordion_0" aria-labelledby="bsc_card_2_header">
+                        <div class="card-body">
+'''Description'''
+<p>These sections form the core structure of a website, and their design can significantly influence the user experience and overall visual appeal. The available styles are categorized into four main types: PKP Default, Classic, Creative, and Modern, each offering a unique aesthetic and user experience. Additionally, you have the flexibility to combine these styles to create a hybrid design that best suits your website’s needs. For example, you might choose a Classic header, a Modern content layout, and a Creative footer to achieve a distinctive and dynamic look. This approach provides greater customization, allowing you to cater to your audience while maintaining a cohesive and engaging design.</p>
+<hr>
+'''Option Field Type:''' Dropdown Options
+<div class="row">
+<div class="col-md-4">
+[[File:LayoutStyle.png|none|thumb|Click image to enlarge]]
+</div>
+<div class="col-md-8">
+<p>We are committed to enhancing the user experience by introducing new visual aesthetics and layouts to suit different design preferences. To keep you informed, you can easily track the progress of these updates by referring to our '''[[Development Roadmap Information|development roadmap]]''', which includes a detailed release schedule outlining when new styles will be available. This will help you stay up to date with the latest improvements and anticipate the next steps in the evolution of the theme.</p>
+<p>In the current version of the theme the following styles are available:</p>
+# '''PKP Default Theme''', Default theme view of Open Journal Systems platform
+# '''The Clasical Style''', Visit '''[https://demo-ojs.ashvisual.com/index.php/ja theme demo website]'''
+</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-header" data-toggle="collapse" data-target="#bsc_card_3" aria-controls="bsc_card_3" aria-expanded="false" id="bsc_card_3_header">4. Journal Summary
+                    </div>
+                    <div id="bsc_card_3" class="card-collapse collapse fade" data-parent="#bsc_accordion_0" aria-labelledby="bsc_card_3_header">
+                        <div class="card-body">
+                            <p>This content is currently under construction, it will be available in the next few weeks. '''[https://www.ashvisual.com/contact-us/ contact us]''' if you have any further questions.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-header" data-toggle="collapse" data-target="#bsc_card_4" aria-controls="bsc_card_4" aria-expanded="false" id="bsc_card_4_header">5. Article Genesis
+                    </div>
+                    <div id="bsc_card_4" class="card-collapse collapse fade" data-parent="#bsc_accordion_0" aria-labelledby="bsc_card_4_header">
+                        <div class="card-body">
+                            <p>Displays the genesis (received, accepted, published) date of the article on the article details page. If activated, genesis will appear as shown in the image below.</p>
+[[File:ArticleGenesis.png|none|thumb|500x500px|Click image to enlarge]]
+&nbsp;&nbsp;
+                        </div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-header" data-toggle="collapse" data-target="#bsc_card_5" aria-controls="bsc_card_5" aria-expanded="false" id="bsc_card_5_header">6. Citations and Statistics
+                    </div>
+                    <div id="bsc_card_5" class="card-collapse collapse fade" data-parent="#bsc_accordion_0" aria-labelledby="bsc_card_5_header">
+                        <div class="card-body">
+                            <p>Displays the number of galley downloads and abstract views on the article detail and article summary pages. there are 3 settings (None, Basic, and Dimensions).</p>
+# '''None: Disable any statistics'''[[File:NoStats.png|none|thumb|500x500px|Click image to enlarge]]&nbsp;&nbsp;
+# '''Basic statistics: Displays the number of downloads and views'''[[File:BasicStats.png|none|thumb|500x500px|Click image to enlarge]]&nbsp;&nbsp;
+# '''Dimensions Statistics AI: Display dimensions citations and statistics'''[[File:DimensionsStats.png|none|thumb|500x500px|Click image to enlarge]]&nbsp;&nbsp;
+&nbsp;&nbsp;
+                        </div>
+                    </div>
+                </div>
+                <div class="card">
+                    <div class="card-header" data-toggle="collapse" data-target="#bsc_card_6" aria-controls="bsc_card_6" aria-expanded="false" id="bsc_card_6_header">7. Header Background Image
+                    </div>
+                    <div id="bsc_card_6" class="card-collapse collapse fade" data-parent="#bsc_accordion_0" aria-labelledby="bsc_card_6_header">
+                        <div class="card-body">
+                            <p>This content is currently under construction, it will be available in the next few weeks. '''[https://www.ashvisual.com/contact-us/ contact us]''' if you have any further questions.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
-<div class="container px-0 pb-5">
+        </div>
-  <div class="row">
-    <div class="col-md-4 py-3">
-    <div class="card text-dark bg-white">
-    <div class="card-header">[[:Category:OJS_-_Theme|OJS - Theme]]</div>
-    <div class="card-body bg-white">
-* [[How to Installing The OJS - Theme|Installing Theme]]
-* [[How to Upgrading The OJS - Theme|Upgrading Theme]]
-* [[How to Customize The OJS - Theme|Customize Theme]]
-* [[OJS - Theme Features|Theme Features]]
-* [[OJS - Theme Compatibility|Compatibility]]
-* [[OJS - Theme Common Troubleshooting Issues|Troubleshooting]]
      </div>
-    </div>
+</div>
-    </div>
-    <div class="col-md-4 py-3">
+'''Description:'''
-    <div class="card text-dark bg-white">
+Choose a color for both your primary and secondary color themes to personalize your design, ensuring it aligns with your desired aesthetic. Alternatively, if you have a specific color in mind, you can manually enter the exact hex codes for each color. This allows you to fully customize the color scheme to your exact preferences, giving you more control over the look and feel of your design
-    <div class="card-header">[[:Category:OMP_-_Theme|OMP - Theme]]</div>
-    <div class="card-body bg-white">
-* [[How to Installing The OMP - Theme|Installing Theme]]
-* [[How to Upgrading The OMP - Theme|Upgrading Theme]]
-* [[How to Customize The OMP - Theme|Customize Theme]]
-* [[OMP - Theme Features|Theme Features]]
-* [[OMP - Theme Compatibility|Compatibility]]
-* [[OMP - Theme Common Troubleshooting Issues|Troubleshooting]]
-    </div>
-    </div>
-    </div>
-    <div class="col-md-4 py-3">
+'''Type:'''
-    <div class="card text-dark bg-white">
+Click and choose / Hex code
-    <div class="card-header">[[:Category:OPS_-_Theme|OPS - Theme]]</div>
-    <div class="card-body bg-white">
-* [[How to Installing The OPS - Theme|Installing Theme]]
-* [[How to Upgrading The OPS - Theme|Upgrading Theme]]
-* [[How to Customize The OPS - Theme|Customize Theme]]
-* [[OPS - Theme Features|Theme Features]].
-* [[OPS - Theme Compatibility|Compatibility]]
-* [[OPS - Theme Common Troubleshooting Issues|Troubleshooting]]
-    </div>
-    </div>
-    </div>
-  </div>
+'''Preview:'''
-</div>
-<div class="container px-0 pt-4 border-top">
+__INDEX__
-<div class="fonthead">[[Development Roadmap Information|Development Roadmap<span class="linkfont">&nbsp;</span>]]</div>
+__NEWSECTIONLINK__
-</div>
+[[Category:Tutorials]]
+[[Category:OJS - Theme]]