A New Tutorial Request

[bigjoe11a]

What I'm looking for is a tutorial on how to create blocks. Boxes. How to line up other blocks or boxes with ones in the center and to the right and left side of page. How to add blocks or boxes below. How to add images and position images and text. on the right, left, top and below the image. How to add more blocks that won't mess up the page. Show me how to put a form in a block and jazz it up. (Make it Look Nice)...How to add images and place text on that image. Sample: This is what I want to learn ------------------------------------- --------------------------------------------------------- ------------------------------------------| Left Block --------------------- |------| center Block----------------------------------------|-----| Right Block--------------------------|------------------------------------- --------------------------------------------------------- ------------------------------------------- Then I want to know how to add more blocks. I hope I gave better details on what I'm wanting and trying to do. Joe

[ShadowMage]

You might want to try Googling for "three column layout" and see what that gets you. It sounds like that's what you're looking for.

[Ingolme]

If you want more than one box in any of the columns, put the boxes inside one of the column elements. To put something below all the columns, just add "clear: both" to the CSS of that element.

<div id="left">  <div class="box">Left column box 1</div>  <div class="box">Left column box 2</div>  <div class="box">Left column box 3</div></div><div id="right">  <div class="box">Right column box 1</div>  <div class="box">Right column box 2</div></div><div id="center">  Center content</div><div id="footer">  This goes below all the columns</div>

#left {  float: left;  width: 160px;}#right {  float: right;  width: 200px;}#center {  margin-left: 160px;  margin-right: 200px;}#footer {  clear: both;}/* Colors */#center { background-color: red; }#footer { background-color: green; }.box { background-color: blue; }

[thescientist]

What I'm looking for is a tutorial on how to create blocks. Boxes. How to line up other blocks or boxes with ones in the center and to the right and left side of page. How to add blocks or boxes below. How to add images and position images and text. on the right, left, top and below the image. How to add more blocks that won't mess up the page. Show me how to put a form in a block and jazz it up. (Make it Look Nice)...How to add images and place text on that image. Sample: This is what I want to learn ------------------------------------- --------------------------------------------------------- ------------------------------------------| Left Block --------------------- |------| center Block----------------------------------------|-----| Right Block--------------------------|------------------------------------- --------------------------------------------------------- ------------------------------------------- Then I want to know how to add more blocks. I hope I gave better details on what I'm wanting and trying to do. Joe

I would say this already falls under the umbrella of the CSS tutorials. This site is only meant as a reference, not a compilation of all available techniques and implementations. Google can get you more insight into the specifics, and practice and experience will help re-inforce them. The tutorials could not possibly cover everything that could be done with CSS/HTML, except for just highlighting what you need to know in order to get your feet off the ground and get you started.

[bigjoe11a]

If you want more than one box in any of the columns, put the boxes inside one of the column elements. To put something below all the columns, just add "clear: both" to the CSS of that element.

<div id="left">  <div class="box">Left column box 1</div>  <div class="box">Left column box 2</div>  <div class="box">Left column box 3</div></div><div id="right">  <div class="box">Right column box 1</div>  <div class="box">Right column box 2</div></div><div id="center">  Center content</div><div id="footer">  This goes below all the columns</div>

#left {  float: left;  width: 160px;}#right {  float: right;  width: 200px;}#center {  margin-left: 160px;  margin-right: 200px;}#footer {  clear: both;}/* Colors */#center { background-color: red; }#footer { background-color: green; }.box { background-color: blue; }

Thank you. That does help a little. Let me show you what I was trying to do and well couldn't get it to work. The page is a template,

<div id="wrappermain">  <div class="block_left_header">  <div class="block_left_title">{L_TITLE}</div>  <div style="color:red;">=============================</div>  <div class="block_left_content">{L_CONTENT}</div>  </div>  <div class="block_center_header">  <div class="block_center_title">{C_TITLE}</div>  <div style="color:red">=============================</div>  <div class="block_center_content">{C_CONTENT}</div>  </div>  <div class="block_right_header">  <div class="block_right_title">{R_TITLE}</div>	    <div style="color:red">=============================</div>  <div class="block_right_content">{R_CONTENT}</div>  </div> </div>

Remember that not all sides or center could have a blockand below is how I load the template in

//Load blocks left, center and right side.    //$mysql = new Mysql(); //$mysql->connect($settings['db_host'], $settings['db_name'], $settings['db_user'], $settings['db_pass']); // change this line here $leftquery = "select * from ".db_prefix."blocks where block_pos='left'"; // and table name here    $centerquery = "select * from ".db_prefix."blocks where block_pos='center'"; // and table name here    $rightquery = "select * from ".db_prefix."blocks where block_pos='right'"; // and table name here $leftresult = $mysql->query($leftquery);    $centerresult = $mysql->query($centerquery);    $rightresult = $mysql->query($rightquery); foreach ($mysql->fetchAll($leftresult) as $bleft) {    if(!$bleft['block_enabled']) {break;} //checks to see if block is disabled    foreach($mysql->fetchAll($centerresult) as $bcenter) {	    if(!$bcenter['block_enabled']) {break;} //checks to see if block is disabled	    foreach($mysql->fetchAll($rightresult) as $bright) {    if(empty($bleft)) {break;} //checks to see if there are any blocks	    if(!$bleft['block_enabled']) {break;} //checks to see if block is disabled   $page = new page('styles/templates/block_main.html');$page->replace_tags(array( 'L_TITLE'	 => '' . $bleft['block_title'] . '',    'L_CONTENT'   => '' . $bleft['block_content'] . '',    'C_TITLE'	 => '' . $bcenter['block_title'] . '',    'C_CONTENT'   => '' . $bcenter['block_content'] . '',    'R_TITLE'	 => '' . $bright['block_title'] . '',    'R_CONTENT'   => '' . $bright['block_content'] . '',));$page->output();	    }      }}

I am still a little confused on this. Until I get a better idea of adding content and titles to it. Then I need to know how to add back ground images and not use the back ground color.

[dsonesuk]

Is this template system similar to QuickSkin, we talked previously about adding a wrapper container, if you can find out where the <html> to </html>, and add <div id="wrapper"> </div> to it? or you can add I presume the <div id="wrapper"> to the top of header.html page, and the wrapper closing tag to the bottom of footer.html, then add div containers related to layout sectiona as in header, footer, left, right which you can control using css. quickscan example<!-- INCLUDE header.html -->{body}<!-- INCLUDE footer.html -->

[dsonesuk]

With Joomla the index page has all the main layout section on that page, all with id or class reference, within them the position modules are defined where html along with content are placed within that module position of header content, left and right are placed into, you are defining the layout sections and, html and content all in one.

[bigjoe11a]

Sorry that's not possible, due to that fact it covers too much body of the page. It's hard for me to explain this. If I did that. I would have to edit all the pages again. and Yes. It's the template system I was asking about in another topic and didn't under stand any of it. look here http://toppersbbs.dtdns.net/mapnet and look at the bottom. That's what I want. Just not what I really want. The idea is to use the myswl database to add the content for each block. If no content is available then it goes to the next block, if there is one. Any way I'm sorry I don't remember any thing about QuickSkin. I'm hoping to get this fixed before I move on with the project.

[bigjoe11a]

With Joomla the index page has all the main layout section on that page, all with id or class reference, within them the position modules are defined where html along with content are placed within that module position of header content, left and right are placed into, you are defining the layout sections and, html and content all in one.

No, I'm not. I'm using a mysql database to load the data in and display it on the page. (That is a Template Page). and Joomla sucks too. What I have planned will have 100's more options and content.

[bigjoe11a]

Is this template system similar to QuickSkin, we talked previously about adding a wrapper container, if you can find out where the <html> to </html>, and add <div id="wrapper"> </div> to it? or you can add I presume the <div id="wrapper"> to the top of header.html page, and the wrapper closing tag to the bottom of footer.html, then add div containers related to layout sectiona as in header, footer, left, right which you can control using css. quickscan example<!-- INCLUDE header.html -->{body}<!-- INCLUDE footer.html -->

Ok, I guess I was wrong in my last post, Ah, Yes it is a lot like it. QuickSkin. That's all it does is that it replaces tags and then puts what ever infor you want on the template.

[dsonesuk]

You say joomla sucks? why? because currently its working a lot better than your system at the moment, because its support sucks, well where's the support for your template system? because it will cost, well you can't get anything for nothing (legally) these days.

[bigjoe11a]

Because it's just a blog and all ways will be nothing but a blog

[dsonesuk]

NO! if you want to be a blog site, that is what it will be, the blog is added by using an extension, Wordpress at first was mainly used for blog, now it too! depends on what the client wants, a blog site or non blog site.

[bigjoe11a]

Have you even played a round with http://ocportal.com/start.htm This is what I want. It's just there's no support for these scripts. I all ready tried...

[dsonesuk]

??? Are you saying this what you are using, or the script that these use??? but according to this site you can have a site up in 40 minutes easy, Joomla is well established, is has thousands of extensions you can install, you can create your own extension, templates to your design, you don't have to use third party as this site claims, don't get taken in by the hype.

[bigjoe11a]

Ok, well what I'm trying to tell you is that with ocportal. You don't have to do all of that. every thing is all ready installed. You don't have to worry about that. and besides. I'm still waiting to here back from the other guy about the pages I sent. I still need help on this and well. You need to play a round with it and joomla is nothing but a blog.

[dsonesuk]

Everything!, how I want every shown, how i wanted laid out, when i want it shown, so if i want it to be just a blog it will ###### as much as joomla as well, sounds absolutely hyper sucky to me!

[Synook]

Stay calm, people — I think we have ascertained that Joomla! and certain other free CMSs, in an absolute sense, can be and are used for non-blog applications, but that for Bigjoe, the time, support or ability is simply not present in order for him to make use of said CMSs for anything but how they are in their most basic configurations — hence the need for something more complete out-of-the-box.I also think it is great that the OP is has the will to learn how to achieve what he wants from scratch; however, I just think that perhaps a more open view is needed on existing software is necessary — the idea of "product x will only ever be for purpose y" ignore the extensible nature of open-source software and the flexibility of web technologies. As has been said, it is fine if you are unable to extend the products yourself, but blanket statements such as "joomla is nothing but a blog" are not likely to help. Keep an open mind when learning, and you will find how to make the best use of technologies and existing products to suit your needs; otherwise, you will definitely end up doing more work than necessary.

[bigjoe11a]

Synook, Thank you. very much on that comment and your right. I have ask for support a many Pre-Made CMS and never could get support. Or I had to read threw 100's of pages just to find one answer. Until I can find some thing that has every thing I want. I'm stuck making my own. I been learning advance PHP on Youtibe and google. and I'm picking up on some new things. So, See PHP have never been a problem for me. Mostly just small crap like my last post. The problems I have are in HTML and Style Sheets. I just never could under stand them or how to use them. and all the tutorials I have fount. Just don't tell me what I need to know. So right now I'm waiting for Ingolme to reply to my post above so I can try and get this fixed so I can move on.

[Ingolme]

I don't completely understand what you need done with your HTML and CSS. You need to know that everything in the left or right column goes into one single container. Once the container is positioned properly, everything inside it will be positioned as well without the need of any position styling at all. To move a column to the left, you use "float: left", assign a width to it and then assign a left margin to the center column equal to that width. The reason a left margin is applied is because if the center column exceeds the height of the left column then its content will start going below. The same procedure goes for a right column but with the values changed for the right. The center column's HTML must go after all the columns which are floated. When you want to put a box below any floated columns, you just need to add "clear: both" to the CSS of that element. You can even have a new set of columns below the cleared box.

[bigjoe11a]

Well if you look at this code below.

<div id="wrappermain">  <div class="block_left_header">  <div class="block_left_title">{L_TITLE}</div>  <div style="color:red;">=============================</div>  <div class="block_left_content">{L_CONTENT}</div>  </div>  <div class="block_center_header">  <div class="block_center_title">{C_TITLE}</div>  <div style="color:red">=============================</div>  <div class="block_center_content">{C_CONTENT}</div>  </div>  <div class="block_right_header">  <div class="block_right_title">{R_TITLE}</div>            <div style="color:red">=============================</div>  <div class="block_right_content">{R_CONTENT}</div>  </div> </div>

This is what I'm trying to do. If you can under stand this. I'm trying to under stand you and it's not that easy.So what I mean is that the block_left_header would be the block. and the other parts would be the content for that block.What I need to know is how to add the content that I have from the template into the blocks you made.

[bigjoe11a]

Oh and before I forget, This code.

<div style="color:red">=============================</div>

should be an image. The title going just over this image and the content goes below.

[dsonesuk]

Can't be done by having for example

<div id="wrappermain">  <div class="block_left_header">  <div class="block_left_title">{L_TITLE}</div>  <div style="color:red;">=============================</div>  <div class="block_left_content">{L_CONTENT}</div>  </div>  <div class="block_center_header">  <div class="block_center_title">{C_TITLE}</div>  <div style="color:red">=============================</div>  <div class="block_center_content">{C_CONTENT}</div>  </div>  <div class="block_right_header">  <div class="block_right_title">{R_TITLE}</div>			<div style="color:red">=============================</div>  <div class="block_right_content">{R_CONTENT}</div>  </div></div>

within a page called content.html then use your code as ( just important area)

	  $page = new page('styles/templates/content.html');		$page->replace_tags(array(	  		'B_TITLE'				=>  $row['block_title'],		'B_CONTENT'		=>  $row['block_content'],		''							  =>  '',		''							  =>  '',		));		$page->output();		}

OR maybe individually this would be in block_left.html

  <div class="block_left_title">{L_TITLE}</div>  <div style="color:red;">=============================</div>  <div class="block_left_content">{L_CONTENT}</div>  

<div id="wrappermain"><div class="block_left_header"><?php//display top blocks 		$mysql = new Mysql();		$mysql->connect($settings['db_host'], $settings['db_name'], $settings['db_user'], $settings['db_pass']); // change this line here 		$query = "select * from blocks where block_pos='left'"; // and table name here		$result = $mysql->query($query);				foreach ($mysql->fetchAll($result) as $row) {		if($row['block_on'] == 1) {		$page = new page('styles/templates/block_left.html');		$page->replace_tags(array(	  		'B_TITLE'				=>  $row['block_title'],		'B_CONTENT'		=>  $row['block_content'],		''							  =>  '',		''							  =>  '',		));		$page->output();		}}?> </div> rest of blocks followed by closing div for wrappermain 

you have all the div containers with important css classes and id to control layout, the title etc to dynamically produce content, you just have to figure a way to place links toexternal style sheet to control this styling in the <head> </head> of the document, so all styling is outside the body and stored in at one location.

[bigjoe11a]

Sorry I couldn't get back with you guys sooner. I thought you mite want to take a look at this. It took me a while. That's what I wanted. http://toppersbbs.dtdns.net/mapnet/ Any way I need to start a new topic on another matter.Joe

[StevenHu]

Have you even played a round with http://ocportal.com/start.htm This is what I want. It's just there's no support for these scripts. I all ready tried...

BigJoe, I understand your pain! If I were you, I would copy the page source of that page and paste it into a Notepad page with the filename ending in .html. Then I would systematically remove the different parts I don't want, checking my page in the browser over and over to make sure I did not break something. For instance, I would do a search for the text in the center column, and replace that part with my text. It seems like you are looking for a shortcut on learning CSS. I suggest a book that will take you from the beginner stages on up. I've tried the web way and it leaves a lot of holes in my learning (though not always). It seems that you just need a firm foundation to get started. I have "The CSS Anthology," and it tells me how to make 2-column and 3-column layouts with CSS. It's written for people of our limited CSS experience, and is chock full of good stuff. You can learn more about it here: http://www.sitepoint.com/books/cssant4/