Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: Help Widening Template  (Read 5132 times)

breakwater

  • Newbie
  • *
  • Karma: 0
  • Posts: 6
Help Widening Template
« on: January 01, 2007, 01:10:03 am »

A CSS pro I'm not
I love the "blue blog" offered here: http://www.solucija.com/templates/demo/Blue_blog_template/

But i need it to be much wider.  is it possible someone could help in widening it (perhaps 90% of page width)
I am trying to fit objects within the larger column that are aprox 730 pixels wide, and therefore won't fit

Thank You
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Help Widening Template
« Reply #1 on: January 01, 2007, 01:40:11 am »

Hi breakwater. Welcome here!

To widen the blueblog template you need to edit the stylesheet (style.css, in the folder "images"), specifically the width values for #container, #horizontal, #right-column, #content and #footer. All of these div styles currently has fixed width values. You can either enter new fixed width values or play around with relative values (em, %). To fit a 730px wide object within the content div, you obviously have to give it a value of 730px or greater (keep margin and padding values in the equation) but you also have to consider what that greater value will do to the other page-wide divs (container, horizontal and footer) and adjust their width accordingly. It's not that difficult, just takes a little trial-and-error to get it right.

I currently have too much bubbly running around in my veins to be of much more assistance than this. Perhaps tomorr ... er, later today rather, assuming the little gnome with the silver hammer doesn't bother me too much. :D

'appy new year!
Logged

breakwater

  • Newbie
  • *
  • Karma: 0
  • Posts: 6
Help Widening Template
« Reply #2 on: January 01, 2007, 06:42:20 pm »

yeah, today's a day for sunglasses even though it's pouring rain...... :cool:

I've tried my hack-job hands, and i'm obviously doing something wrong.  I cant get the header to resize, it just makes a black square (?)



thanks again
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Help Widening Template
« Reply #3 on: January 02, 2007, 08:37:28 am »

Hi,
The header contains  a background image that is as wide as the original header width. You would have to edit it with an image processor like Photoshop to fit your new width. The same goes for other background images used on the page wide objects like the horizontal navbar and, unless I'm seeing double, the body.

Look for "background: #some_value url(some_name.type)" in the CSS file to find the names of images used as backgrounds on the page-wide containers. Those are the ones you need to edit or recreate.
Logged

breakwater

  • Newbie
  • *
  • Karma: 0
  • Posts: 6
Help Widening Template
« Reply #4 on: January 02, 2007, 04:48:07 pm »

I appreciate the help, but i'm just not getting it quite yet. thanks for sticking with me.

I've managed to widen the #container to accomodate a larger #content section.  However this is the first time i've opened any CSS stylesheets, so i dont have any clue if it's the right formula, in respect to the original.

I've also messed around with re-sizing the header, and i'm allways WAY off, and it looks horrible.

Here's my stylesheet so far:
   
Code: [Select]
* {
margin: 0;
padding: 0;
}

body {
background: #337FC6 url("bg.gif") top center repeat-y;
font: normal 8pt/13pt verdana, arial,sans-serif;
color: #808080;
}

a, a:visited {
text-decoration: underline;
color: #000;

}

a:hover {
color: #808080;
}

#header {
width: 872px;
height: 60px;
background: #000 url("header.gif") no-repeat;
padding-top: 30px;
padding-left: 18px;
font-size: 14pt;
color: #FFF;
}

#header h2{
padding-top: 5px;
font-size: 9pt;
color: #C2D9EF;
}

#container {
width: 840px;
background: #fff url("sidebar.gif") repeat-y right;
border: solid 10px #fff;
margin: 0 auto;
text-align: left;
}

#horizontal {
width: 820px;
height: 30px;
background: url(horizontal.gif);
font-weight: bold;
font-size: 8pt;
padding-top: 6px;
padding-left: 20px;

}

#horizontal a, #horizontal a:visited {
color: #C2D9EF;
text-decoration: none;
margin-right: 15px;
}

#horizontal a:hover {
color: #FFF;
text-decoration: none;
}

#right-column {
color: #808080;
width: 134px;
background: url(menutop.gif) no-repeat top left;
float: right;
padding: 10px;
border-right: 4px solid #FFF;
}

#content {
float: left;
width: 670px;
margin: 10px 0 0 4px;
}

#content h2{
font-size: 12pt;
font-weight: bold;
color: #76A7DC;
margin-bottom: 5px;
padding-left: 14px;
background: url(h2bg.gif) top left repeat-y;
}

.black {
color: #000;
}

p {
margin-bottom: 20px;
padding-left: 14px;
background: url(articlebg.gif) top left repeat-y;
}

input.text {
width: 70px;
border: 1px solid #ccc;
}

input.button {
color: #808080;
padding-left: 0px;
font-size: 8pt;
border: none;
background: none;
}

#searchbox {
background: url(searchbox.gif) no-repeat;
padding: 5px;
height: 30px;
}

#footer {
color: #ccc;
background: #F9F9F9;
clear: both;
width: 665px;
margin-left: 4px;
height: 20px;
padding: 4px;
border: 1px solid #E4E4E4;
}

#footer a, #footer a:visited{
color: #ccc;
}

#footer a:hover {
color: #808080;}
what should the header size be?
what should the horizontal size be?

thanks alot!
Logged

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Help Widening Template
« Reply #5 on: January 02, 2007, 07:33:20 pm »

Well, your header is currently 50px wider than the container, so it will stick out of everything.
If the container is 840px wide + 0 padding, then
the header should be width + padding = 840px (currently the padding is set to 18 px left, so set width to 822px)

content width + padding + margin + right column width + padding + margin should not exceed 840px in total, and right now they're fine so you only need to alter the header width as mentioned.

What you're dealing with here is called the box model, and the most basic box model formula is
object width plus padding
If/when you have two objects lined up side by side within a containing object, you also need to factor in any margin values, which gives the formula object plus padding plus margin
There are some differences in browser interpretation of this box model, but the basic formula gives you a good foothold.
Experiment! :D
Logged

breakwater

  • Newbie
  • *
  • Karma: 0
  • Posts: 6
Help Widening Template
« Reply #6 on: January 03, 2007, 09:56:40 pm »

awesome, i think i got it. looks ok in both firefox/ IE

now how do i make the provided search bar work?
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
Help Widening Template
« Reply #7 on: January 03, 2007, 10:16:45 pm »

This assumes you have already "ported" your template file (index.htm) by saving a copy of it as index.php and have replaced all (or most of) the content components in it with their php function statement counterparts... and that we're working with sNews 1.5.30 (stable version).

Within your Blue Blog template file (index.php) locate the following:
Quote

   
Within the searchbox division, the blue lines currently generate the form and its contents. You need to replace those with the function statement that calls the search function from snews.php, which is:
Quote
If you have problems with it, search and locate function searchform() within your snews.php file and become familiar with it by comparing it to what you are replacing. This function only has 4 lines of code and they are all in HTML, so it's fairly easy to figure out. If you want to mod it, copy and paste it to a "spare-parts.php" file in your root directory so you can always get a fresh copy if it doesn't work out.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

breakwater

  • Newbie
  • *
  • Karma: 0
  • Posts: 6
Help Widening Template
« Reply #8 on: January 05, 2007, 12:12:23 am »

Huh, ok.  I downloaded snews.  but i'm not sure if i can create the sql database with that code it says to use.

I'm using godaddy hosting.  i can make sql databases, but any ideas/tips on how to make it with that particular code?


here's my site so far, can you more knowlegable people take a look tell me if you see something abnormal.

removed- something tell's me i'm wasting bandwith on non-fishermen

thanks
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
Help Widening Template
« Reply #9 on: January 05, 2007, 03:27:37 am »

ahhh... uhhhh... I take it that you have been modifying and working with this Blue Blog template as a static HTML site... since I see that all the links in the top nav-bar are to HTML pages... and that you have not yet "ported" this template to run with sNews? I assumed that you had already done the porting. Getting the search field to work depends on this. It won't search and find information in static html pages.

If you haven't done the porting yet... you have more work to do. And you need to know that sNews only needs one physical page - the index.php file - which starts out as a copy of the index.html file from your template kit. You then replace all of the content components in the template file with the php function statements (in the default sNews index.php file) and then save it as your new sNews index.php file. Go here to learn more about using sNews with an HTML Template.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal
Help Widening Template
« Reply #10 on: January 05, 2007, 05:52:56 am »

Quote from: breakwater
I downloaded snews.  but i'm not sure if i can create the sql database with that code it says to use.

I'm using godaddy hosting.  i can make sql databases, but any ideas/tips on how to make it with that particular code?
To create the database with the provided sql code, follow the instructions in the readme.html file that came with the snews package that you've downloaded. I have no experience with godaddy as a host, but if you can make sql db's on your domain server -- what do you make them with? Do you have access to phpMyAdmin for example? Most hosts that offer PHP/MySQL packages also provide you with a tool like phpMyAdmin to administrate databases. Check with your host if you don't know.
While you're at it make sure that you're allowed to use your own .htaccess files because you'll need it to run sNews properly. Again, if you read the readme file you'll see the minimum system requirements, as well as the steps you need to take to get the db populated and your site up and running with the bare essentials.

And read the article key suggested, for the next step (implementing the Blue Blog template).
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
Help Widening Template
« Reply #11 on: January 05, 2007, 04:07:34 pm »

This might also be of help - read this tutorial on setting up your database with  phpMyAdmin.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

breakwater

  • Newbie
  • *
  • Karma: 0
  • Posts: 6
Help Widening Template
« Reply #12 on: January 05, 2007, 05:16:11 pm »

While i certainly appreciate the help from everyone, the ability to make the search bar seems like something that i could do.......

but i just don't have the development time to work on something that, in the end is not critical to my site.  So, i'm just going to nuke it.

Perhaps after i get the site out of baby stage and accomplishing what i want it to do (you probably caught the jist of the theme) i'll look into adding more features like that.  For now i'm concentrating on pushing video advertisements to those that want to watch fishing stuff.

thanks
Logged