Joomla Templates Club 406,261 posts

[jamesac Friend jamesacJoin date: July 2006Posts: 40Downloads:0Uploads:1]

#116874

Ok, since Oxygen is one of the only themes I’ve found that doesn’t break the CSS of the Regulus theme (edit: when wrapped), I decided to tinker with the CSS and a few other things to get it to fit in a little better. I wasn’t planning on posting this, but I thought others could use the help.

This is for oxygen11rc2 which is available here:
http://themes.simplemachines.org/index.php?lemma=2

Ok, first I edited the style.css located in <SMF Forum Folder>/Themes/oxygen11rc2/

BACK IT UP cuz lord knows I don’t always know what I’m doin.

Here is what I changed it to (this is all the CSS code):


/* Normal, standard links. */
a:link
{
color: #004C80;
text-decoration: none;
}
a:visited
{
color: #004C80;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
color: #004C80;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
font-family: "Lucida Grande", "Trebuchet MS", Arial, sans-serif;
color: #004C80;
text-decoration: none;
}
a.nav:hover
{
font-weight: bold;
color: #cc3333;
text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
empty-cells: show;
}

/* By default (td, body..) use Tahoma in black. */
body, td
{
color: #000000;
font-size: small;
font-family: "Lucida Grande", "Trebuchet MS", Arial, sans-serif;
}

/* The main body of the entire forum. */
body
{
background-color: #727272;
margin: 0px;
padding: 0px;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
font-size: 9pt;
color: #000000;
font-family: "Lucida Grande", "Trebuchet MS", Arial, sans-serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
font-size: 8pt;
font-weight: normal;
color: #000000;
font-family: "Lucida Grande", "Trebuchet MS", Arial, sans-serif;
}

/* Standard horizontal rule.. (, etc.) */
hr, .hrcolor
{
height: 1px;
border: 0;
color: #666666;
background-color: #666666;
}

/* A quote, perhaps from another post. */
.quote
{
color: #000000;
background-color: #e1f2c6;
border: 1px solid #ffffff;
margin: 1px;
padding: 1px;
font-size: x-small;
}

/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #cccccc;
border: 1px solid #000000;
padding: 1px;
font-family: "courier new", helvetica, "times new roman", serif;
font-size: x-small;
width: 99%;
margin: 1px auto 1px auto;
white-space: nowrap;
overflow: auto;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
}

/* Generally, those [?] icons. This makes your cursor a help icon. */
.help
{
cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
width: 96%;
}

/* Highlighted text - such as search results ;). */
.highlight
{
background-color: yellow;
font-weight: bold;
color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
color: #000000;
background-color: #fafdf4;
}
.tpwindowbg
{
color: #000000;
}
.windowbg2
{
color: #000000;
background-color: #ebf0e4;
}

/* All the signatures used in the forum. If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg a:link, .titlebg a:visited, .titlebg2, tr.titlebg2 th, tr.titlebg2 td, .titlebg2 a:link, .titlebg2 a:visited
{
color: #000000;
font-style: normal;
font-weight: bold;
background-color: #deeec3;
}
.titlebg a:hover
{
color: #900000;
}
/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.tptitlebg, tr.tptitlebg td, .tptitlebg a:link, .tptitlebg a:visited
{
color: #000070;
font-style: normal;
font-weight: bold;
}
.titlebg a:hover
{
color: #900000;
}

/* This is used for categories, page indexes, and several other areas in the forum. */
.catbg, .catbg3
{
background-color: #daedb9;
}

/* This is used for a category that has new posts in it... to make it light up. */
.catbg2
{
background-color: #d6efab;
}
.myheader
{
background-color: #ffffff;
background-repeat: no-repeat;
color: #b0b0b0;
font-size: 24px;
vertical-align: middle;
padding-right: 25px;
}

.catbg, .catbg2, .catbg3
{
font-weight: bold;
color: #000000;
}
.catbg3
{
font-weight: bold;
color: #000000;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
background-color: #d6efac;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
background-color: #ffffff;
border: 1px solid #deedc4;
}

/* FINISHED */

.tborder2
{
background-color: #f3fce4;
border: 1px solid #d0d0d0;
border-bottom: 0px;
padding-bottom: 0px;
}
.tptborder
{
background-color: #f3fce4;
border: 1px solid #c0c0c0;

}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
font-size: x-small;
font-family: Tahoma, arial, helvetica, serif;
}
.normaltext
{
font-size: small;
}
.largetext
{
font-size: large;
}

/* And this is the bottom, where the copyright is, etc. */
#footerarea
{
color: black;
padding: 8px;
margin-top: 10px;
border: solid 1px #d8d8d8;
background-color: #ffffff;
}
#bodyarea
{
border: solid 1px #d8d8d8;
padding: 4px;
padding-top: 0px;
color: black;
background-color: #ffffff;

}

/* This is for the special header boxes on the top (user info, key stats, news box.) */
.headertitles
{
background-color: #6B8EAE;
border: 1px solid #6B8EAE;
}
.headerbodies
{
border: 1px solid #7A7777;
background-color: #ffffff;
background-repeat: repeat-x;
background-position: bottom;
}
#bbhome
{
background-image: url(images/english/back/home.gif);
background-repeat: no-repeat;
background-position:0 -24px;
border-width:0;
position: relative;
float: left;
}
#bbforum
{
background-image: url(images/english/back/forum.gif);
background-repeat: no-repeat;
background-position:0 -24px;
border-width:0;
position: relative;
float: left;
}
#bbhelp
{
background-image: url(images/english/back/help.gif);
background-repeat: no-repeat;
background-position:0 -24px;
border-width:0;
position: relative;
float: left;
}
#bbsearch
{
background-image: url(images/english/back/search.gif);
background-repeat: no-repeat;
background-position:0 -24px;
border-width:0;
position: relative;
float: left;
}
#bbprofile
{
background-image: url(images/english/back/profile.gif);
background-repeat: no-repeat;
background-position:0 -24px;
border-width:0;
position: relative;
float: left;
}
#bbcalendar
{
background-image: url(images/english/back/calendar.gif);
background-repeat: no-repeat;
background-position:0 -24px;
border-width:0;
position: relative;
float: left;
}
#bblogin
{
background-image: url(images/english/back/login.gif);
background-repeat: no-repeat;
background-position:0 -24px;
border-width:0;
position: relative;
float: left;
}
#bblogout
{
background-image: url(images/english/back/logout.gif);
background-repeat: no-repeat;
background-position:0 -24px;
border-width:0;
position: relative;
float: left;
}
#bbregister
{
background-image: url(images/english/back/register.gif);
background-repeat: no-repeat;
background-position:0 -24px;
border-width:0;
position: relative;
float: left;
}
#bbadmin
{
background-image: url(images/english/back/admin.gif);
background-position:0 -24px;
background-repeat: no-repeat;
border-width:0;
position: relative;
float: left;
}
#bbtpadmin
{
background-image: url(images/english/back/tpadmin.gif);
background-position:0 -24px;
background-repeat: no-repeat;
border-width:0;
position: relative;
float: left;
}
#myshrink
{
position: relative;
float: left;
}
/* No image should have a border when linked */
a img{
border: 0;
}


Continued…..

[jamesac Friend jamesacJoin date: July 2006Posts: 40Downloads:0Uploads:1]

#209802

Next, because I didn’t like the grey background I edited the index.template.php. Basically I removed all the grey backgrounds, changed the outside border to greenish and replaced the dark gray background on the right side to transparent (mythemetop.gif & mytehemestop.gif).

I can’t paste it in here because of post length restrictions, but I’ll attach it with the images I replaced.

Ok, so the style.css and index.template.php files have been edited; then I changed some of the images.

As I mentioned, I changed the mythemetop.gif & mytehemestop.gif to get rid of the dark right-hand border.

Then I replaced all the menu images. They are included in the attachment and go in

<SMF Forum Folder>/Themes/oxygen11rc2/images/english/back/

They aren’t perfectly aligned, but I did the best I can, so there is a little image shift on the mouse-over. Luckily I also attached the PSD file to change them. I used “Calibri” for a font because I can’t font-match for the life of me and it seemed like a close fit. So if you don’t have Calibri (avail with MS Office 2007 Beta), then replace it with something close. Maybe the kind folks at joomlart can tell us what they used on their top-navigation. The “Callendar” button is a tight fit, but I don’t use the SMF callendar so I wasn’t concerned. Change using the PSD as you wish.

Alright, then I thought…hey I’ll do one more change and change the arrows. I haven’t the slightest clue why, but there are more than one up/down arrows…ok, I didn’t make the theme, so I guess for convenience. They are in the folder as well. They go in:

<SMF Forum Folder>/Themes/oxygen11rc2/images/

And thats it! Oh, I guess you probably want to know what it looks like before you go and change all these files, eh?

Ok, here’s my site…be nice, I just installed Joomla about 5 days ago and I’m still workin on getting it the way I want.

http://gallery.svfan.com/

Forum link is on the top nav.

---

Attachments:

1. extras.zip

[jamesac Friend jamesacJoin date: July 2006Posts: 40Downloads:0Uploads:1]

#209803

Oh, one last thing, I’m still trying to figure out how to get the JA_Romulus background not to appear on that page, which I asked in [url=http://id.joomlart.com/forums/topic/make-one-page-without-background-img/

[Author]

Posts