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

Recent

Welcome to TinyPortal. Please login or sign up.

March 28, 2024, 09:03:37 AM

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

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.

bigguy

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.

@rjen

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

bigguy

#2
This is a front panel block:
<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 />

@rjen

Running Latest TP on SMF2.1 at: www.fjr-club.nl

bigguy


@rjen

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

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

bigguy

Quote from: @rjen on December 10, 2018, 10: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

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

@rjen

#7
Quote from: bigguy on December 09, 2018, 08:33:38 PM
This is a front panel block:
<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...


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

lurkalot

Quote from: @rjen on December 28, 2018, 11:35:35 AM
Sure, no probs, changed.

Thanks.  O0


Quote from: @rjen on December 28, 2018, 11:39:38 AM
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...

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

lurkalot

Quote from: @rjen on December 28, 2018, 11:02:42 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