The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Forum Padding Adjustment, Pizza's Boi Tutorial Help

View previous topic View next topic Go down

Solved Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 26th 2014, 5:41 pm

I found a tutorial for what i was exactly wanted to make to my fourm but when i tried the code, it didnt wor at all ^_^
it's the tutorial of Pizza Boi so i'd better wait for his responseblackeye
the tutorial which im talking for, is this one:http://www.forum-help.com/t167-punbb-forum-padding-adjustment
and i want to make my categories like that: (boxed replies and topics)

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by SLGray on April 26th 2014, 11:25 pm

Please do not link to tutorials that guests can not see.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Pizza Boi on April 27th 2014, 12:16 am

Hi Very Happy

I'll fix that tutorial later, sorry. Though, you'll see the updated one in YGODA.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 27th 2014, 8:00 am

okey, i will wait for the new update

edit: ive done what i wanted to do, now only 1 more thing left to do.
how can i make them to be same size?
now its like this:

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Pizza Boi on April 27th 2014, 6:40 pm

Hi Very Happy

By increasing the padding-left and padding-right Wink (#px of course I love you ) .

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 27th 2014, 6:55 pm

well, my boxes were unevenly, so i had to add padding only to 1 of them and yeah, it worked Very Happy
how to add box to "last topic" etc area? its not the same with "topics/replies", i tried it Razz

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Pizza Boi on April 27th 2014, 7:00 pm

Hi Very Happy

Try using td.tcr

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 27th 2014, 7:08 pm

didnt affect it..
btw, i removed the avatars from there to try this out but still: ....bounce

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Pizza Boi on April 27th 2014, 7:14 pm

Hi Very Happy

Hmm... odd, try index_box and change this:

Code:
<th class="tcr">{L_LASTPOST}</th>

To:

Code:
<th class="tcr" id="lastpost">{L_LASTPOST}</th>

And then add the style using #lastpost.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 27th 2014, 9:13 pm

i actually got this style in my templates :S


J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Pizza Boi on April 27th 2014, 9:16 pm

Hi Very Happy

Try adding a class="" though I suggest actually putting it in the td class="tcr" as td class="tcr" id="tcr"

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 27th 2014, 9:19 pm

can u make it here? i didnt understand clearly Very Happy
Code:
<td class="tcr">
                    <span>
                    <!-- BEGIN switch_topic_title -->
                      <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                    {catrow.forumrow.USER_LAST_POST}
                    </span>
                  </td>

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Pizza Boi on April 27th 2014, 9:23 pm

Hi Very Happy

Your code to:

Code:
<td class="tcr" id="tcr">
                    <span>
                    <!-- BEGIN switch_topic_title -->
                      <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                    {catrow.forumrow.USER_LAST_POST}
                    </span>
                  </td>

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 27th 2014, 9:30 pm

it didnt work.. :/
i put at css #lastpost{
my settings
}
but no box appeared ^_^

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Pizza Boi on April 27th 2014, 9:57 pm

Hi Very Happy

Hmm... try:

Code:
<td class="tcr" id="awesome">
                    <span>
                    <!-- BEGIN switch_topic_title -->
                      <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                    {catrow.forumrow.USER_LAST_POST}
                    </span>
                  </td>

I tried this type of CSS and it worked for me:

Code:
#awesome {
background-color: #FFC0CB;
max-width: 50px;
border: 1px solid #000;
border-radius: 50px;
}

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 28th 2014, 4:21 pm

something is wrong.. :/
border-radius 50px and no rounded corners?


J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Ange Tuteur on April 28th 2014, 4:35 pm

You're just wanting to add a box around the last post, correct ?

If so, use the following CSS :
Code:
.tcr span {
  display:block;
  background:#FFF;
  border:1px solid #A3A3A3;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
  padding:3px;
  margin-right:6px;
}

.tcr span span {
  display:inline;
  background:none;
  border:none;
  padding:0;
  margin-right:0;
}

The first rule is to style the lastpost, the second rule is to remove the lastpost style from the span elements inside the lastpost.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 28th 2014, 6:15 pm

thanks again!

*Solved*

edit: i wanted to put avatar of last poster there but it appears like that:



i just want them to be displayed more down and the names go right..
i tried to add
padding-top: 15px;
padding-left: 3px;
but the result was that :S (good position but see the box)


what should i do? (codes from ur tutorial)


Edit2: is this any way to remove the boxes from here? ^^ (in a category section)


J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Ange Tuteur on April 28th 2014, 8:18 pm

Replace the last CSS rule by :
Code:
.tcr span span, .tcl.tdtopics ~ .tcr span {
  display:inline;
  background:none;
  border:none;
  padding:0;
  margin-right:0;
}

I don't see the avatars, but you should use margin. I'll give you a quick example of the difference between padding and margin.

Padding : is the spacing inside of an element
Margin : is the spacing outside of an element

With no padding the text touches the corners of the element.
With no margin both the elements touch each other.
padding:0;
margin:0;
padding:0;
margin:0;


With padding the text no longer touches the corners of the element.
padding:5px;
margin:0;
padding:5px;
margin:0;


With margin the elements no longer touch each other.
padding:5px;
margin:2px;
padding:5px;
margin:2px;


So in short :

Use padding to add spacing inside an element, and use margin to add spacing outside of an element.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 28th 2014, 8:28 pm

wow, thanks a lot for ur time, Seth Very Happy
U cant see avatars because (i dont know why.. -.-) they are visible only for logged in people. (didnt change anything, just followed ur tutorial..)
i replaced padding with margin and all working perfect right now and thank u Very Happy
just something last before u lock the topic, and sorry for thediscomfort Smile
i know this maybe be not possible but lemme ask it
can the box disappear when a category has 0 topics and 0 replies? if not, just say no and lock topic as solved Very Happy


J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Ange Tuteur on April 28th 2014, 8:33 pm

See if this hides blanc last posts :

* tick in the homepage
Code:
$(function() {
  $('.tcr span:has(a[href=""])').hide();
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 28th 2014, 8:34 pm

u r amazing!!

*Solved*

edit: visitors still see the blank boxesblackeyeblackeye

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Ange Tuteur on April 28th 2014, 8:49 pm

I'm getting an error on your forum, I believe that may be what is causing it not to work.

Type error : logout is null

This means that the logout object is null, most likely something with getElementById('logout'). So when this throws an error it will stop running the other scripts on the page. It is coming from one of your javascripts set "In all the pages" I would look for something that uses the logout ID

Type error : option is undefined

The error is coming from rainbow.js however, I do not think this is the one causing the scripts to stop running.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 28th 2014, 8:52 pm

lol!lol!lol!
it was a script to make usernames rainbow color xD
i removed it, check now Smile

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Ange Tuteur on April 28th 2014, 9:04 pm

That was not the one causing the scripts to stop.

I believe it is this script :
Code:
$(function () {
  var logout = document.getElementById('logout');
  logout.innerHTML = 'Αποσύνδεση'
});

I had forgotten to include a fallback for if users were offline. Change the script to :
Code:
$(function () {
  var logout = document.getElementById('logout');
  if (logout === null) return;
  logout.innerHTML = 'Αποσύνδεση'
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 28th 2014, 9:15 pm

okey i changed it
did it affect it?

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Ange Tuteur on April 28th 2014, 9:22 pm

It is working fine now. Very good

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by J0k3R^ on April 28th 2014, 9:24 pm

this is solved,
thank u so much for ur help!! Very Happy

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Forum Padding Adjustment, Pizza's Boi Tutorial Help

Post by Ange Tuteur on April 28th 2014, 9:25 pm

You're welcome :rose:

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum