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

Recent

Welcome to TinyPortal. Please login or sign up.

March 28, 2024, 08:07:03 AM

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

bigguys block slightly modified?.

Started by lurkalot, December 30, 2018, 01:00:42 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

lurkalot

With reference to bigguys block code to which @rjen kindly gave a makeover. Code below.

I was wondering if there was a way to add some padding to the text inside each text block, just to keep the text away from the edges, and also align text to the left of each block while keeping everything else centered. If possible could someone show me how to do this please.


<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

Sure, I can do that but not atm. I am making ' oliebollen'  atm...
Running Latest TP on SMF2.1 at: www.fjr-club.nl

lurkalot

Quote from: @rjen on December 30, 2018, 01:02:49 PM
Sure, I can do that but not atm. I am making ' oliebollen'  atm...

:hmm: lurk quickly googles "oliebollen".  You know I just love Doughnuts, now I'm freekin starving.  :D

Thank you, no rush on the code.  Enjoy your doughnuts.

wildenborch

Quote from: lurkalot on December 30, 2018, 01:07:14 PM
Quote from: @rjen on December 30, 2018, 01:02:49 PM
Sure, I can do that but not atm. I am making ' oliebollen'  atm...

:hmm: lurk quickly googles "oliebollen".  You know I just love Doughnuts, now I'm freekin starving.  :D

Thank you, no rush on the code.  Enjoy your doughnuts.

I just finished baking my 51 oliebollen. And they taste very good!
This is a typical dutch tradition during "old and new"

lurkalot

Right that's it, I'm going to go get a packet of crisps.  :tickedoff:

@rjen

#5
Ok, below code justifies the text in the blocks...

<style>
#row {
float: left;
    width: 100%;
border-spacing: 10px;
}
.boxtitlebg {
    display: flex;
    align-items: center;
    justify-content: center;
}
.genblock {
display:table-cell;
width:32%;
height:100%;
border-radius: 8px;
padding-bottom:10px;
margin-bottom:10px;
}
.padblock {
padding:1em;
text-align: justify;
}

#block1 {
background-color:#88f793;
}
#block2 {
background-color:#f7ec79;
}
#block3 {
background-color:#f9bd6d;
}

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

<div 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" class="padblock">
"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" class="padblock">
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" class="padblock">
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>
</div>


And the result attached.
If you want the text non-justified, change 'text-align: justify;' to 'text-align: left;'.

Personally I would use three separate TP blocks, but this is what Bigguy started with, so it is up to the owner to decide what to do with it...
Running Latest TP on SMF2.1 at: www.fjr-club.nl

lurkalot

Quote from: @rjen on December 30, 2018, 08:36:44 PM
Ok, below code justifies the text in the blocks...

And the result attached.
If you want the text non-justified, change 'text-align: justify;' to 'text-align: left;'.

Personally I would use three separate TP blocks, but this is what Bigguy started with, so it is up to the owner to decide what to do with it...

Thanks. Yep bigguy already shared this code with us on his site before posting it here, so no harm in getting it slightly modified for own use. I don't like centered text hence the request.  I would use three separate blocks as well, but using this lets you add more top blocks using the default layout.

The block looks really nice now with the padding imo, though for some reason it's adding strange spacing between the words. Edit forgot to text-align: left, All is good thank you. http://cctestsite.info/testsite3/index.php

Now going to add spaces between titles and icons.

bigguy

Looks very awesome guys. I missed this post and thanks for helpin out with the code for that. You really fixed it up nice. :) I hope everyone enjoys it.

lurkalot

Quote from: bigguy on January 03, 2019, 02:07:48 AM
Looks very awesome guys. I missed this post and thanks for helpin out with the code for that. You really fixed it up nice. :) I hope everyone enjoys it.

Thanks.  I will use this code at some point not sure how and where yet, I'm still experimenting but now @rjen has made it much more usable for my needs at least, I'm sure it will come in very handy.  ;)