New menu bar, but on right? Some other questions too!

How can you make your Nucleus site unique?
dackerman
Posts: 48
Joined: Sun Jan 26, 2003 1:25 am

New menu bar, but on right? Some other questions too!

Postby dackerman » Mon Jan 27, 2003 10:34 pm

Hey guys/gals,

How would I go about putting a Navigation bar on the right side of my page? I am basically using everything stock, but I have changed a little bit of the CSS file, and that it is. I have had nucleus for about 5 days, so yes I am a total newbie.

How do I change the style of the search and login fields? I cannot find them anywhere in the templates or skins. Can they not be changed?

Thanks alot of the help if any comes.

[edit]
Just incase you wanted to know my site is http://splix.dyndns.org/index.php.

AND also, sorry, how do I get the index.php page to be loaded right when I go to splix.dyndns.org? It doesnt work like an index.html where that is the first page loaded, how would I go about doing this also?

Thanks!

Dave
User avatar
Trent
Nucleus Guru
Nucleus Guru
Posts: 1534
Joined: Fri Oct 04, 2002 5:08 pm
Location: Alberta, Canada
Contact:

Postby Trent » Mon Jan 27, 2003 10:37 pm

You can change it by changing the CSS file itself. I am actually in the process of writing a whole bunch of CSS files for Nucleus users. If you could post the contents of your current CSS file for me, I can tell you how to change it!

Trent
Life Through The Eyes Of Trent Adams!
Guest

Postby Guest » Tue Jan 28, 2003 3:49 am

Unfortunately, I had to reinstall Nucleus and I forgot to backup my CSS file, but thats fine, I didn't change it much anyways. Here is my "new one" which I really didn't edit at all.

Code: Select all

/*
   This is the CSS stylesheet that is used for the default Nucleus skin.
   
   Here's how the pages are built up:

   (Note: the format outlined below is NOT mandatory. If you want your
    site to use another structure, edit skins and templates, and define
    your own stylesheet. The default skins and templates only serves as
    an example of how a site running Nucleus can look.)

   MAIN PAGE
   ---------

   body
     div.contents
       h1 (site title)
         h2 (date header)
           h3 (item title)
             div.itembody (item text)
             span.iteminfo (time / author / editlink / amount of comments)
     div.logo
     div.menu
       h1 (navigation, hidden link)
         h2 (menu titles)
   
   DETAILED PAGE
   -------------
   body
     div.contents
       h1 (site title)
         h2 (item title)
           div.itembody (item text)
           div.iteminfo (item info)
         h2 (comments)
           h3 (commentor name)
               div.commentbody
         h2 (add comment)
     div.logo
     div.menu   
       h1 (navigation, hidden link)
         h2 (menu titles)

   OTHER PAGES
   -----------
   
   other pages are similar, having a .contents and a .menu part
*/
 

/*
   The body definitions define how the page should globally look:
   - a small verdana, arial or font from the sans-serif family
   - black text on a white background
*/


body {
   font-family: Trebuchet MS;
   font-size: small;   
   background-color: #222222;
   color: #CCCCCC;
}

/*
   The definitions below determine how the page looks.
   
   There are 3 main div-elements, which are all positioned absolute
   (relative to the upper left corner of the screen):
   
   .contents: contains the main contents of the page.
   .menu: sidebar with menu
   .logo: logo to be displayed above the sidebar

*/

/* definitions applying to the contents block */
.contents {
   position: absolute;
   font-size: 11px;

   left: 200px;
   width: 650px;
}

/* definitions applying to the logo */
.logo {
   position: absolute;

   top: 20px;
   left: 20px;
}

.menu {
   position: absolute;

   top: 200px;
   left: 30px;
   width: 110px;

   /* use a lighter text color (grey) and a smaller font */
   color: #777;
   font-size: x-small;   
}

/*
   Definitions for headers in the menu (.menu h2), page titles (h1)
   and dateheads (.contents h2):
   - page titles are centered (within the .contents div)
   - menu headers (h2) use a small font
   - dateheads use a large font and are in a box
*/

h1 {
   text-align: center;
}

.menu h2 {
   font-size: 10px;
}

.contents h2 {
   background-color: #222;
   border: 1px solid #ccc;

   padding: 5px;
   
   font-size: 13px;

   margin-bottom: 5px;
}

/*
   Definitions for the item listings like they are done on the main page and in archives
   - h3.item is the title of an item (<h3 class="item">)
   - .itembody is the item contents
   - .iteminfo contains the time of posting and the name of the author, and the amount of comments
   
   anchors in the iteminfo (.iteminfo a) are not underlined and bold
*/

/* item title */
h3.item {
   font-size: 13px;
   margin: 0px;
   margin-top: 10px;
}

.itembody {   
   margin-top: 5px;   
   margin-bottom: 5px;
   font-size: 10px;
}

.iteminfo {   
   font-size: 12px;
   color: gray;
}

.iteminfo a {
   font-weight: bolder;
   color: #555;
   text-decoration: none;
}

/*
   Definitions of how comments listings look like on item pages
   - h3.comment contains the name of the comment author
   - .commentbody contains the text from the comment
   - .commentinfo contains the time of commenting
*/

/* comment title */
h3.comment {
   font-size: 10px;
   margin-bottom: 10px;
}

.commentbody {
   align: justify;
}

.commentinfo {   
   font-size: 10px;
   color: gray;
}


/*
   Some rules that apply to contents generated using the markup buttons
   "add left box" and "add right box"
   
   both boxes have slightly larger text, and take a maximum of 20% of
   the width of the contents.
*/

.leftbox, .rightbox {
   margin: 3px;
   padding: 3px;
   font-size: larger;
   width: 20%;
}
.leftbox {
   float: left;
   border-right: 2px solid #ccc;   
}
.rightbox {
   float: right;
   border-left: 2px solid #ccc;   
}


/*
   Some general rules:
   - images never have a border (even when they are inside a hyperlink)
   - elements having class="skip" are not shown
   - item lists using <ul class="nobullets"> have no list-item bullets
   - highlighted text (in search results) have a yellow background
*/

img {
   border: none;
}

.skip {
   display: none;
}

ul.nobullets {
   list-style: none;
   margin-left: 0px;
   padding-left: 0px;
}

.highlight {
   background-color: yellow;
}





Thanks,
Dave :D
User avatar
Trent
Nucleus Guru
Nucleus Guru
Posts: 1534
Joined: Fri Oct 04, 2002 5:08 pm
Location: Alberta, Canada
Contact:

Postby Trent » Tue Jan 28, 2003 4:22 pm

First thing, getting the menu on the right. I would change the following part of the CSS file from:

Code: Select all

/* definitions applying to the contents block */
.contents {
   position: absolute;
   font-size: 11px;

   left: 200px;
   width: 650px;
}

/* definitions applying to the logo */
.logo {
   position: absolute;

   top: 20px;
   left: 20px;
}

.menu {
   position: absolute;

   top: 200px;
   left: 30px;
   width: 110px;

   /* use a lighter text color (grey) and a smaller font */
   color: #777;
   font-size: x-small;   
}


and change it to:

Code: Select all

/* definitions applying to the contents block */
.contents {
   position: absolute;
   font-size: 11px;

   left: 30px;
   width: 650px;
}

/* definitions applying to the logo */
.logo {
   position: absolute;

   top: 20px;
   left: 20px;
}

.menu {
   position: absolute;

   top: 200px;
   left: 690px;
   width: 110px;

   /* use a lighter text color (grey) and a smaller font */
   color: #777;
   font-size: x-small;   
}


As you can see, you just play around with the pixels for each item part. The menu is the part with the login and search, with the contents being where your blog posts writing.

The search, login box and other places you imput data into a form are controlled by something not in this CSS. Just add the following code if you want to control it:

Code: Select all

input, select, textarea {
               background:#fff;
               font-family:Trebuchet MS;
               font-size: 11px;
               color: #900;
               border-color: #000;
               border-style: solid;
               border-top-width: 1px;
               border-left-width: 1px;
               border-right-width: 1px;
               border-bottom-width: 1px;   
                             
      }


You will have to change the colors to match your site. The actual search results highlighting of search words is done in this CSS with the following:

Code: Select all

.highlight {
   background-color: yellow;
}


You can change the color from yellow if you want to!

Your last question was with having index.php being your default file when you go to your domain. My domain always defaults to index.html or index.htm before index.php as well. I have had both index.html and index.php in the root folder and never had index.php loaded until I deleted index.html. It has to do with server-side file hierarchy. If you have an index.html or index.htm, rename them and only have index.php as your index file.

If it is the only file, I would say contact your server admin unless one of the other Nucleus users has a better suggestion!

Hope that helps!

Trent
Life Through The Eyes Of Trent Adams!
Pheser
Posts: 377
Joined: Tue Jan 28, 2003 7:35 pm

What i did...

Postby Pheser » Tue Jan 28, 2003 8:32 pm

I'd say you just code yourr own page, and then clear the templates and put in your own code, with some nucleus functions in it. Thats way easier then converting the look and stylesheet sof nucleus into your own design.

so just start from a scratch, then insert the nucleus <% stuff %> and there ya go.

checkout http://www.webpheser.com/project/css/style.css to see what i used to fix the style on www.webpheser.com / my page.
User avatar
Trent
Nucleus Guru
Nucleus Guru
Posts: 1534
Joined: Fri Oct 04, 2002 5:08 pm
Location: Alberta, Canada
Contact:

Postby Trent » Tue Jan 28, 2003 11:11 pm

Once people get more familiar with CSS and the Nucleus skins, I would agree 100% with you. In fact that is what I have done on all of my sites.

However, when you are first learning, it might be easier for some people to have the ability to change the look of their sites with some help. It allows them to familiarize themselves with CSS and Nucleus. :lol:

Great looking site Pheser! Nice CSS work.
Life Through The Eyes Of Trent Adams!
dackerman
Posts: 48
Joined: Sun Jan 26, 2003 1:25 am

Postby dackerman » Wed Jan 29, 2003 2:34 am

I am still confused about adding a new menu bar to the right side. How would I put this information into the Nucleus template?

I have been trying to learn CSS slowly, and noticed the for example .contents refers to the main body text, but I cannot find why it knows that .contents is the body text, and how it knows to use that style for the body text.

Can someone explain this?
dackerman
Posts: 48
Joined: Sun Jan 26, 2003 1:25 am

Postby dackerman » Wed Jan 29, 2003 2:38 am

Nevermind, I figured it out myself! :)

Thanks anyways,
Dave

Return to “Skins and Templates”