MyBB Community Forums

DEMO: https://reusers.to/misc.php?action=help

Preview

ACP >> Templates and styles >> Templates >> YOUR THEME >> Miscellaneous Templates >> misc_help
Between {$header} and {$sections} add this

<div class="customhelp-nav">
<div class="customhelp-nav_inner index_welcome_inner">
<span>Help Documents</span>
</div>
</div>

ACP >> Templates and styles >> Templates >> YOUR THEME >> Miscellaneous Templates >> misc_help_helpdoc
replace everything this this

<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->help_docs}</title>
{$headerinclude}
</head>
<body>
{$header}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder tfixed">
<tr>
<td class="thead"><strong>{$helpdoc['name']}</strong></td>
</tr>
<tr>
<td class="trow1 scaleimages">{$helpdoc['document']}</td>
</tr>
</table>
{$footer}
</body>
</html>

ACP >> Templates and styles >> Templates >> YOUR THEME >> Miscellaneous Templates >> misc_help_section
replace everything with this

<div class="helppage-section-head" id="section-4">
<div class="helppage-section-head_name">{$section['name']}</div>
<div class="helppage-section-head_title">{$section['description']}</div>
</div>


<div class="help-section-bits">
{$helpbits}


</div>

ACP >> Templates and styles >> Templates >> YOUR THEME >> Miscellaneous Templates >> misc_help_section_bit
replace everything with this

<div class="help-section-bitshelp">
<div class="help-section-bitshelp-section help-section-bitshelp-icon">
	<a href="misc.php?action=help&amp;hid={$helpdoc['hid']}"><div class="helpdocsicons_{$helpdoc['hid']}"><i class="cicleiconshelp fas fa-comments"></i></div></a></div>
<div class="help-section-bitshelp-section help-section-bitshelp-info">
<div class="help-section-bitshelp-info-name"><a href="misc.php?action=help&amp;hid={$helpdoc['hid']}">{$helpdoc['name']}</a></div>
<div class="help-section-bitshelp-info-desc">{$helpdoc['description']}</div></div></div>

ACP >> Templates and style >> Themes >> your theme >> global.css
add this

@media only screen and (max-width: 600px) {
.customhelp-nav_inner{font-size: 20px!important;}
}

@media only screen and (max-width: 969px) {
.help-section-bits{display: block!important;}
}

and this

.helpdocsicons_7 i:before{content:"\f121"}
.helpdocsicons_9 i:before{content:"\f563"}
.helpdocsicons_10 i:before{content:"\f0e3"}
.helpdocsicons_11 i:before{content:"\f0e3"}
.helpdocsicons_12 i:before{content:"\f0e3"}
.helpdocsicons_13 i:before{content:"\f641"}
.helpdocsicons_15 i:before{content:"\f362"}
.helpdocsicons_16 i:before{content:"\f51e"}
.helpdocsicons_17 i:before{content:"\f091"}
.helpdocsicons_18 i:before{content:"\f0c0"}
.helpdocsicons_19 i:before{content:"\f505"}
.helpdocsicons_20 i:before{content:"\f506"}

.help-section-bitshelp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.help-section-bitshelp {
    min-width: 29%;
    border-radius: 1rem;
    margin-left: 3%;
    margin-right: 1%;
    margin-bottom: 5px;
    margin-top: 10px;
    min-height: 15rem;
    text-align: center;
}

.help-section-bits {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1rem;
    margin-bottom: -1rem;
}


.customhelp-nav {
    display: flex;
    align-items: center;
    width: 100%;
    height: 10rem;
    background-size: contain,100%,100%;
    background-repeat: no-repeat,repeat,repeat;
    background-image: url(https://reusers.to/images/MyRes-MultipleCol/questionguy.png),linear-gradient(to right,rgb(23,23,23) 10%,rgba(32,32,32,0.95) 100%),url(https://reusers.to/images/MyRes-MultipleCol/forums-header/Background.png);
    background-position: -1.25rem 0px,0 0,0 0;
    background-position: 0 0,0 0,0 0;
    margin: var(--default-margin) 0;
    color: white;
    position: relative;
}

.customhelp-nav_inner {
    margin-left: 11rem;
    font-size: 2.75rem;
    font-weight: 600;
    text-shadow: 0 0 1px rgba(0,0,0,0.25);
}

.helppage-section-head {
    background: #242424;
    text-align: center;
    line-height: 20px;
    padding: 13px;
    border-radius: 15px;
}

.helppage-section-head_name {
    font-weight: 600;
    font-size: calc(1em + 1px);
}


.cicleiconshelp{
 border-radius: 50%;
 border: 1px solid #525151;
 padding:40px;
 margin-bottom: 10px;
font-size: 30px;
}


.help-section-bitshelp-icon:before {
    content: '';
    background-color: #525151;
    background-size: 5px 1px;
    border: none;
    width: 100%;
    height: 1px;
    position: relative;
}

.help-section-bitshelp-icon:after {
    content: '';
    background-color: #525151;
    background-size: 5px 1px;
    border: none;
    width: 100%;
    height: 1px;
    position: relative;
}

NOTE: In that css there are 2 images
Question: https://reusers.to/images/MyRes-Multiple...ionguy.png
Background: https://reusers.to/images/MyRes-Multiple...ground.png
Download those images and upload in your root folder
Or you can add other images

HOW TO CHANGE ICONS?
In that css you will see this code
Numbers: Are the documents numbers.
to find the document number go
ACP >> Configuration >> Help Documents >> Choose one document and click
At the link you will see this hid=10

content:"\unicode": Use the following website to find some icon`s unicode
https://fontawesome.com/

.helpdocsicons_7 i:before{content:"\f121"}
.helpdocsicons_9 i:before{content:"\f563"}
.helpdocsicons_10 i:before{content:"\f0e3"}
.helpdocsicons_11 i:before{content:"\f0e3"}
.helpdocsicons_12 i:before{content:"\f0e3"}
.helpdocsicons_13 i:before{content:"\f641"}
.helpdocsicons_15 i:before{content:"\f362"}
.helpdocsicons_16 i:before{content:"\f51e"}
.helpdocsicons_17 i:before{content:"\f091"}
.helpdocsicons_18 i:before{content:"\f0c0"}
.helpdocsicons_19 i:before{content:"\f505"}
.helpdocsicons_20 i:before{content:"\f506"}

Good one. Thanks masteely for sharing.

Hello. I tried your suggestion you added on my thread to this subject

But everything seems to get off. The lines and everything is just not line up as it should do

Do you think its because the theme i use already has some kind of custom css for the help docs? As far as i can see it uses the same styling as the rest of my site

Send me a picture and your forum link please

(2021-03-04, 12:29 PM)Mastersly Wrote: [ -> ]Send me a picture and your forum link please

https://spinx4k.dk/misc.php?action=help

Don't know if its worth note that my theme is based on bootstrap / its responsive

and just i general things don't seem to be working correctly: https://spinx4k.dk/misc.php?action=help&hid=1

Note that while its not working i have removed your codes and rebooted to original so users can see

[attachment=43895]

[attachment=43894]

Wow, that's a really nice design. Good work.

(2021-03-05, 03:02 AM)Lasse Wrote: [ -> ]
(2021-03-04, 12:29 PM)Mastersly Wrote: [ -> ]Send me a picture and your forum link please
https://spinx4k.dk/misc.php?action=help

Don't know if its worth note that my theme is based on bootstrap / its responsive

and just i general things don't seem to be working correctly: https://spinx4k.dk/misc.php?action=help&hid=1

Note that while its not working i have removed your codes and rebooted to original so users can see

Add me on discord Lobos#8684
Can you give my an admin account or I can help you through anydesk

(2021-03-06, 11:22 AM)Mastersly Wrote: [ -> ]
(2021-03-05, 03:02 AM)Lasse Wrote: [ -> ]
(2021-03-04, 12:29 PM)Mastersly Wrote: [ -> ]Send me a picture and your forum link please
https://spinx4k.dk/misc.php?action=help

Don't know if its worth note that my theme is based on bootstrap / its responsive

and just i general things don't seem to be working correctly: https://spinx4k.dk/misc.php?action=help&hid=1

Note that while its not working i have removed your codes and rebooted to original so users can see

Add me on discord Lobos#8684
Can you give my an admin account or I can help you through anydesk

Just added you on Discord

Mastersly

Dr_The_One

Lasse

Mastersly

Lasse

Ben

Mastersly

Lasse