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 20, 2019, 08:52:13 PM

Login with username, password and session length

Recent

Members
Stats
  • Total Posts: 188921
  • Total Topics: 20754
  • Online Today: 130
  • Online Ever: 629
  • (November 08, 2018, 01:36:54 PM)
Users Online
Users: 0
Guests: 35
Total: 35

Author Topic: bigguys block slightly modified?.  (Read 873 times)

0 Members and 1 Guest are viewing this topic.

Offline lurkalot

  • Administrator
  • *
  • Posts: 6227
    • Camera Craniums
bigguys block slightly modified?.
« on: December 30, 2018, 06:00:42 AM »
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.

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: 1821
    • FJR-club Nederland
Re: bigguys block slightly modified?.
« Reply #1 on: December 30, 2018, 06:02:49 AM »
Sure, I can do that but not atm. I am making ‘ oliebollen’  atm...
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 lurkalot

  • Administrator
  • *
  • Posts: 6227
    • Camera Craniums
Re: bigguys block slightly modified?.
« Reply #2 on: December 30, 2018, 06:07:14 AM »
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.

Offline wildenborch

  • Support Team
  • *
  • Posts: 347
Re: bigguys block slightly modified?.
« Reply #3 on: December 30, 2018, 07:16:21 AM »
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"

Offline lurkalot

  • Administrator
  • *
  • Posts: 6227
    • Camera Craniums
Re: bigguys block slightly modified?.
« Reply #4 on: December 30, 2018, 07:24:26 AM »
Right that's it, I'm going to go get a packet of crisps.  :tickedoff:

Offline @rjen

  • Support Team
  • *
  • Posts: 1821
    • FJR-club Nederland
Re: bigguys block slightly modified?.
« Reply #5 on: December 30, 2018, 01:36:44 PM »
Ok, below code justifies the text in the blocks...

Code: [Select]
<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...
« Last Edit: May 30, 2019, 12:38:48 PM 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 lurkalot

  • Administrator
  • *
  • Posts: 6227
    • Camera Craniums
Re: bigguys block slightly modified?.
« Reply #6 on: December 30, 2018, 02:44:47 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.

Offline bigguy

  • Beta Tester
  • *
  • Posts: 256
  • Be Nice...
    • What's Ur Beef
Re: bigguys block slightly modified?.
« Reply #7 on: January 02, 2019, 07:07:48 PM »
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.

Offline lurkalot

  • Administrator
  • *
  • Posts: 6227
    • Camera Craniums
Re: bigguys block slightly modified?.
« Reply #8 on: January 05, 2019, 09:22:04 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.  ;)