News: When asking for support, it helps us and you, if you read the Posting Guidelines

Login  |  Register
HTML5 Icon HTML5 Icon
TP on Social Media
Welcome, Guest. Please login or register.
Did you miss your activation email?

September 22, 2019, 04:16:52 AM

Login with username, password and session length

Recent

Members
Stats
  • Total Posts: 188941
  • Total Topics: 20756
  • Online Today: 96
  • Online Ever: 629
  • (November 08, 2018, 01:36:54 PM)
Users Online
Users: 1
Guests: 66
Total: 67

Author Topic: Welcome block for bigguy  (Read 1734 times)

0 Members and 1 Guest are viewing this topic.

Offline @rjen

  • Support Team
  • *
  • Posts: 1829
    • FJR-club Nederland
Re: Welcome block for bigguy
« Reply #20 on: December 29, 2018, 03:46:05 PM »
The important! you removed was to overrule fixed height of the header. Only needed if you have a long title text.
Running TP1.6.4 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline bigguy

  • Beta Tester
  • *
  • Posts: 256
  • Be Nice...
    • What's Ur Beef
Re: Welcome block for bigguy
« Reply #21 on: December 29, 2018, 07:10:56 PM »
Well, it looks good all around for sure. Thanks again all for the work on this.  :)

Offline VladTepes

  • Jr. Member
  • **
  • Posts: 78
Re: Welcome block for bigguy
« Reply #22 on: April 07, 2019, 09:37:49 PM »
OK stupid question - where does this code go please? Or does it replace something somewhere?

(This is all I have been able to accomplish without code edits, using TP blocks so far https://www.droneflightforum.com/index.php )



This uses part of the theme style and is responsive...

Code: [Select]
<style>
#row {
float: left;
    width: 100%;
border-spacing: 10px;
}
.boxtitlebg {
    display: flex;
height: auto!important;
    align-items: center;
    justify-content: center;
}
.genblock {
display:table-cell;
width:32%;
height:100%;
border-radius: 8px;
padding-bottom:10px;
margin-bottom:10px;
}
#block1 {
background-color:#88f793;
}
#block2 {
background-color:#f7ec79;
}
#block3 {
background-color:#f9bd6d;
}

@media all and (max-width: 900px) {
.genblock {
display:block;
width:100%;
}
}
</style>

<body id="tpbody" class="tpcontnainer">
<center>
<div id="row">
    <div id="block1" class="genblock">
<div class="cat_bar">
<h2 class="catbg boxtitlebg">Block1<img src="/welcome.png" alt="welcome" /></h2>
</div>
    <div id="block1">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div id="block2" class="genblock">
<div class="cat_bar">
       <h2 class="catbg boxtitlebg">Block2<img src="/users.png" alt="members" align="left"/></h2>
</div>
    <div id="block2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.
</div>
</div>
<div id="block3" class="genblock">
<div class="cat_bar">
<h2 class="catbg boxtitlebg">Block3<img src="/discussion.png" alt="discuss" align="left"/></h2>
</div>
    <div id="block3">
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?. </div>
</div>
</div>
</center>

Offline @rjen

  • Support Team
  • *
  • Posts: 1829
    • FJR-club Nederland
Re: Welcome block for bigguy
« Reply #23 on: April 07, 2019, 11:02:49 PM »
This code was created for a upper block or top block and in fact simulates three separate blocks in one.

I is created for a specific case and setting though: your settings may be different.

From what I see at your site you have removed parts from the code (the css for one), that can break the blockcode, and that's what has happened from the looks of it..

Take the FULL code and adapt it to you liking. You cannot strip the full css part...

Running TP1.6.4 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline VladTepes

  • Jr. Member
  • **
  • Posts: 78
Re: Welcome block for bigguy
« Reply #24 on: April 08, 2019, 06:15:04 PM »
From what I see at your site you have removed parts from the code (the css for one), that can break the blockcode, and that's what has happened from the looks of it..


I didn't touch the code everything that appears there is via TP settings.

Offline @rjen

  • Support Team
  • *
  • Posts: 1829
    • FJR-club Nederland
Re: Welcome block for bigguy
« Reply #25 on: April 08, 2019, 10:42:28 PM »
No clue what you did then, you will have to be more specific . The code is meant to go into an html block.

What TP settings did you make?
« Last Edit: April 14, 2019, 08:42:51 AM by @rjen »
Running TP1.6.4 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline jernatety

  • Sr. Member
  • ****
  • Posts: 274
Re: Welcome block for bigguy
« Reply #26 on: April 09, 2019, 10:34:06 AM »
Did that guy respond from 4 months into the future?


Offline @rjen

  • Support Team
  • *
  • Posts: 1829
    • FJR-club Nederland
Re: Welcome block for bigguy
« Reply #27 on: April 09, 2019, 10:39:36 AM »
Strange!

The message is showing the correct date now...
Running TP1.6.4 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info

Offline jernatety

  • Sr. Member
  • ****
  • Posts: 274
Re: Welcome block for bigguy
« Reply #28 on: April 09, 2019, 10:51:50 AM »
No clue what you did then, you will have to be more specific . The code is meant to go into an html block.

What TP settings did you make?

Code: [Select]
<style>
#row {
float: left;
width: 100%;
border-spacing: 10px;
}
.boxtitlebg {
display: flex;
height: auto!important;
align-items: center;
justify-content: center;
}
.genblock {
display:table-cell;
width:32%;
height:100%;
border-radius: 8px;
padding-bottom:10px;
margin-bottom:10px;
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
}
#block1st {
background-color:#88f793;
}
#block2nd {
background-color:#f7ec79;
}
#block3rd {
background-color:#f9bd6d;
}

@media all and (max-width: 900px) {
.genblock {
display:block;
width:100%;
}
}
</style>

<body id="tpbody" class="tpcontnainer">
<center>
<div id="row">
    <div id="block1st" class="genblock">
<div class="cat_bar">
<h2 class="catbg boxtitlebg">Block1  <img src="https://www.tinyportal.net/Themes/default/images/tinyportal/menu_tp.png" alt="welcome" /></h2>
</div>
<div id="block1" class="tp_pad">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div id="block2nd" class="genblock">
<div class="cat_bar">
   <h2 class="catbg boxtitlebg">Block2  <img src="https://www.tinyportal.net/Themes/default/images/tinyportal/online.png" alt="members" align="left"/></h2>
</div>
<div id="block2" class="tp_pad">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.
</div>
</div>
<div id="block3rd" class="genblock">
<div class="cat_bar">
<h2 class="catbg boxtitlebg">Block3  <img src="https://www.tinyportal.net/Themes/default/images/tinyportal/menu_tpforum.png" alt="discuss" align="left"/></h2>
</div>
<div id="block3" class="tp_pad">
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?.
</div>
</div>
</div>
</center>

I used this to create ad space for anybody interested in advertising.

Offline @rjen

  • Support Team
  • *
  • Posts: 1829
    • FJR-club Nederland
Re: Welcome block for bigguy
« Reply #29 on: April 14, 2019, 08:43:37 AM »
Below code is an update using flexboxes ... a bit of fiddling on the sunday afternoon...

Code: [Select]
<style>
#flexbox {
display: inline-flex;
flex-flow: row wrap;
align-items: stretch;
justify-content: space-between;
}
.genblock {
width: calc(1/3*100% - (1 - 1/3)*6px);
border-radius: 8px;
padding-bottom:10px;
margin-bottom: 6px;
}
#block1st {
background-color:#88f793;
}
#block2nd {
background-color:#f7ec79;
}
#block3rd {
background-color:#f9bd6d;
}
@media all and (max-width: 900px) {
.genblock {
flex: 1 0 100%;
}
}
</style>

<body id="tpbody" class="tpcontnainer">
<div id="flexbox">
    <div id="block1st" class="genblock">
<div class="cat_bar">
<h3 class="catbg"><img src="https://www.tinyportal.net/Themes/default/images/tinyportal/menu_tp.png" alt="welcome">  Block1</h2>
</div>
<div id="block1" class="tp_pad"><center>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</center>
</div>
</div>
<div id="block2nd" class="genblock">
<div class="cat_bar">
   <h3 class="catbg"><img src="https://www.tinyportal.net/Themes/default/images/tinyportal/online.png" alt="members">  Block2</h2>
</div>
<div id="block2" class="tp_pad"><center>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </center>
</div>
</div>
<div id="block3rd" class="genblock">
<div class="cat_bar">
<h3 class="catbg"><img src="https://www.tinyportal.net/Themes/default/images/tinyportal/menu_tpforum.png" alt="discuss">  Block3</h2>
</div>
<div id="block3" class="tp_pad"><center>
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </center>
</div>
</div>
</div>
</center>
Running TP1.6.4 on SMF2.0 at: www.fjr-club.nl

Testing TP on SMF2.0
Testing TP on SMF2.1 RC2
Want to check what php version I am testing on? See: PHP Info