Support for SMF Tricks Themes & Mods

0 Members and 1 Guest are viewing this topic.

*
GamePersia
Sniffer
Some Customization to WRAP Theme.
July 15, 2014, 05:48:47 AM
Some Customization to WRAP Theme.
Hi,..i need some modification to my awesome wrap theme,.So kindly tell me the procedure so that i can modify it.

1. I want to enlarge some texts as shown in image : http://i.imgur.com/VP6Lv2h.png
2. http://i.imgur.com/F5fuOC3.png
3. http://i.imgur.com/zuygdhX.png
4. http://i.imgur.com/Ta6Lu3g.png

kindly help by telling these modification solution.  :)






*
Diego Andrés
#1
Webmaster
Re: Some Customization to WRAP Theme.
July 15, 2014, 10:47:15 AM
1. Search for .catbg and .children in the index.css
2. I'm not sure, as the theme is not mine, but I'll give it a check later today :P
3. Try adding that in .poster ---> border-right: 1px dotted #ccc;
4. Search for #basicinfo and reduce the width, but don't forget to adding more width to #detailedinfo

I hope it helps. I mean, because my answers were short/quick :P
*
GamePersia
#2
Sniffer
Re: Some Customization to WRAP Theme.
July 15, 2014, 11:48:49 PM
1. Search for .catbg and .children in the index.css
2. I'm not sure, as the theme is not mine, but I'll give it a check later today :P
3. Try adding that in .poster ---> border-right: 1px dotted #ccc;
4. Search for #basicinfo and reduce the width, but don't forget to adding more width to #detailedinfo

I hope it helps. I mean, because my answers were short/quick :P
:o  :o
Your Answers Were really short  ;D
1. i searched for .catbg and found 20+ .catbg  :P , but i think it's this one :
Quote
}
.catbg select
{
   height: 1.5em;
   font-size: 0.85em;
}
Secondly i found .children one time only :
Quote
}
.table_list tbody.content td.children
{
   color: #555;
}
2. Ok Tell Me When you examine properly ( please do not forget ).
3. Ok,..where is .poster located ?,..is it in index.css file ??,..moreover where exactly to add this "border-right: 1px dotted #ccc;" code ??
4. #basicinfo,..where is it ?, is it in rtl.css file,..if yes then it have more than 5 #basicinfo,..where to reduce size and where to increase ?  :-X

All things fly in air  ::) ::)
Friend This Time Guide Me Properly,..I Am Not An Expert As You !!  :)
*
Diego Andrés
#3
Webmaster
Re: Some Customization to WRAP Theme.
July 16, 2014, 05:51:00 PM
Ok here we go again  :P

1. Index.css
Code: [Select]
h3.catbg, h3.catbg2, h3.titlebg, h4.titlebg, h4.catbgYou'll see there the font size, try something like 1.2em

And for children, as the theme is not mine, there was a mistake.
Search for this
Code: [Select]
p.moderatorsTry something like 0.9em

2.1 The offline color is found in Display.template.php
Code: [Select]
<li class="status"><span class="offline" style="text-transform: uppercase; font-size: 8px; text-shadow: 0 1px 0 #fff; color: #AEAEAF;"> ' . $message['member']['online']['text'] . '</span></li>
2.2 You can change that color in index.css
Code: [Select]
.send_mp_new {
    -moz-transition: background 0.5s ease 0s;
    background-color: #D3D6D9;
    border-radius: 2px 2px 2px 2px;
    color: #eee;
    float: left;
    font-size: 8px;
    font-weight: bold;
    margin-top: 2px;
    padding: 0 5px;
    text-shadow: 0 1px 0 #9A9797;
    text-transform: uppercase;
}

2.3 To remove the posts count, Display.template.php find
Code: [Select]
// Show how many posts they have made.
if (!isset($context['disabled_fields']['posts']))
echo '
<li class="postcount"><img style="margin: -5px 0 0 1px" src="', $settings['images_url'], '/id/postscount.png" alt="" /><span style="text-align:right; margin: 6px 6px 0 0; float: right;">', $message['member']['posts'], '</span></li>';

And replace with
Code: [Select]
// Show how many posts they have made.
/*if (!isset($context['disabled_fields']['posts']))
echo '
<li class="postcount"><img style="margin: -5px 0 0 1px" src="', $settings['images_url'], '/id/postscount.png" alt="" /><span style="text-align:right; margin: 6px 6px 0 0; float: right;">', $message['member']['posts'], '</span></li>';*/

3. index.css find
Code: [Select]
.poster
{
float: left;
width: 15em;
}

Try to replace it with something like this
Code: [Select]
.poster
{
float: left;
width: 15em;
border-right: 1px dotted #ccc;
}

4. index.css find
Code: [Select]
#basicinfo
{
width: 20%;
float: left;
}

e.g If you change the width to 15%, then you'll have to edit #detailedinfo:
Code: [Select]
#detailedinfo
{
width: 79.5%;
float: right;
}
To this
Code: [Select]
#detailedinfo
{
width: 84.5%;
float: right;
}
*
GamePersia
#4
Sniffer
Re: Some Customization to WRAP Theme.
July 16, 2014, 08:55:27 PM
Oh,..this time you rocked man !!
i understood all points,..but point 3 , dottet line,..it's not wotking well.
i put this below code
.poster
{
   float: left;
   width: 15em;
   border-right: 4px dotted #ccc;
}
by changing 1px to 4px,..the line became dotted but it's not coming till last,..the line is just 20% out of 100% page.

Thanks man,..but also tell me that theme header solution. i do not want to reinstall theme :(
*
Diego Andrés
#5
Webmaster
Re: Some Customization to WRAP Theme.
July 16, 2014, 10:05:31 PM
I don't understand the header part, please post a picture.
The point 3, is a very small issue, but I'll have to post a small tip in the tutorial board, because it requires more edits  :P
*
GamePersia
#6
Sniffer
Re: Some Customization to WRAP Theme.
July 16, 2014, 10:18:57 PM
I don't understand the header part, please post a picture.
The point 3, is a very small issue, but I'll have to post a small tip in the tutorial board, because it requires more edits  :P
For header problem see below link.
kindly thell the edits you done in new theme. so that i do not have to reinstall everything.
http://smftricks.com/index.php?topic=471.msg1703#msg1703

for point 3,..ok take your proper time. And all other edit's you told are awesome.
*
Diego Andrés
#7
Webmaster
Re: Some Customization to WRAP Theme.
July 16, 2014, 10:51:16 PM
But that was updated since March, in the Demo Site is the updated version, your theme is not working like that?
*
GamePersia
#8
Sniffer
Re: Some Customization to WRAP Theme.
July 16, 2014, 11:04:21 PM
But that was updated since March, in the Demo Site is the updated version, your theme is not working like that?
No friend i told you that i am using that theme from very first time when it came.
kindly tell me the codes you have edited in this new version.  :)
*
Diego Andrés
#9
Webmaster
Re: Some Customization to WRAP Theme.
July 17, 2014, 11:39:43 AM
index.template.php find
Code: [Select]
// Show the menu here, according to the menu sub template.
template_menu();

Replace with
Code: [Select]
// Show the menu here, according to the menu sub template.
template_menu();
template_menu2();

Find
Code: [Select]
// Show the menu up top. Something like [home] [help] [profile] [logout]...Add before
Code: [Select]
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu2()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div class="menu_responsive">
<a href="#" id="pull"></a>
<ul class="reset" ', !empty($settings['forum_width']) ? 'style="width: '. $settings['forum_width']. '; margin: 0 auto;"' : '', '>';

$prevent_actions = array($settings['sh_remove_items']);

foreach ($context['menu_buttons'] as $act => $button)
{
if (in_array($act, $prevent_actions))
continue;

echo '
<li id="responsive_button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', '" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
', $button['title'], '
</a>
</li>';
}

echo '
</ul>
</div>';
}

Then open scripts/theme.js and add at the end:
Code: [Select]
$(function() { 
var pull        = $('#pull'); 
menu        = $('.menu_responsive ul'); 
menuHeight  = menu.height(); 
 
$(pull).on('click', function(e) { 
e.preventDefault(); 
menu.slideToggle(); 
});
$(window).resize(function(){
        var w = $(window).width();
        if(w > 1024 && menu.is(':hidden')) {
        }
    });
});

index.css find:
Code: [Select]
#menu
{
    display: block;
background: transparent url(../images/theme/menu.png) top left;
margin: 0;
float: right;
    overflow: hidden;
width: auto;
height: 50px;
line-height: 50px;
}
Add after
Code: [Select]
@media screen and (min-width: 1024px)
{

Find
Code: [Select]
#menu li li ul{
    margin: 0;
padding: 0;
    visibility: hidden !important;
list-style: none;
position: absolute;
top: 30px;
left: 20px;
background: #FFF;
border: 1px solid #CCC;
}
#menu li li:hover ul {
    visibility: visible !important;
}
Add after
Code: [Select]
.menu_responsive a#pull {
display: none;
}
.menu_responsive
{
display: none;
}
}
@media screen and (max-width: 1024px)
{
#menu ul.menu
{
display: none;
}

.menu_responsive {
border-bottom: 0;
display: block;
padding: 0 20px;
}
.menu_responsive ul {
display: none;
height: auto;
position: absolute;
margin: 60px auto 0;
z-index: 1000000;
top: 88px;
left: 0;
right: 0;
}
.menu_responsive li {
display: block;
float: none;
border-bottom: 1px solid #242629;
border-top: 1px solid #3B3E44;
background: #2F3338;
text-align: left;
height: 35px;
line-height: 35px;
width: 100%;
}
.menu_responsive li a {
color: #ddd;
text-decoration: none;
width: 100%;
padding: 10px 360px 10px 20px;
height: 35px;
}
.menu_responsive a#pull {
display: block;
width: 100%;
position: relative;
color: #AAAAAA;
font-family: Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 60px;
text-decoration: none;
}
.menu_responsive a:hover
{
text-decoration: none;
}
.menu_responsive a#pull:after {
content:"";
background: url(../images/theme/nav-icon.png) no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: -10px;
top: 20px;
}
}

Then upload the attached image to Themes/Wrap/images/theme/
*
GamePersia
#10
Sniffer
Re: Some Customization to WRAP Theme.
July 17, 2014, 08:50:55 PM
I firstly started editing the codes,..
and open index.template.php and found that the codes i have to modify,..is already modified.

But i want to tell you that when someone opens the site with low resolution moniter,...then header tabs got broken and shows in very ugly way.

I to overcome this problem has reduced the header menu tabs,..and then the problem is solved.

I think bud you should find another fix. As this fix is also not working :(
*
Diego Andrés
#11
Webmaster
Re: Some Customization to WRAP Theme.
July 17, 2014, 09:03:53 PM
Then change in the index.css in the @media parts that are near to the menu styles, change 1024px to something like 1150px.

I think bud you should find another fix. As this fix is also not working :(

Sorry but I didn't make the theme and the fix works properly, but doesn't cover the circumstances were you are saturating the menu with a lot of sections.
*
GamePersia
#12
Sniffer
Re: Some Customization to WRAP Theme.
July 17, 2014, 09:46:32 PM
Then change in the index.css in the @media parts that are near to the menu styles, change 1024px to something like 1150px.

Sorry but I didn't make the theme and the fix works properly, but doesn't cover the circumstances were you are saturating the menu with a lot of sections.
Oh then this fix will not work with the menu which have lot of sections.
Thanks friend.,..i got it.  :D