|
|
(7 intermediate revisions by the same user not shown) |
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 class="row"> |
| </div>
| | <div class="col-md-4 py-3"> |
| <div class="card">
| | <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]] |
| <div class="card-body">
| | * [[How to Upgrading The OJS - Theme|Upgrading Theme]] |
| '''Description'''
| | * [[OJS - Theme Features|Theme Features]] |
| <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>
| | * [[How to Customize The OJS - Theme|Customize Theme]] |
| <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"> | |
| # '''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 class="col-md-4 py-3"> |
| </div>
| | <div class="card text-dark bg-white"> |
| </div>
| | <div class="card-header">[[:Category:OMP_-_Theme|OMP - Theme]]</div> |
| </div>
| | <div class="card-body bg-white"> |
| <div class="card">
| | * [[How to Installing The OMP - Theme|Installing 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 Upgrading The OMP - Theme|Upgrading Theme]] |
| </div>
| | * [[OMP - 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">
| | * [[How to Customize The OMP - Theme|Customize Theme]] |
| <div class="card-body">
| | * [[OMP - Theme Compatibility|Compatibility]] |
| <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>
| | * [[OMP - Theme Common Troubleshooting Issues|Troubleshooting]] |
| </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">
| |
| <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]] | |
|
| |
| </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]]
| |
| # '''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 class="col-md-4 py-3"> |
| | <div class="card text-dark bg-white"> |
| | <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]] |
| | * [[OPS - Theme Features|Theme Features]] |
| | * [[How to Customize The OPS - Theme|Customize Theme]] |
| | * [[OPS - Theme Compatibility|Compatibility]] |
| | * [[OPS - Theme Common Troubleshooting Issues|Troubleshooting]] |
| </div> | | </div> |
| | </div> |
| | </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> |
|
| |
| '''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:'''
| |
|
| |
| __INDEX__
| |
| __NEWSECTIONLINK__
| |
| [[Category:Tutorials]]
| |
| [[Category:OJS - Theme]]
| |