MV2120 and 5150 ssh user update

So I had to reboot my MV and found it was a bit of a pain to re-establish the ssh users. So the quick way to fix the problem after a reboot is as follows.

When you go to edit the /etc/passwd you will see something like this
joeuser:x:502:502:Linux User,,,:/:/bin/nologin

You will need to edit it so it looks more like this.
joeuser:x:502:502:Linux User,,,/:/share/1000/joeuser:/bin/sh

Not like in the original post over here. (Original joeuser:x:502:502:Linux User,,,:/share/1000/joeuser:/bin/sh) notice the extra / in User,,,/:/share

I have updated the original post as of 4/27/09 to fix the problem.

Once you have done that you will need to set the password for the user using the following command.

passwd username (username being the users password you want to set.)

Sorry for the mess up.

More On Drigg.....

Well Ive tried to post several times now on the drigg forum with no luck. It seems I can only make new posts. So all the updates I have tried to post have failed. Whatever work I do, I'll just post here.

One of the thing I wanted to share was this tidbit here.

It has some very good info!

Its basically to edit properties of block and gives a bit more insight on how things work.

Anyway..... just this short blerp for now.

Drigg Theme Re-Visited. Continued

Ok so if you have read Drigg Theme Re-Visited you'll see I left you hanging at the #header_search form input.form-submit { section to figure out.

I'll give a quick overview of the two sections I left for you to figure out.

So let's take a look at the #header_search form input.form-submit { section first.

#header_search form input.form-submit {
border: 0;
padding: 0;
background-image: url("../img/header_searchbtn.gif");
width: 30px;
height: 20px;
overflow: hidden;
text-indent: -1000em;
word-spacing: 10em;

Border:0; this section here will put a border around your search image. The default search image for drigg is the magnifying glass "header_searchbtn.gif."

I'm sure you can guess what this next part is...
background-image: url("../img/header_searchbtn.gif");

Now if you wanted you could change the default image; you would need to take a few things into thought.

You would need to possibly re-size the image you use.
Rename the image or change the code to match the image name (header_searchbtn.gif)
Set the size of the image in sections. width: 30px; height: 20px;
If the image is larger than the default, you will need to adjust the size of the search box.

Now let's take a look at text-indent: -1000em;
If we change that to 0em; you'll see part of the word "search" show up on the header_searchbtn.gif icon. The full word does not show because the header_searchbtn.gif size is set too small. If we were to increase the size in the width: 30px; section, we could get the full word to show.

Now lets look at
/* Header login and submit buttons */
#header_categories a.drigg-login,
#header_categories a.drigg-submit {
float: right;
margin-left: 10px;
display: block;
border: 1px solid #fff;
border-top: 0;
border-bottom: 0;
background-repeat: no-repeat;
background-position: top left;
height: 30px;
text-indent: -1000em;
overflow: hidden;
text-decoration: none;
outline: none;
}

This section lets us modify the "submit a story" icon and the "Login/Register" icon.
I'm not going to discuss this section as its the same as what we have been discussing above.

So let's move on...
#header_categories a.drigg-login { is the icon on the right side of the site when not logged in

#header_categories a.drigg-login {
width: 117px;
background-image: url("../img/header_loginbtn.gif");

Once again you can use your own image just make sure you adjust the pixel width
(width: 117px;)

#header_categories a.drigg-submit { Same idea as above.

#header_categories a.drigg-submit {
width: 115px;
background-image: url("../img/header_submitbtn.gif");

Moving on to #header_categories {
#header_categories {
height: 30px;
padding: 0 20px;
background: url("../img/header_categoriesbg.gif") repeat-x top left;
background-color:gray;
}

So to give an example how to mod this section I'm going to convert and use an image using paint.net from the Dreamy theme. The image I will be using is the bg-menu.png. (Take note of the pixel size)

So here is a before shot:

So once the image has been modded, I re-namded the image to header_categoriesbg.gif and placed it in the image directory with read permissions.

Now that that is done, we will slightly modify the code, but first......
The size of bg-menu.png is 700x35 so all we need is the 35.

#header_categories {
height: 35px;
padding: 0 20px;
background: url("../img/header_categoriesbg.gif") repeat-x top left;
background-color:gray;
}

That's it. All we needed to do was change height: 30px; to height: 35px; Easy ha?

Here is the after:

Yes it was a very simple and a small change, but it does what we need.

These next few sections will change the attributes of the categories. For example: If you look at the above image where it says "All", "Hydro", "Solar", and "Wind". These sections will let you modify those areas. Such as the white box around "all", the color of the words, the color of the box, and the size of all the above.

#header_categories ul {
margin: 0;
padding: 0;
list-style: none;
height: 30px;
line-height: 30px;
}
#header_categories ul li { display: inline; }
#header_categories ul li a {
float: left;
display: block;
padding: 0 0.5em;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
#header_categories ul li a.active {
margin-top: 3px;
line-height: 27px;
background: #fff;
color: #666;
text-shadow: none;
}

I'll let you play with that one.

The sections #header_subcategories { does the same as above, but for subcategories.

Lets move on to breadcrumbs

/* Header breadcrumb */
#header_breadcrumb {
clear: left;
height: 30px;
line-height: 30px;
padding: 0 20px;
font-size: 8pt;
color: #666;
border-bottom: 1px solid #e5e5e5;
}
What this section does is control this area here
I'm sure you can figure out what to do at this point.

I'm going to start telling you less on how to modify things, and start tell you what the sections do. I think at this point we should have an idea of what is needed to be done.

The section below lets you control aspects of the user menu.

/* -- Content layout ------------------------------------------------------ */
#content { padding: 20px 220px; }
#content .column {
position: relative;
float: left;
}
#content_center { width: 100%; }
#content_left {
width: 180px;
padding: 0 20px;
margin-left: -100%;
left: 220px;
}
#content > #content_left {
left: -220px;
margin-left: expression(document.all.content_center.offsetWidth * -1);
}
#content_right {
width: 180px;
padding: 0 20px;
margin-right: -220px;

Lets move on to Content styles
This area lets you control the area pictured below. (Not including the Published scoops)

/* Control bar */
#content_center div.controlbar h1 {
float: left;
line-height: 1.2em;
margin-right: 20px;
margin-bottom: 0;
}
#content_center div.controlbar ul {
margin: 0;
padding: 0;
list-style: none;
}
#content_center div.controlbar ul li { display: inline; }
#content_center div.controlbar ul.drigg-viewtype {
float: right;
font-size: 11pt;
line-height: 20pt;
}
#content_center div.controlbar ul.drigg-viewtype li a {
display: block;
float: left;
margin-left: 10px;
padding: 0px 5px 5px 5px;
}
#content_center div.controlbar ul.drigg-viewtype li.active a {
background-color: #f3f9fc;
color: #00446b;
}

#content_center div.controlbar ul.drigg-order {
background-color: #f3f9fc;
padding: 0.5em;
clear: both;
}
#content_center div.controlbar ul.drigg-order li a {
padding: 0.2em 0.5em;
margin-right: 0.5em;
}
#content_center div.controlbar ul.drigg-order li.active a {
background-color: #1b81ca;
color: #fff;
}

Well thats it for now....

Drigg Theme Re-Visited.

Well, I decided to revisit the modding of the drigg theme due to the last one not being so clear. That and every time I go to post a follow up on the drigg forum, it never shows up.
I decided I'll be working on the base.css located in /sites/all/themes/drigg_theme/css.

A Couple good links:
CSS Cheat sheet
Cheat Sheets

Note: The above links were found after I made these posts and have cleared things up a lot for me. I suggest taking a look at the CSS Cheat sheet.

I think I'll put my findings in a series or articles, as to do all of it at once could be overwhelming.

Unfortunately I have to use a windows computer to do some of the work. I'll be using paint.net to mod some art and get art info. I also downloaded and installed some plugins. (check out buttons..kinda cool!)

So one of the first things I did was set some of my configurations per this write up here.
The next thing I did was install ColorZilla firefox addon to help me with art color.

ColorZilla

I've been using ColorZilla to pull colors from web sites I like. It's very easy to use and provides all the needed info.

Here is an example:
Say I go to google.com and I like the green that is being used in the l

I click the small eyedropper in the lower left corner of firefox

Select Google and hover my mouse over the green l

Now if you look at the eyedropper, it will give you all the info you need.


I usually make note of the Hex value (#007D08) for use when I'm ready.

So....let's see what we can do with the base.css
Here is what the default Default drigg looks like.

Now let's change it.

Open base.css located in /sites/all/themes/drigg_theme/css with a good text editor. (For windows folks, I suggest Notepad++)

The first line we see is this:
/* -- Base ---------------------------------------------------------------- */
body {
margin: 0;
background-color: #fff;
font: 9pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
color: #333;
}

So if we mod the background-color: It will change the background color of the site.
For example we will use the green we pulled from google.
So lets change background-color: #fff; to background-color: #007D08;

/* -- Base ---------------------------------------------------------------- */
body {
margin: 0;
background-color: #007D08;
font: 9pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
color: #333;
}

This is what we get.

Note: All changes in each example will be marked in bold. Once each example is complete, I will manually restore the default settings. For example...The example above will be changed back to background-color: #fff;

Ok now lets change something else, like the the font size and color.
/* -- Base ---------------------------------------------------------------- */
body {
margin: 0;
background-color: #fff;
font: 15pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
color: #007D08;
}


Next line we see in the base.css is
#container {
margin: 0 auto;
min-width: 760px;
max-width: 1260px;
}
I have no idea what it is, or what it does so lets move on....shall we.

The Links area will modify most links, I'm just going to change color, and text decoration.
/* Links */
a {
color: #007D08;
text-decoration: underline; }
a:hover { text-decoration: underline; }

As you can see, it placed an underline under My Account, Users by karma, Create content, blah, blah, blah and turned them green as well as a few other things.

The next few sections I'm going to skip because once again I do not know what they do. So let's move on the the Header section and play with paint.net.

Let's add our own header art.

Note: The header section is a bit difficult to explain, but I will try my best.

One of the things I had to do was delete the header_logo.gif located in the img directory to get rid of the drig logo. You can just change the name of it if you want.

For this next part I used the sun.jpg image from the grassland theme. (pixel size 670X146)

I converted the image file from a .jpg to a .gif using paint.net. (I'll let you figure that one out. For more info look at the quick paint.net lesson below.) Take note of the pixel size of your image located in the bottom right corner.
Next I added the image to the img directory and renamed it to header_titlebg.gif
I then had to edit the Header section until I was happy with the end result.

Note: If the image does not show on your site when you place it in the img directory, make sure it has the right extension and the read permissions.

Here is a screen shot before changing the "height: 100px;" in the header section.


Now the change:
/* -- Header -------------------------------------------------------------- */
#header_title {
background: url("../img/header_titlebg.gif") repeat-x top left;
height: 146px;
padding: 0 20px;
}

Here it is with the change:


Next thing you'll notice is if you put your mouse in the top of the left corner, there is a link where your site name should be. The site name will not show even if you enable it in the themes settings. I'll get to this in a moment.

Before we go into this a bit more, please go into Administrator-Site Building-Themes
Click on configure for the drigg theme. Ensure Site name, and Site slogan are enabled. Save.

Now lets jump to this section in the base.css and look at the bold part.
#header_title h1 a {
display: block;
width: 220px;
height: 100px;
background: url("../img/header_logo.gif") no-repeat top left;
text-indent: -1000em;
overflow: hidden;
text-decoration: none;
outline: none;
}

Change text-indent: -1000em; to text-indent: 0em;
Your site name should now show up.

The problems I currently have with the site name is I don't have any idea how to move it down from the top, change the font, or change the color. Any ideas??

Note: This next section defines the box size for you site in the top left corner.

Ok...so now let's look at that section a bit more
#header_title h1 a {
display: block;
width: 220px; height: 100px;
background: url("../img/header_logo.gif") no-repeat top left;
text-indent: -1000em;
overflow: hidden;
text-decoration: none;
outline: none;
}

The two spots marked in bold control the size of the box the site name will be in. If it is too small it will cut parts of the site name. I changed mine to
width: 125px;
height: 30px;

Lets look at #header_title h1 now.
#header_title h1 {
margin: 0;
width: 220px;
height: 100px;
}
From what I can tell, if you modify the height: 100px; it will move you slogan up or down.

So on with paint.net
A quick lesson with paint.net. I'm going to mod the header_titlebg.gif, mainly because I will be deleting it to use something else when we get to that point.
I should have took screen shots of the header_categoriesbg.gif being modded but I already took the screen-shots of the header_title.gif....yeah, I messed up. So if you are following this, I would use the header_categoriesbg.gif in place of the header_titlebg.gif. (The header_categoriesbg.gif is the deep blue color where your categories area)

Start paint.net and open header_titlebg.gif located in /sites/all/themes/drigg_theme/img (in windows (\sites\all\themes\drigg_theme\img)
Once you have the file open, you will see a box in the bottom left corner that says color and has a button on it that say "More"

Click on "More".

You will notice there is an area for a hex number. I'm going to use the green we pulled from google. Once thats added the primary color will change to green. Now click on the bucket so the image can be filled. Once the bucket is clicked, dump the color on the image by clicking on the image.


Now let's save it. Make sure the dithering level and Transparency threshold is set to 0 when saving.

Lesson done.....lets move on.

Using the directions above I modified the header_categoriesbg.gif and placed it into the img directory.
I also did the same to the header_submitbtn.gif, header_searchbtn.gif, and header_loginbtn.gif.


I'm gonna skip over most of the /* Drupal Primary Links Menu */ section but give you an idea of whats going on there.

Primary links are located in the top right corner of the site. The section posted below will change the link color.
If you want to remove the underlines just replace text-decoration:underline; with text-decoration:none;

ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited {
display: block;
margin: 0 1em;
padding: .4em 0 0;
color: #00446b;
text-decoration:underline;

On to Search!

All there is to this section is moving the search box up or down, (If it is enabled in Administrator-Site Building-Themes) All you need to do that is change the "top: 30px;" value.

If you need to move it to the left of the screen change the value "float" example: float: left;

#header_search {
clear: right;
position: relative;
top: 5px;
float: right;
}

Now lets look at #header_search form input.form-text { section.

#header_search form input.form-text {
border: 0;
background-color: #fff;
height: 17px;
width: 139px;
margin-right: 1px;
padding: 1px 0 0 1px;
border: 1px solid #66a6c8;
color: #333;
outline: none;
}

This area lets you modify a lot of things on the search box.

background-color: #fff; If you change this it will change the color inside the search box

The height and width section lets you control the size of the search box its self.
height: 17px;
width: 139px;

border: 1px solid #66a6c8; hmm how to explain this....well there is a 1pixel box that is wrapped around the search box. You can increase the size of that box and change the color of it.

color: #333; lets you change the color of the text being entered into the search.

Lets look at #header_search p { a moment

#header_search p {
clear: left;
margin: 0;
text-align: right; If you modify this section, the text will aligned to the left or right inside the search box.
font-size: 8pt;
}

The following two sections below are a lot like the #header_title h1 a { section posted above, so I'm not going to spend any time on this.

The #header_search form input.form-submit { controls the submit button for search.
#header_search form input.form-submit {
border: 0;
padding: 0;
background-image: url("../img/header_searchbtn.gif");
width: 30px;
height: 20px;
overflow: hidden;
text-indent: -1000em;
word-spacing: 10em;
}

/* Header login and submit buttons */
#header_categories a.drigg-login,
#header_categories a.drigg-submit {
float: right;
margin-left: 10px;
display: block;
border: 1px solid #fff;
border-top: 0;
border-bottom: 0;
background-repeat: no-repeat;
background-position: top left;
height: 30px;
text-indent: -1000em;
overflow: hidden;
text-decoration: none;
outline: none;
}

Once you play around with this stuff a while, you start to see a pattern and have a good idea what each section will do just by looking at it.

I'm gonna stop here and I'll return in a day or two with some more stuff. If you have questions, feel free to ask. I don't know how much help I'll be, but I have no problem trying to help you.