TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

March 29, 2024, 06:27:10 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,106
  • Total Topics: 21,213
  • Online today: 358
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online
  • Users: 0
  • Guests: 249
  • Total: 249

Welcome block for bigguy

Started by bigguy, December 09, 2018, 07:43:53 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

@rjen

The important! you removed was to overrule fixed height of the header. Only needed if you have a long title text.
Running Latest TP on SMF2.1 at: www.fjr-club.nl

bigguy

Well, it looks good all around for sure. Thanks again all for the work on this.  :)

VladTepes

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 )



Quote from: @rjen on December 28, 2018, 11:02:42 AM
This uses part of the theme style and is responsive...


<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>


@rjen

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 Latest TP on SMF2.1 at: www.fjr-club.nl

VladTepes

Quote from: @rjen on April 08, 2019, 06:02:49 AM
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.

@rjen

#25
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?
Running Latest TP on SMF2.1 at: www.fjr-club.nl

jernatety

Did that guy respond from 4 months into the future?


@rjen

Strange!

The message is showing the correct date now...
Running Latest TP on SMF2.1 at: www.fjr-club.nl

jernatety

Quote from: @rjen on April 09, 2019, 05:42:28 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?


<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.

@rjen

Below code is an update using flexboxes ... a bit of fiddling on the sunday afternoon...


<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 Latest TP on SMF2.1 at: www.fjr-club.nl