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.
Showing posts with label drupal. Show all posts
Showing posts with label drupal. Show all posts
Sunday, April 19, 2009
Saturday, April 4, 2009
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.
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.
Monday, March 23, 2009
Drigg Themes
So I have been playing around with drigg and need a new theme for the site I'm messing with. A few things I have noticed - the forums are very, very slow; so help is limited from there. The other thing is there is no real direction on how to port, or modify themes. I found this little tidbit over here but makes absolutely no sense to me. I also found this here that helped a bit, but not everything I was looking for.
So what I have been doing is taking the default drigg theme and modding it.
Note: All these mods will effect the front page attributes.
One of the first problems I had was the art. I tried to use the gimp but could not achieve what I wanted. Unfortunately I had to use a windows machine (it hurt a lot) and install paint.net.
Because I know nothing about art, I needed something brain dead easy....seems paint.net did it.
So to start, I played around a little by changing the header_titlebg.gif with a different image. Well, needless to say it took me a while to realize I had to change the format of the image to a gif. Once I did that, all went well.
Once I uploaded the new header_titlebg.gif, I noticed I couldn't get rid of the drigg logo. I tried to uncheck the logo box from Admin/site build/themes on the drigg theme, and under the global settings, but it wouldn't go away. So I decided to just delete the header_logo.gif....that seemed to work.
My next problem was the new header_titlebg.gif wasnt being shown correctly. A lot of the image was being covered by the header_categoriesbg.gif.
I solved that problem by editing the base.css file in the bold section below.
Note: In order to correctly see this, you need to know the hight pixel size of the image you are using.
/* -- Header -------------------------------------------------------------- */
#header_title {
background: url("../img/header_titlebg.gif") repeat-x top left;
height: 145px;
padding: 0 20px;
}
Next thing I wanted to do was move the Search box a little.
NOTE: The search box will only be available if you have enabled the search module, and enabled search in the themes section as well.
Once again I had to edited the base.css in the section that is bold.
Note: this section will just move the search box up or down, if you need to move it left of the screen change the value "float" example: float: left;
#header_search {
clear: right;
position: relative;
top: 5px;
float: right;
}
If you need to move the slogan up or down edit the section (You would think height would be the height of the slogan)
#header_title h1 {
margin: 0;
width: 220px;
height: 100px;
}
If you are uploading a new logo, edit the width and height to match you logos pixel size.
#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;
One other thing I waned to change was to remove the drigg icon
in the left bottom corner. I ended up deleting it from the img directory. Once thats done I notice a link that says "Drigg" in that same spot.
If you want to modify that you can edit the page.tpl.php in the footer section below
<div id="footer">
<?php print $footer_message; ?>
<a href="http://www.drigg-code.org"><img src="<?php print path_to_theme()?>/img/drigg_80_15.gif" alt="Drigg" /></a>
</div> <!-- /footer -->
Color Changing
These are some areas in the base.css file that can be changed to set colors for different parts of the page.
NOTE: If you need a tool for your color in hex look here
Background color of the site
/* -- Base ---------------------------------------------------------------- */
body {
margin: 0;
background-color: #fff;
Font Color of story summary on front page, notice you can change the font size (font:9pt) as well
/* -- Base ---------------------------------------------------------------- */
body {
margin: 0;
background-color: #fff;
font: 9pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
color: #333;
}
Menu links such as "My Account", "Users by karma", "Create Content", "Log Out"
/* Links */
a {
color: #CBE50A;
text-decoration: none;
With the code below you can set the size and the color of the fine line that runs under "Home>>Scoops" that is below the header_categoriesbg.gif
/* Header breadcrumb */
#header_breadcrumb {
clear: left;
height: 30px;
line-height: 30px;
padding: 0 20px;
font-size: 8pt;
color: #666;
border-bottom: 1px solid #1b81ca;
}
Now onto the blocks.css
To change the attributes of the users name that is in the left corner of the screen just above "My Account"
we would change the settings listed below.
.block { margin-bottom: 2.5em; }
.block h2 {
font-size: 12pt;
color: #00446b;
letter-spacing: -1px;
margin-top: 0.4em;
}
To change the attributes of the lines that are under the "My Account", "Users by karma", "Create Content", "Log Out"
we would change
.block ul li, .block ol li {
border-bottom: 1px solid #e5e5e5;
padding: 0.2em 0;
}
nodes.css
To change the attributes of the user information that sits below the story the user submitted, (Created by User 3 weeks 4 days ago – Made popular 3 weeks 4 days ago
Category: Tech Tags install itechtalk.com Windows 7 Solar you would edit.)
Note: Your will look a little different.
You would edit:
/* -- Base node ----------------------------------------------------------- */
.node {
clear: both;
padding: 15px 0;
margin: 0.5em 0 0.3em 0;
}
.node h2.title { margin: 0; }
/* Content */
.node .content { margin: 1.5em 0; }
/* Story data */
.node .storydata {
font-size: 8pt;
color: #888;
}
#content_center .node .storydata a { color: #666; }
To change attributes of the "Add New Comment" and the Vote edit:
/* Links */
.node div.links {
clear: left;
font-size: 8pt;
}
To change the font color of the link next to the submitted story (The link that is directly under the Title of the submitted story, and next to the image of the number of votes)
/* Karma box, offset box and story */
.node.ntype-drigg .karma_3_big,
.node.ntype-drigg .karma_4_big { float: left; }
.node.ntype-drigg .offset { margin-left: 60px; }
.node.ntype-drigg h2 { margin: 0; }
.node.ntype-drigg a { color: #005a8e; }
.node.ntype-drigg a:visited { color: #7facc6; }
.node.ntype-drigg .story * { display: inline; }
.node.ntype-drigg .story small a { color: #666; }
.node.ntype-drigg .story p { margin: 0; }
That's all I have figured out so far, so if anyone has anything they want to add, please post it to the drigg theming forum.
So what I have been doing is taking the default drigg theme and modding it.
Note: All these mods will effect the front page attributes.
One of the first problems I had was the art. I tried to use the gimp but could not achieve what I wanted. Unfortunately I had to use a windows machine (it hurt a lot) and install paint.net.
Because I know nothing about art, I needed something brain dead easy....seems paint.net did it.
So to start, I played around a little by changing the header_titlebg.gif with a different image. Well, needless to say it took me a while to realize I had to change the format of the image to a gif. Once I did that, all went well.
Once I uploaded the new header_titlebg.gif, I noticed I couldn't get rid of the drigg logo. I tried to uncheck the logo box from Admin/site build/themes on the drigg theme, and under the global settings, but it wouldn't go away. So I decided to just delete the header_logo.gif....that seemed to work.
My next problem was the new header_titlebg.gif wasnt being shown correctly. A lot of the image was being covered by the header_categoriesbg.gif.
I solved that problem by editing the base.css file in the bold section below.
Note: In order to correctly see this, you need to know the hight pixel size of the image you are using.
/* -- Header -------------------------------------------------------------- */
#header_title {
background: url("../img/header_titlebg.gif") repeat-x top left;
height: 145px;
padding: 0 20px;
}
Next thing I wanted to do was move the Search box a little.
NOTE: The search box will only be available if you have enabled the search module, and enabled search in the themes section as well.
Once again I had to edited the base.css in the section that is bold.
Note: this section will just move the search box up or down, if you need to move it left of the screen change the value "float" example: float: left;
#header_search {
clear: right;
position: relative;
top: 5px;
float: right;
}
If you need to move the slogan up or down edit the section (You would think height would be the height of the slogan)
#header_title h1 {
margin: 0;
width: 220px;
height: 100px;
}
If you are uploading a new logo, edit the width and height to match you logos pixel size.
#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;
One other thing I waned to change was to remove the drigg icon
in the left bottom corner. I ended up deleting it from the img directory. Once thats done I notice a link that says "Drigg" in that same spot.If you want to modify that you can edit the page.tpl.php in the footer section below
<div id="footer">
<?php print $footer_message; ?>
<a href="http://www.drigg-code.org"><img src="<?php print path_to_theme()?>/img/drigg_80_15.gif" alt="Drigg" /></a>
</div> <!-- /footer -->
Color Changing
These are some areas in the base.css file that can be changed to set colors for different parts of the page.
NOTE: If you need a tool for your color in hex look here
Background color of the site
/* -- Base ---------------------------------------------------------------- */
body {
margin: 0;
background-color: #fff;
Font Color of story summary on front page, notice you can change the font size (font:9pt) as well
/* -- Base ---------------------------------------------------------------- */
body {
margin: 0;
background-color: #fff;
font: 9pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
color: #333;
}
Menu links such as "My Account", "Users by karma", "Create Content", "Log Out"
/* Links */
a {
color: #CBE50A;
text-decoration: none;
With the code below you can set the size and the color of the fine line that runs under "Home>>Scoops" that is below the header_categoriesbg.gif
/* Header breadcrumb */
#header_breadcrumb {
clear: left;
height: 30px;
line-height: 30px;
padding: 0 20px;
font-size: 8pt;
color: #666;
border-bottom: 1px solid #1b81ca;
}
Now onto the blocks.css
To change the attributes of the users name that is in the left corner of the screen just above "My Account"
we would change the settings listed below.
.block { margin-bottom: 2.5em; }
.block h2 {
font-size: 12pt;
color: #00446b;
letter-spacing: -1px;
margin-top: 0.4em;
}
To change the attributes of the lines that are under the "My Account", "Users by karma", "Create Content", "Log Out"
we would change
.block ul li, .block ol li {
border-bottom: 1px solid #e5e5e5;
padding: 0.2em 0;
}
nodes.css
To change the attributes of the user information that sits below the story the user submitted, (Created by User 3 weeks 4 days ago – Made popular 3 weeks 4 days ago
Category: Tech Tags install itechtalk.com Windows 7 Solar you would edit.)
Note: Your will look a little different.
You would edit:
/* -- Base node ----------------------------------------------------------- */
.node {
clear: both;
padding: 15px 0;
margin: 0.5em 0 0.3em 0;
}
.node h2.title { margin: 0; }
/* Content */
.node .content { margin: 1.5em 0; }
/* Story data */
.node .storydata {
font-size: 8pt;
color: #888;
}
#content_center .node .storydata a { color: #666; }
To change attributes of the "Add New Comment" and the Vote edit:
/* Links */
.node div.links {
clear: left;
font-size: 8pt;
}
To change the font color of the link next to the submitted story (The link that is directly under the Title of the submitted story, and next to the image of the number of votes)
/* Karma box, offset box and story */
.node.ntype-drigg .karma_3_big,
.node.ntype-drigg .karma_4_big { float: left; }
.node.ntype-drigg .offset { margin-left: 60px; }
.node.ntype-drigg h2 { margin: 0; }
.node.ntype-drigg a { color: #005a8e; }
.node.ntype-drigg a:visited { color: #7facc6; }
.node.ntype-drigg .story * { display: inline; }
.node.ntype-drigg .story small a { color: #666; }
.node.ntype-drigg .story p { margin: 0; }
That's all I have figured out so far, so if anyone has anything they want to add, please post it to the drigg theming forum.
Friday, March 20, 2009
Calling All Drupal Lovers....
So I started to play with Drupal by building the Naturestechnology site. I have a lot of ideas I'd like to implement on the site, so the process is slow because I'm learning as I'm doing.
One of the things I'd like to implement is a social site. After looking around for a while it came down to Pligg and Drigg. I decided to go with Drigg, as it would allow me to use my existing database.
NOTE: This post is not about Drigg as much as its about theming.
One of the problems I have is theming.....I have no Idea how to do the art. So I set off to see if there were any assistance programs out there. That is when I found Artisteer. I decided to see if anyone in the Drupal community has used it and that is when I found this thread.
It looks as if the program is not perfect and has a few problem, so I decided to write Artisteer and ask them about the thread posted above.
This was the reply:
"Hello,
Sounds promising, however if you visit Artisteers drupal forum you'll see support is a bit slow. However once again to their credit....not many posts are in there.
So I decide to download and play with the software. It seems to be straightforward and fairly easy. Within minutes I created a basic new theme.
It's a bummer, its only made for Windows and not Linux :(
I plan on playing with it a bit more to see how well it will work with Naturestechnology.
As you tell Naturestechnology themes are stock and not very original. Currently I don't have the time to learn how to theme and would like something with my own touch. If Artisteer can provide me with that, then maybe Artisteer is just what I'm looking for.
Has anyone out there used it, and what's your thoughts?
If there is anyone out there who would like to help me Develop/Maintain/design Naturestechnology, drop me a line.
One of the things I'd like to implement is a social site. After looking around for a while it came down to Pligg and Drigg. I decided to go with Drigg, as it would allow me to use my existing database.
NOTE: This post is not about Drigg as much as its about theming.
One of the problems I have is theming.....I have no Idea how to do the art. So I set off to see if there were any assistance programs out there. That is when I found Artisteer. I decided to see if anyone in the Drupal community has used it and that is when I found this thread.
It looks as if the program is not perfect and has a few problem, so I decided to write Artisteer and ask them about the thread posted above.
This was the reply:
"Hello,
Thank you for your interest in Artisteer.
Yes, our product creates universal Drupal themes that work with both Drupal 5 and Drupal 6.
We've only resolved an issue with Drupal 6.10 (not 6.1 or any other version) and we do work with our customers to resolve any specific problems that they report to us.
A patch will also be available within 1-2 weeks for any issues reported directly to us."
Sounds promising, however if you visit Artisteers drupal forum you'll see support is a bit slow. However once again to their credit....not many posts are in there.
So I decide to download and play with the software. It seems to be straightforward and fairly easy. Within minutes I created a basic new theme.
It's a bummer, its only made for Windows and not Linux :(
I plan on playing with it a bit more to see how well it will work with Naturestechnology.
As you tell Naturestechnology themes are stock and not very original. Currently I don't have the time to learn how to theme and would like something with my own touch. If Artisteer can provide me with that, then maybe Artisteer is just what I'm looking for.
Has anyone out there used it, and what's your thoughts?
If there is anyone out there who would like to help me Develop/Maintain/design Naturestechnology, drop me a line.
Thursday, March 19, 2009
I'm Still Around....I'm not dead yet.....
It's been a little while since my last post. This is just a quick update to let you all know I'm still around. I just have a lot going on lately.
I have a few projects that I have been working on that I will post about in a few days. Might not be as exciting as the phone and MediaVault, however I still think this project will be of interest to some people.
Seeing how Google has just released google voice, I may have to re-visit my phone project and see if I still need skype.....In theory, I may not need the pico to run siptheeskype....We'll see.
Just to give a small hint of what I have been playing with on and off .....I have secretly been working on a Drupal site (Naturestechnology)....but don't tell anyone.
There are a few things I've found that I'll post about for all the Drupal lovers out there, but it will take a couple of days.
Well until then.....have fun!!
I have a few projects that I have been working on that I will post about in a few days. Might not be as exciting as the phone and MediaVault, however I still think this project will be of interest to some people.
Seeing how Google has just released google voice, I may have to re-visit my phone project and see if I still need skype.....In theory, I may not need the pico to run siptheeskype....We'll see.
Just to give a small hint of what I have been playing with on and off .....I have secretly been working on a Drupal site (Naturestechnology)....but don't tell anyone.
There are a few things I've found that I'll post about for all the Drupal lovers out there, but it will take a couple of days.
Well until then.....have fun!!
Wednesday, February 11, 2009
Drupal: Build a Multiple site on a local Ubuntu Machine
When I first started to play around drupal, I was going nuts trying to understand how to get things to work. It took me a long time to get the multi-site one code base to work, just to find out using multiple sites would be better for me. Now that I have a clue of how to do a Multiple site with a shared database, I thought I would write a quick "how-to" so others could give it a go.
Now remember..these are just the basic settings to get you up and running.
Starting fresh on a Unbuntu 8.10 system
So here we go.....First thing you need is a LAMP server.
Go to synaptic, click on edit and click on "Mark Package by Task". Select "LAMP Server" click ok.
Once LAMP is selected, do a search for phpmyadmin (NOT USING "Mark Package by Task") Once those two things are selected, click apply.
During the install you will be asked for a couple of things.
You will be asked to create a password for mysql (make sure you remember it, it will be for the root user)
You will also be asked what web-server to configure. Choose "Apache2"
Now go over here http://www.webmin.com/download.html and download webmin. The download should be under this "Debian package suitable for Debian, Ubuntu or other derived Linux"
Once you have it downloaded, install it by clicking on it....nothing special..
Download drupal http://drupal.org/ and extract the contents. Place the directory you just extract into /var/www (you may want to rename the directory to something else, whatever you need. (My example will be site, site1, site2, etc.)( Name the directory the sites name)
NOTE: I extracted the contents to my desktop, and renamed it to site. Once it was renamed I placed it into /var/www/
I then went back to my desktop and renamed that same directory site1 and copied that into /var/www
I then went back to my desktop and renamed the directory to site2 and copied that into /var/www
So all I did was make multiple copies of the directory, but gave each one a different name.
So the directory structure in /var/www hold
site
site1
site2
on so on.
Hint: If you have problem placing the directory or editing files try this....
In a terminal
sudo Nautilus
Nautilus should open once you enter your password in the terminal from the above command. That Nautilus session is now in sudo, so you should be able to move things around and edit files without too many problems.
Now that that is done, a couple link you need to know about....
To access phpmyadmin http://localhost/phpmyadmin
phpmyadmin is a web interface to administer your databases
To access webmin https://localhost:10000/
Webmin is a web interface to help you administer you machine. We will be using it to configure Apache.
So let's start!
We will be using site.com, and site1.com, etc. as the url's. We will now need to edit our host file.
Edit the host file.
sudo gedit /etc/hosts
Add this line just below the 127.0.0.1 addresses in the host file
127.0.0.1 site.com
127.0.0.1 site1.com
127.0.0.1 site2.com
127.0.0.1 site3.com
and so on...
Save and exit
Now for drupal
You should have the drupal directory you extracted and renamed from the step above in /var/www/
Next "copy" the "default.settings.php" located in /var/www/site/sites/default to a temporary place. Once you have it copied it to a temporary place, rename it to "settings.php"
copy that settings.php into each sites sites/default
example:
/var/www/site/sites/default/settings.php
/var/www/site/sites1/default/settings.php
/var/www/site/sites2/default/settings.php
/var/www/site/sites3/default/settings.php
Now go into phpmyadmin http://localhost/phpmyadmin and create a new database called site, site1, site2, site3 and shared_tables
Log on to phpmyadmin
Where it says "Create new database", enter "site" and click "Create"
Once the database is created, click the home icon (the house icon on the top left)
Now create a second database called "site1" using the same process as above.
continue for each site you need
The last database should be shared_tables
Now lets configure Apache
Go into Webmin https://localhost:10000/ (you will need yo enter your user name and password, not root)
Click on "Servers"
Click "Apache Webserver"
Click on "Configure Apache Moudules"
In the right column click "rewrite", and "vhost_alias"
On the bottom of the page click "Enable Selected Modules"
Now on to Virtual Hots.
Create your virtual host as normal.
So go into Webmin-servers-Apache Webserver. Click on Create virtual host.
Click on "Specific Address" and enter 127.0.0.1
Port click on the third radio/radial button (whatever its called) enter 80 for the value
Document root: Browse to where the site folder is. /var/www/site
Server Name click the second radio/radial button and enter the sites name. site.com
Click "Create Now"
Once created and applied go into /etc/apache2/sites-available
You will see a files with the names for you virtual hosts.
Example: site.com.conf
Now if needed open the file and change the line
DocumentRoot /var/www/site
to
DocumentRoot "/var/www/site"
While your in there do this also:
Under DocumentRoot "/var/www/site"
add this
AllowOverride All
Example of what it should look like:
Seems google filters the first line
That should take care of Clean URLs
Save the file
Do the above for each site
Restart Apache.
Back to Drupal.
Now open your browser and enter http://site.com for the URL
You can now run the installer for your main site.
When at the screen asking for the database, enter "site"
Enter "root" for the user name, and the password you created during the install. The rest should be easy.
Once that is complete go to http://site1.com, run the installer for the second site.
Once that is complete you will have multiple sites running. Now we want to share a few tables between them.
Log onto phpmyadmin
Export these tables from your main site.
authmap
profile_fields
profile_values
role
sessions
users
vocabulary
vocabulary_node_types
term_data
term_hierarchy
term_node
term_relation
term_synonym
All of the tables may not be in the database. Export the ones that are.
Note: If you need to know how to export read below.
Once they have been exported, import them into the shared_tables database
Once the tables have been imported, you will need to drop the listed tables from the other databases. (site, site1, site2)
authmap
profile_fields
profile_values
role
sessions
users
vocabulary
vocabulary_node_types
term_data
term_hierarchy
term_node
term_relation
term_synonym
Once the tables have been dropped, add the following to each sites settings.php just below
$db_url = 'mysqli://root:password@localhost/site';
changing password for your password, and site for each database name.
$db_prefix = array(
'default' => '',
'authmap' => 'shared_tables.',
'profile_fields' => 'shared_tables.',
'profile_values' => 'shared_tables.',
'role' => 'shared_tables.',
'sessions' => 'shared_tables.',
'users' => 'shared_tables.',
'vocabulary' => 'shared_tables.',
'vocabulary_node_types' => 'shared_tables.',
'term_data' => 'shared_tables.',
'term_hierarchy' => 'shared_tables.',
'term_node' => 'shared_tables.',
'term_relation' => 'shared_tables.',
'term_synonym' => 'shared_tables.',
);
Save each file.
If your databases have different user names and passwords try replacing
with something like this
If all went well, you will now be sharing user and Taxonomy information across sites.
Database info.
A couple things good to know.
Once your is site set up the way you want, you may want to export your databases. The reason for this is there are people who will tweak and brake things. So if you export your database you can simply just re-import it and get you site back up in moments.
To export look here http://drupal.org/node/81993
To import look here http://drupal.org/node/81995 (be for you try to import, read below)
Now when you try to importing the database you will run into a few errors. To overcome these you will need to edit /etc/php5/apache2/php.ini
Look for: "memory_limit = 16M"
Change the 16M limit to 64M or 128M
Also uncomment "upload_tmp_dir" and save. Re-start Apache (sudo apache2ctl restart) You should now be able to import with out any problems.
To give you the "simple" run down on how to import the database, do this.
logon to phpmyadmin. Click on the database name you want to import (left side) (or if you want to import to a new database, create the new database, the click the database name on the left.
Once you have clicked on the database name click "import" (top middle of screen)
Click browse and browse to where your backup file is (ends with .sql if you did the export for the how to above)
click "Go"...thats it, its imported.
This is my first rev for this. I will be improving it as I go along. One other thing I'd like to be able to do, but don't know how yet, is share primary and secondary links.
Now remember..these are just the basic settings to get you up and running.
Starting fresh on a Unbuntu 8.10 system
So here we go.....First thing you need is a LAMP server.
Go to synaptic, click on edit and click on "Mark Package by Task". Select "LAMP Server" click ok.
Once LAMP is selected, do a search for phpmyadmin (NOT USING "Mark Package by Task") Once those two things are selected, click apply.
During the install you will be asked for a couple of things.
You will be asked to create a password for mysql (make sure you remember it, it will be for the root user)
You will also be asked what web-server to configure. Choose "Apache2"
Now go over here http://www.webmin.com/download.html and download webmin. The download should be under this "Debian package suitable for Debian, Ubuntu or other derived Linux"
Once you have it downloaded, install it by clicking on it....nothing special..
Download drupal http://drupal.org/ and extract the contents. Place the directory you just extract into /var/www (you may want to rename the directory to something else, whatever you need. (My example will be site, site1, site2, etc.)( Name the directory the sites name)
NOTE: I extracted the contents to my desktop, and renamed it to site. Once it was renamed I placed it into /var/www/
I then went back to my desktop and renamed that same directory site1 and copied that into /var/www
I then went back to my desktop and renamed the directory to site2 and copied that into /var/www
So all I did was make multiple copies of the directory, but gave each one a different name.
So the directory structure in /var/www hold
site
site1
site2
on so on.
Hint: If you have problem placing the directory or editing files try this....
In a terminal
sudo Nautilus
Nautilus should open once you enter your password in the terminal from the above command. That Nautilus session is now in sudo, so you should be able to move things around and edit files without too many problems.
Now that that is done, a couple link you need to know about....
To access phpmyadmin http://localhost/phpmyadmin
phpmyadmin is a web interface to administer your databases
To access webmin https://localhost:10000/
Webmin is a web interface to help you administer you machine. We will be using it to configure Apache.
So let's start!
We will be using site.com, and site1.com, etc. as the url's. We will now need to edit our host file.
Edit the host file.
sudo gedit /etc/hosts
Add this line just below the 127.0.0.1 addresses in the host file
127.0.0.1 site.com
127.0.0.1 site1.com
127.0.0.1 site2.com
127.0.0.1 site3.com
and so on...
Save and exit
Now for drupal
You should have the drupal directory you extracted and renamed from the step above in /var/www/
Next "copy" the "default.settings.php" located in /var/www/site/sites/default to a temporary place. Once you have it copied it to a temporary place, rename it to "settings.php"
copy that settings.php into each sites sites/default
example:
/var/www/site/sites/default/settings.php
/var/www/site/sites1/default/settings.php
/var/www/site/sites2/default/settings.php
/var/www/site/sites3/default/settings.php
Now go into phpmyadmin http://localhost/phpmyadmin and create a new database called site, site1, site2, site3 and shared_tables
Log on to phpmyadmin
Where it says "Create new database", enter "site" and click "Create"
Once the database is created, click the home icon (the house icon on the top left)
Now create a second database called "site1" using the same process as above.
continue for each site you need
The last database should be shared_tables
Now lets configure Apache
Go into Webmin https://localhost:10000/ (you will need yo enter your user name and password, not root)
Click on "Servers"
Click "Apache Webserver"
Click on "Configure Apache Moudules"
In the right column click "rewrite", and "vhost_alias"
On the bottom of the page click "Enable Selected Modules"
Now on to Virtual Hots.
Create your virtual host as normal.
So go into Webmin-servers-Apache Webserver. Click on Create virtual host.
Click on "Specific Address" and enter 127.0.0.1
Port click on the third radio/radial button (whatever its called) enter 80 for the value
Document root: Browse to where the site folder is. /var/www/site
Server Name click the second radio/radial button and enter the sites name. site.com
Click "Create Now"
Once created and applied go into /etc/apache2/sites-available
You will see a files with the names for you virtual hosts.
Example: site.com.conf
Now if needed open the file and change the line
DocumentRoot /var/www/site
to
DocumentRoot "/var/www/site"
While your in there do this also:
Under
AllowOverride All
Example of what it should look like:
DocumentRoot "/var/www/site" AllowOverride All allow from all Options +Indexes < /Directory >ServerName site.com< /VirtualHost >That should take care of Clean URLs
Save the file
Do the above for each site
Restart Apache.
Back to Drupal.
Now open your browser and enter http://site.com for the URL
You can now run the installer for your main site.
When at the screen asking for the database, enter "site"
Enter "root" for the user name, and the password you created during the install. The rest should be easy.
Once that is complete go to http://site1.com, run the installer for the second site.
Once that is complete you will have multiple sites running. Now we want to share a few tables between them.
Log onto phpmyadmin
Export these tables from your main site.
authmap
profile_fields
profile_values
role
sessions
users
vocabulary
vocabulary_node_types
term_data
term_hierarchy
term_node
term_relation
term_synonym
All of the tables may not be in the database. Export the ones that are.
Note: If you need to know how to export read below.
Once they have been exported, import them into the shared_tables database
Once the tables have been imported, you will need to drop the listed tables from the other databases. (site, site1, site2)
authmap
profile_fields
profile_values
role
sessions
users
vocabulary
vocabulary_node_types
term_data
term_hierarchy
term_node
term_relation
term_synonym
Once the tables have been dropped, add the following to each sites settings.php just below
$db_url = 'mysqli://root:password@localhost/site';
changing password for your password, and site for each database name.
$db_prefix = array(
'default' => '',
'authmap' => 'shared_tables.',
'profile_fields' => 'shared_tables.',
'profile_values' => 'shared_tables.',
'role' => 'shared_tables.',
'sessions' => 'shared_tables.',
'users' => 'shared_tables.',
'vocabulary' => 'shared_tables.',
'vocabulary_node_types' => 'shared_tables.',
'term_data' => 'shared_tables.',
'term_hierarchy' => 'shared_tables.',
'term_node' => 'shared_tables.',
'term_relation' => 'shared_tables.',
'term_synonym' => 'shared_tables.',
);
Save each file.
If your databases have different user names and passwords try replacing
with something like this
$db_url['default'] = 'mysql://root:password@localhost/site';
$db_url['site1db'] = 'mysql://user:password@localhost/site1db';Database info.
A couple things good to know.
Once your is site set up the way you want, you may want to export your databases. The reason for this is there are people who will tweak and brake things. So if you export your database you can simply just re-import it and get you site back up in moments.
To export look here http://drupal.org/node/81993
To import look here http://drupal.org/node/81995 (be for you try to import, read below)
Now when you try to importing the database you will run into a few errors. To overcome these you will need to edit /etc/php5/apache2/php.ini
Look for: "memory_limit = 16M"
Change the 16M limit to 64M or 128M
Also uncomment "upload_tmp_dir" and save. Re-start Apache (sudo apache2ctl restart) You should now be able to import with out any problems.
To give you the "simple" run down on how to import the database, do this.
logon to phpmyadmin. Click on the database name you want to import (left side) (or if you want to import to a new database, create the new database, the click the database name on the left.
Once you have clicked on the database name click "import" (top middle of screen)
Click browse and browse to where your backup file is (ends with .sql if you did the export for the how to above)
click "Go"...thats it, its imported.
This is my first rev for this. I will be improving it as I go along. One other thing I'd like to be able to do, but don't know how yet, is share primary and secondary links.
Subscribe to:
Posts (Atom)