How to add a second column in the webpage code ? - uCoz Community

Page 1 of 1 1
Forum moderator: bigblog

How to add a second column in the webpage code ?

How to add a second column in the webpage code ?

Posts: 4

Reputation: 0

Message # 1 | 4:08 AM 2014-02-02

My custom template that I installed from the uCoz store and it doesn't provided a second column on the left handed side.
As seen from my website: http://xaxr-begone.clan.su/

My thread title might've been a bit confusing, however; Is there any code/script that I can add to have a second column ? Do I have to add any extra "special" additions to have a second column on my left hand side of my website ? If so, may you explain, describe and tell me what to do. It will be greatly appreciated.

Thank you!! happy

happy

(>‿◠)

Post edited by Kevin91x - Sunday, 2014-02-02, 4:09 AM

Posts: 2856

Reputation: 189

Message # 2 | 7:40 AM 2014-02-02

Kevin91x, this thread should be posted in custon solutions , and there are ways to create a second column on the left but that requires custom coding. I will wait for Paradox to move this thread to the correct board and then i will lookin to this matter since i'm on my mobile phone my speed and sight is limited.

Also provide the place where you got the web design , it would be easyer for me to help you out when i install the template myself to edit it.

To busy building a passive income online ;)

Post edited by Animorph - Sunday, 2014-02-02, 7:42 AM

Posts: 4

Reputation: 0

Message # 3 | 8:08 AM 2014-02-02

Animorph, Sorry about that, I'm kind of new to the forum. Should've read the forum rules and the forum itself.
Custom Template Design: http://ucoztemplates.com/shop/95/desc/sparks

(>‿◠)

Post edited by Kevin91x - Sunday, 2014-02-02, 8:36 AM

Posts: 2856

Reputation: 189

Message # 4 | 2:11 PM 2014-02-02

Kevin91x, Follow this exact tutorial:

First go to CP ---> Design --> Design Customization (CSS) --> Find:

Code

#casing{width:1000px;background:url(/images/sheet_c.png);box-shadow:0 0 15px black;}
#content{width:600px;float:left;padding:10px 0 10px 20px;font-size: 12px;font-family: Arial, Helvetica, Sans-Serif;}
#content td, .catsTd{font-size: 12px;font-family: Arial, Helvetica, Sans-Serif;}
#right{width:350px;padding:0 15px;float:right;}

Replace it by:

Code

#casing{min-width:100%;max-width:1000px;background:url(/images/sheet_c.png);box-shadow:0 0 15px black;}
#content{width:440px;padding-top:10px;float:left;font-size: 12px;font-family: Arial, Helvetica, Sans-Serif;}
#content td, .catsTd{font-size: 12px;font-family: Arial, Helvetica, Sans-Serif;}
#right{width:250px;padding:0 15px;float:right;}
#left{width:250px;padding:0 15px;float:left;}

Then go to CP ---> Tools ---> File Manager ---> css ---> nivo-slider.css ---> OPEN IT and REPLACE EVERYTHING with :

Code

/* The Nivo Slider styles */
.nivoSlider {max-width:440px;
  position:relative;
}
.nivoSlider img {max-width:440px;
  position:absolute;
  top:0px;
  left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;max-width:440px;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  z-index:6;
  display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
}
.nivo-box {
  display:block;
  position:absolute;
  z-index:5;
}
/* Caption styles */
.nivo-caption {
  position:absolute;
  left:0px;
  bottom:0px;
  background:#000;
  color:#fff;
  opacity:0.8; /* Overridden by captionOpacity setting */
  width:100%;max-width:440px;
  z-index:8;
}
.nivo-caption p {
  padding:5px;
  margin:0;
}
.nivo-caption a {
  display:inline !important;
}
.nivo-html-caption {
     display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
  position:absolute;
  top:45%;
  z-index:9;
  cursor:pointer;
}
.nivo-prevNav {
  left:0px;
}
.nivo-nextNav {
  right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
  position:relative;
  z-index:9;
  cursor:pointer;
}
.nivo-controlNav a.active {
  font-weight:bold;
}

So far with the CSS styles :)

go to CP ---> Design --> Template Builder --> PASTE and SAVE

Quote

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[TITLE]</title>
<link rel="stylesheet" type="text/css" href="[CSS_URL]" media="all" />
<link rel="stylesheet" href="$HOME_PAGE_LINK$css/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="$HOME_PAGE_LINK$css/nivo-slider.css" type="text/css" media="screen" />
</head>
<body>
<div id="masthead">

<div id="top">
<div id="blogname">
<h1><a href="$HOME_PAGE_LINK$" title="$SITE_NAME$">$SITE_NAME$</a></h1><span>free uCoz templates</span>
</div>
<div class="socl">
<a href="YOUR URL HERE"><img src="/images/twitter.png"></a>
<a href="YOUR URL HERE"><img src="/images/rss.png"></a>
<a href="YOUR URL HERE"><img src="/images/facebook.png"></a>
</div>
<div class="clear"></div>
</div>
<div id="botmenu">
CONTENT
</div>

</div>
<div id="wrapper"> 

<?if($MODULE_ID$='forum')?>
<div id="forum-casing">
<?else?>
<div id="casing">
<?endif?>
<div id="left">

<div class="sidebar">

<div class="sidebox"><h3 class="sidetitl">TITLE</h3>
<div class="inner">CONTENT</div>
</div>

</div>
</div>


<div id="content">
<?if($MODULE_ID$='news' || $MODULE_ID$='blog' || $MODULE_ID$='publ' || $URI_ID$='page1')?>
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="$HOME_PAGE_LINK$images/slider1.jpg" alt="" />
<a href="http://ucoztemplates.com"><img src="$HOME_PAGE_LINK$images/slider2.jpg" alt="" title="This is an example of a caption" /></a>
<img src="$HOME_PAGE_LINK$images/slider3.jpg" alt="" data-transition="slideInLeft" />
<img src="$HOME_PAGE_LINK$images/slider2.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="http://ucoztemplates.com">a link</a>.
</div>
</div>
<?endif?>
[BODY]

</div>
<div id="right">

<div class="sidebar">

<div class="sidebox"><h3 class="sidetitl">TITLE</h3>
<div class="inner">CONTENT</div>
</div>

</div>
</div>

<div class="clear"></div>
</div>
<div class="clear"></div>
</div>

<div id="footer">

<div class="fcred">

[COPYRIGHT]<br />$POWERED_BY$ | <a href="http://ucoztemplates.com">free ucoz templates</a> | <a href="http://ucause.ucoz.com">Free uCoz Custom Support</a>
</div>

<div class="clear"></div>
</div>
<script type="text/javascript" src="$HOME_PAGE_LINK$js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>

<table border="0" cellpadding="4" cellspacing="1" width="98%" class="popuptable">
<tr><td align="center" class="popuptitle"><b>[TITLE]</b></td></tr>
<tr><td align="center" class="popupbody">[BODY]</td></tr>
</table>

To busy building a passive income online ;)

Posts: 4

Reputation: 0

Message # 5 | 3:42 AM 2014-02-03

Thank you Animorph,
I will certainly follow your tutorial and see how it goes; if it fails. I will need more support and help happy

happy

(>‿◠)

Post edited by Kevin91x - Monday, 2014-02-03, 3:51 AM

Posts: 2856

Reputation: 189

Message # 6 | 9:55 AM 2014-02-03

Kevin91x, it will work wink

wink

To busy building a passive income online ;)

Posts: 4

Reputation: 0

Message # 7 | 6:49 AM 2014-02-05

Animorph, the website is a bit "uneven" and "awkward" looking. At what part of the code, where you are able to change the width of the columns ? The slider pictures aren't oriented set in the middle, since its 3 parts of code to change, I don't really know what part of the code that sets the slider pictures in the middle and the width of the columns.

Thank You! happy

happy

Once again, I appreciate your help and support.

EDIT: By looking at my image of the website: it is shown with a few problems that has to be solved.

;

Additional Note: For further immediate support, may I post here on this topic about other custom solutions, or I create another topic about that, or I can just message you about it ?
Additional Note (2): I figured that the slider images doesn't fit the "slider" itself, what is the width x height of the image must be to fit the slider ? Like said, any ways to widen "the main content" of the website (like the columns).

Please reply as soon as possible.

(>‿◠)

Post edited by Kevin91x - Thursday, 2014-02-06, 4:47 AM

How to add a second column in the webpage code ?

Page 1 of 1
1