What's new

Welcome to Admin Junkies, Guest — join our community!

Register or log in to explore all our content and services for free on Admin Junkies.

Log in Register now

Help Documents Like Inlobos.com + responsive

M

mastersly

Addicted member
Joined
Apr 29, 2020
Messages
988
Credits
0
https://inlobos.com/misc.php?action=help[/align]

Preview​
iQOgxjS.png





[hide=15]
{$header}{$sections} add this
Code: 
<div class="customhelp-nav">
<div class="customhelp-nav_inner index_welcome_inner">
<span>Help Documents</span>
</div>
</div>

replace everything this this
Code: 
<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>

[font=Tahoma, Verdana, Arial, sans-serif][/font]replace everything with this
Code: 
<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>

[font=Tahoma, Verdana, Arial, sans-serif][size=small][size=small][font=Tahoma, Verdana, Arial, sans-serif][/font][/size][/font][/size]
Code: 
<div class="help-section-bitshelp">
<div class="help-section-bitshelp-section help-section-bitshelp-icon">
	<a href="misc.php?action=help&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&hid={$helpdoc['hid']}">{$helpdoc['name']}</a></div>
<div class="help-section-bitshelp-info-desc">{$helpdoc['description']}</div></div></div>
[font=Tahoma, Verdana, Arial, sans-serif][size=small][size=small][font=Tahoma, Verdana, Arial, sans-serif][size=small][size=small][size=small][font=Tahoma, Verdana, Arial, sans-serif]

ACP >> Templates and style >> Themes >> your theme >> global.css
add this
[/font][/size][/size][/font][/size][/size][/font][/size]
Code: 
@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
Code: 
.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://inlobos.com/images/lobosimages/questionguy.png),linear-gradient(to right,rgb(23,23,23) 10%,rgba(32,32,32,0.95) 100%),url(https://inlobos.com/images/lobosimages/socials.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;
}
https://inlobos.com/images/lobosimages/questionguy.pnghttps://inlobos.com/images/lobosimages/socials.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
NumbersACP >> Configuration >> Help Documents >> Choose one document and click
hid=10

content:"\unicode": Use the following website to find some icon`s unicode
https://fontawesome.com/
Code: 
.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"}


[/hide]
 
Advertisement Placeholder

Log in or register to unlock full forum benefits!

Log in or register to unlock full forum benefits!

Register

Register on Admin Junkies completely free.

Register now
Log in

If you have an account, please log in

Log in

Similar threads

Mamberroi Jr
Online/offline avatar indicator like Instagram
Replies
1
Views
902
Mamberroi Jr
Mamberroi Jr
M
ColorFul Theme - Postbit Author details like inlobos
Replies
5
Views
216
BrolySSJ
B
M
Guest Welcome ORK
Replies
3
Views
198
BrolySSJ
B
M
ColorFul Theme - Myalerts like inlobos
Replies
1
Views
197
BrolySSJ
B
M
1.8 HEADER - STARS WITH PARTICLESJS
Replies
5
Views
272
BrolySSJ
B
Who read this thread (Total readers: 0)
No registered users viewing this thread.

Unread Posts

New Threads

Would You Rather #9

  • Start a forum in a popular but highly competitive niche

    Votes: 9 27.3%

  • Initiate a forum within a limited-known niche with zero competition

    Votes: 24 72.7%
See comments…
Win this space by entering the Website of The Month Contest
81K
Threads
998.1K
Messages
24.1K
Members
Arnoldw
Latest member

Theme editor

Theme customizations

Dark mode

Opt for a darker theme for a sleek look.

Wider view

Experience a wider, more expansive forum layout.

Grid view

You can switch to a grid view by changing the forums listing structure.

Illustrated grid view

You can turn on/off the background images assigned for forums in the grid view.

Open/Close sidebar

Close the sidebar for a cleaner forum view.

Sticky sidebar

Enjoy a scroll-sensitive sticky sidebar for easy navigation.

Header area animation

You can turn on/off the moving particles in the header area.

Graphic Backgrounds

Granite Backgrounds