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?

July 17, 2019, 10:31:25 PM

Login with username, password and session length

Recent

Members
Stats
  • Total Posts: 188520
  • Total Topics: 20737
  • Online Today: 266
  • Online Ever: 629
  • (November 08, 2018, 01:36:54 PM)
Users Online
Users: 0
Guests: 19
Total: 19

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

0 Members and 1 Guest are viewing this topic.

Offline bigguy

  • Beta Tester
  • *
  • Posts: 246
  • Be Nice...
    • What's Ur Beef
Welcome block for bigguy
« on: December 09, 2018, 12:43:53 PM »
The reason the margin-left is there is because if it is not all the bottom blocks are not centered under the top three. If you remove that all the blocks go right to far to be centered.

I will make the changes though...soon. I gotta clean up the desktop.

Offline @rjen

  • Support Team
  • *
  • Posts: 1695
    • FJR-club Nederland
Re: Welcome block for bigguy
« Reply #1 on: December 09, 2018, 01:23:30 PM »
Better.  O0

If you can share your block code that you use for the top 3 blocks I can make those responsive too..

But maybe you can do that yourself by making it three separate blocks that you put in the front panel (before articles and posts)... they should work responsively too...
Running TP1.6.3 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: 246
  • Be Nice...
    • What's Ur Beef
Re: Welcome block for bigguy
« Reply #2 on: December 09, 2018, 01:33:38 PM »
This is a front panel block:
Code: [Select]
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome message</title>
<style>
#wrapper {
  clear:all;
  display:table;
  border-collapse: separate;
    border-spacing: 2em 1em;
}
#row {
  display:table-row;
}
.divboxtitlebg {
    background: #C4542F;
    padding: 10px;
    margin: -3px -1px -3px;
    border: 1px solid #C4542F;
    border-radius: 8px;
    color:#fff;
    text-align:right;
    display: flex;
    align-items: center;
    justify-content: center;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,.8);
              -moz-box-shadow: 0px 0px 2px rgba(0,0,0,.8);
                         box-shadow: 0px 0px 2px rgba(0,0,0,.8);

          z-index: 100;
}
#block1 {
  display:table-cell;
  background-color:#88f793;
  width:auto;
  border-radius: 8px;
  padding-bottom:10px;
}
#block2 {
  background-color:#f7ec79;
  display:table-cell;
  width:auto;
  border-radius: 8px;
  padding-bottom: 10px;
}
#block3 {
  background-color:#f9bd6d;
  display:table-cell;
  width:auto;
   border-radius: 8px;
   padding-bottom: 10px;
}
</style>
</head>

<body id="tpbody" class="tpcontnainer">
<center>
<div id="row">
    <div id="block1">
        <h2 class="divboxtitlebg">Block Title One<img src="/welcome.png" alt="welcome" align="left"/></h2>
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.    </div>
    <div id="block2">
       <h2 class="divboxtitlebg">Block Title Two<img src="/users.png" alt="members" align="left"/></h2>
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.    </div>
<div id="block3">
      <h2 class="divboxtitlebg">Block Title Three<img src="/discussion.png" alt="discuss" align="left"/></h2>
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</div>
</div>
</center>
</body>
</html>
<br />
« Last Edit: December 27, 2018, 05:32:01 PM by lurkalot »

Offline @rjen

  • Support Team
  • *
  • Posts: 1695
    • FJR-club Nederland
Re: Welcome block for bigguy
« Reply #3 on: December 09, 2018, 01:35:35 PM »
I’ll check it out tomorrow...
Running TP1.6.3 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: 246
  • Be Nice...
    • What's Ur Beef
Re: Welcome block for bigguy
« Reply #4 on: December 09, 2018, 01:38:31 PM »
Take your time. :)

Offline @rjen

  • Support Team
  • *
  • Posts: 1695
    • FJR-club Nederland
Re: Welcome block for bigguy
« Reply #5 on: December 10, 2018, 03:39:24 AM »
Hmmm, I had a quick look at the code you sent me, but I find that hou have included css styling in the block that has nothing to do with the contents of the block.

This code
Code: [Select]
#wrapper {
  clear:all;
  display:table;
  border-collapse: separate;
    border-spacing: 2em 1em;
}

Is affecting the frontpage as a whole: I would not do that tbh. You choice of course.
This would better fit into a css file not a block...
Running TP1.6.3 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: 246
  • Be Nice...
    • What's Ur Beef
Re: Welcome block for bigguy
« Reply #6 on: December 10, 2018, 10:04:12 AM »
Hmmm, I had a quick look at the code you sent me, but I find that hou have included css styling in the block that has nothing to do with the contents of the block.

This code
Code: [Select]
#wrapper {
  clear:all;
  display:table;
  border-collapse: separate;
    border-spacing: 2em 1em;
}

Is affecting the frontpage as a whole: I would not do that tbh. You choice of course.
This would better fit into a css file not a block...


I don't think I put that in there. It probably came with the code. I might have put this in:

 border-collapse: separate;

Offline @rjen

  • Support Team
  • *
  • Posts: 1695
    • FJR-club Nederland
Re: Welcome block for bigguy
« Reply #7 on: December 28, 2018, 04:02:42 AM »
This is a front panel block:
Code: [Select]
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome message</title>
<style>
#wrapper {
  clear:all;
  display:table;
  border-collapse: separate;
    border-spacing: 2em 1em;
}
#row {
  display:table-row;
}
.divboxtitlebg {
    background: #C4542F;
    padding: 10px;
    margin: -3px -1px -3px;
    border: 1px solid #C4542F;
    border-radius: 8px;
    color:#fff;
    text-align:right;
    display: flex;
    align-items: center;
    justify-content: center;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,.8);
              -moz-box-shadow: 0px 0px 2px rgba(0,0,0,.8);
                         box-shadow: 0px 0px 2px rgba(0,0,0,.8);

          z-index: 100;
}
#block1 {
  display:table-cell;
  background-color:#88f793;
  width:auto;
  border-radius: 8px;
  padding-bottom:10px;
}
#block2 {
  background-color:#f7ec79;
  display:table-cell;
  width:auto;
  border-radius: 8px;
  padding-bottom: 10px;
}
#block3 {
  background-color:#f9bd6d;
  display:table-cell;
  width:auto;
   border-radius: 8px;
   padding-bottom: 10px;
}
</style>
</head>

<body id="tpbody" class="tpcontnainer">
<center>
<div id="row">
    <div id="block1">
        <h2 class="divboxtitlebg">Block Title One<img src="/welcome.png" alt="welcome" align="left"/></h2>
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.    </div>
    <div id="block2">
       <h2 class="divboxtitlebg">Block Title Two<img src="/users.png" alt="members" align="left"/></h2>
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.    </div>
<div id="block3">
      <h2 class="divboxtitlebg">Block Title Three<img src="/discussion.png" alt="discuss" align="left"/></h2>
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</div>
</div>
</center>
</body>
</html>
<br />

I just realized I made a promise some time ago...
Just had a play with your welcome block(s)...

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>
« Last Edit: December 28, 2018, 04:35:17 AM by @rjen »
Running TP1.6.3 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: 6074
    • Camera Craniums
Re: Welcome block for bigguy
« Reply #8 on: December 28, 2018, 05:15:14 AM »
Sure, no probs, changed.

Thanks.  O0


Just grabbed the latest code from 2.1 and updated my test site. Got an error on upgrade when  updating the calendar I think. Seems to work ok though...

Quote
Error!
You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'INSERT INTO smf_calendar_holidays (title, event_date) VALUES ('New Year''s', '1' at line 6

Think they made a load of changes to the calendar over the last few days actually, maybe they've broken something that needs reporting, it might already be reported.

I got a error when I upgraded due to a broken upgrade.php script which they pointed me to a fix. appart from that it's been pretty solid so far.

Offline lurkalot

  • Administrator
  • *
  • Posts: 6074
    • Camera Craniums
Re: Welcome block for bigguy
« Reply #9 on: December 28, 2018, 06:17:49 AM »

I just realized I made a promise some time ago...
Just had a play with your welcome block(s)...

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


Must say that looks really neat now @rjen http://cctestsite.info/testsite3/index.php