|
|
| Line 1: |
Line 1: |
| <div class="container px-0"> | | <div class="container px-0"> |
| <ol class="breadcrumb"> | | <ol class="breadcrumb"> |
| <li class="breadcrumb-item">[[Main Page|Home]]</li>
| | <li class="breadcrumb-item active" aria-current="page">Home</li> |
| <li class="breadcrumb-item active" aria-current="page">Features for OJS Theme</li> | |
| </ol> | | </ol> |
| </div> | | </div> |
| <div class="container px-0 pt-4"> | | <div class="container px-0 pt-4"> |
| <div class="fonthead">Features for OJS Theme</div> | | <div class="fonthead">Theme Documentations</div> |
|
| |
|
| <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> | | <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> |
| </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 class="container px-0 pb-5"> |
| </div>
| | |
| </div>
| | <div class=" col- md- 4 py- 3"> |
| | | <div class="card text-dark bg- white"> |
| <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 class=" card- header">[[: Category:OJS_-_Theme| OJS - Theme]]</div> |
| </div>
| | <div class=" card- body bg- white"> |
| <div id="bsc_card_1" class="card-collapse collapse fade" data-parent="#bsc_accordion_0" aria-labelledby="bsc_card_1_header">
| | * [[How to Installing The OJS - Theme|Installing Theme]] |
| | | * [[How to Upgrading The OJS - Theme|Upgrading Theme]] |
| '''Description'''
| | * [[How to Customize The OJS - Theme|Customize Theme]] |
| <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>
| | * [[OJS - Theme Features|Theme Features]] |
| <hr>
| | * [[OJS - Theme Compatibility|Compatibility]] |
| '''Option Field Type:''' Dropdown Options
| | * [[OJS - Theme Common Troubleshooting Issues|Troubleshooting]] |
| <div class="row"> | | </div> |
| <div class="col-md-4">
| | </div> |
| [[File:TypographyFeature.png|none|thumb|Click image to enlarge]] | | </div> |
| </div> | | |
| <div class="col-md-8"> | | <div class=" col- md- 4 py- 3"> |
| # '''Plus Jakarta Sans/Noto Serif:''' The heading uses a plus jakarta sans font, and text uses a serif font
| | <div class="card text- dark bg- white"> |
| # '''Noto Sans:''' The entire website uses the sans-serif font
| | <div class="card- header"> [[:Category: OMP_-_Theme|OMP - Theme]]</div> |
| # '''Noto Serif:''' The entire website uses the serif font
| | <div class=" card- body bg- white"> |
| # '''Noto Serif/Noto Sans:''' The heading uses a serif font, and text uses a sans-serif font
| | * [[How to Installing The OMP - Theme|Installing Theme]] |
| # '''Noto Sans/Noto Serif:''' The heading uses a sans-serif font, and text uses a serif font
| | * [[How to Upgrading The OMP - Theme|Upgrading Theme]] |
| # '''Montserrat/Noto Serif:''' The heading uses a montserrat font, and text uses a serif font
| | * [[How to Customize The OMP - Theme|Customize Theme]] |
| # '''Lato:''' The entire website uses the Lato font
| | * [[OMP - Theme Features|Theme Features]] |
| # '''Lora:''' The entire website uses the Lora font
| | * [[OMP - Theme Compatibility|Compatibility]] |
| # '''Lora/Open Sans:''' The heading uses a Lora font, and text uses Open-sans font
| | * [[OMP - Theme Common Troubleshooting Issues|Troubleshooting]] |
| </div> | | </div> |
| </div> | | </div> |
| </div>
| | </div> |
| </div>
| |
| </div>
| |
| | |
| <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"> | |
| | |
| '''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 class=" col- md- 4 py- 3"> |
| </div>
| | <div class="card text- dark bg- white"> |
| </div>
| | <div class="card- header">[ [:Category: OPS_-_Theme|OPS - Theme]]</div> |
| </div>
| | <div class="card- body bg- white"> |
| </div>
| | * [[How to Installing The OPS - Theme|Installing Theme]] |
| | | * [[How to Upgrading The OPS - Theme|Upgrading Theme]] |
| <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
| | * [[How to Customize The OPS - Theme|Customize Theme]] |
| </div>
| | * [[OPS - Theme Features|Theme Features]]. |
| <div id="bsc_card_3" class="card- collapse collapse fade" data-parent="#bsc_accordion_0" aria- labelledby="bsc_card_3_header"> | | * [[OPS - Theme Compatibility|Compatibility]] |
| | | * [[OPS - Theme Common Troubleshooting Issues|Troubleshooting]] |
| <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> |
| </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">
| |
| '''Description'''
| |
| <p>The article details page will display the complete timeline of the article's journey, including the date it was received, the date it was accepted, and the date it was published. This provides users with a clear understanding of the key milestones in the article's progression, from submission to final publication, ensuring transparency and offering insight into the article's lifecycle.</p>
| |
| <hr>
| |
| '''Option Field Type:''' Checkbox
| |
| [[File:ArticleGenesisOptions.png|none|thumb|500x500px|Click image to enlarge]] | |
|
| |
| <hr>
| |
| '''Preview'''
| |
| [[File:ArticleGenesis.png|none|thumb|500x500px|Click image to enlarge]] | |
|
| |
| </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">
| |
| '''Description'''
| |
| <p>The article detail and article summary pages will feature information on the number of galley downloads and abstract views, offering valuable insights into the article's engagement. This data will be displayed prominently, allowing users to track the level of interest in the article.</p>
| |
| <hr>
| |
| '''Option Field Type:''' Radio Select
| |
| <div class="row">
| |
| <div class="col-md-4">
| |
| [[File:StatisticsOptions.png|none|thumb|Click image to enlarge]] | |
| </div> | |
| <div class="col-md-8"> | |
| <p>There are three settings available for how this information is presented:</p>
| |
| # '''None''': No data regarding galley downloads or abstract views will be shown on the page.
| |
| # '''Basic''': Only a simple count of galley downloads and abstract views will be displayed.
| |
| # '''Dimensions''': A more detailed breakdown of the galley downloads and abstract views will be shown
| |
|
| |
|
| | </div> |
| </div> | | </div> |
| | <div class="container px-0 pt-4 border-top"> |
| | <div class="fonthead">[[Development Roadmap Information|Development Roadmap<span class="linkfont"> </span>]]</div> |
| </div> | | </div> |
| <hr>
| |
| '''Preview'''
| |
| # '''None: Disable any statistics'''[[File:NoStats.png|none|thumb|500x500px|Click image to enlarge]]
| |
| # '''Basic statistics: Displays the number of downloads and views'''[[File:BasicStats.png|none|thumb|500x500px|Click image to enlarge]]
| |
| # '''Dimensions Statistics AI: Display dimensions citations and statistics'''[[File:DimensionsStats.png|none|thumb|500x500px|Click image to enlarge]]
| |
|
| |
| </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>
| |
| </div>
| |
| </div>
| |
|
| |
| __INDEX__
| |
| __NEWSECTIONLINK__
| |
| [[Category:Tutorials]]
| |
| [[Category:OJS - Theme]]
| |
