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

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.

@rjen · « **Reply #1 on:** December 09, 2018, 01:23:30 PM »

Better.

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

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

@rjen · « **Reply #3 on:** December 09, 2018, 01:35:35 PM »

I’ll check it out tomorrow...

bigguy · « **Reply #4 on:** December 09, 2018, 01:38:31 PM »

Take your time.

@rjen · « **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...

bigguy · « **Reply #6 on:** December 10, 2018, 10:04:12 AM »

Quote from: @rjen 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...

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 · « **Reply #7 on:** December 28, 2018, 04:02:42 AM »

Quote from: bigguy 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 />

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>

lurkalot · « **Reply #8 on:** December 28, 2018, 05:15:14 AM »

Quote from: @rjen on December 28, 2018, 04:35:35 AM

Sure, no probs, changed.

Thanks.

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

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.

lurkalot · « **Reply #9 on:** December 28, 2018, 06:17:49 AM »

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

Recent

User

Stats

Members

Stats

Users Online

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

bigguy

Welcome block for bigguy

@rjen

Re: Welcome block for bigguy

bigguy

Re: Welcome block for bigguy

@rjen

Re: Welcome block for bigguy

bigguy

Re: Welcome block for bigguy

@rjen

Re: Welcome block for bigguy

bigguy

Re: Welcome block for bigguy

@rjen

Re: Welcome block for bigguy

lurkalot

Re: Welcome block for bigguy

lurkalot

Re: Welcome block for bigguy