.
Hi there, everyone! Spent a day and a half with this, hope someone can benefit. The following is a tutorial for people who know next to nothing about dolphin, and those who want to make some big changes without having to dive too deply into the actual php files or having to mess around with numerous other.css files. This is strictly for VISUAL STUFF on the homepage as well as some items in the PROFILE PAGES. No, this tutorial is not complete, but there's a ton of stuff for those who are interested. Anyway, here we go ....
.
First, I was not able to cause ANY visual changes by playing around in ANY of the following areas of the general.css, to include relevant related areas within the following sections. No idea what these control ...
div.menu_item_link
div.design_box_border (created bright dark pink background image - could find change anywhere)
.login (ANYTHING having to do with login functions - could not create visual change)
.skinBlock (no visual change that I could find)
.newsHead (and all related subsequent related sections)
.blogBlock (and all related subsequent related sections)
.blogHead (and all related subsequent related sections)
.
.
The remainder of this post is about visual changes that I was able to generate on the homepage, or the profile, or in most cases - system wide - by merely adjusting the general.css file from the admin panel ... which is perfect for people who are unfamiliar with php, ftp, etc. Instructions: Open two tabs in your browser, one for the homepage and one for the admin panel. Find the sections that have been marked here in dark-blue within your general.css and make your adjustments as desired. Don't forget to save, and don't forget to refresh your browser after each save! You can view the outcome of such changes right here (not finished yet though).
.
.
Changes the background outside of the primary dolphin constraints, made our own image, 0bg_universal.gif for this, so you won't find it in dolphin. Just make your own image, no biggie:
.
body
{
margin:0px;
padding:0px;
background-image:url('../images/0bg_universal.gif');
background-repeat:repeat;
.
.
Deep background color, the color BELOW ALL OF THE SURFACE BLOCKS and BELOW the flash homepage images.
.main
{
position:relative;
width: 800px;
border: 1px solid #000000;
background-color: #FEDF8A;
.
.
Changes the background color & options of the thin menu, AT THE VERY VERY TOP of the homepage. Most if not all of the images are located under templates, then tmpl_uni, then images.
.topestMenu
{
top:-8px;
left:-10px;
height:17px;
background-image:url(../images/top_tab_cutting.gif);
.
.
The following image actually GENERATES THE STRETCH MENU HEADERS for the main menu items, top of page.
background-image:url(../images/tab_cutting.gif);
.
.
Same area as previous, just a little further down ... that's the white space between the main menu items which are separated by a one px wide line. To either side of that line is this (annoying, bothersome) white space.
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
.
.
When you move the mouse cursor over a main menu item, THERE'S A BACKGROUND COLOR that shows up by default. This automatically generated background color can be adjusted with this image:
background-image:url(../images/tab_cutting_h.gif);
.
.
The dropdown i.e. submenu from the main menu ... is controlled with the following image and functions. The image changes the dopped portions look and color, it's a transparency. Height is the part/size that which drops down.
.subMenu
{
background-image:url(../images/h_menu_bg.png);
background-repeat:repeat-x;
height:57px;
padding-top:8px;
font-weight: bold;
background-color: white;
.
.
The following image GENERATES THE STRETCH MENU for all of the block headers. Not only on the homepage blocks, but also in subsequent blocks/pages that are clicked on, and in the profile view.
.boxHeader
{
position:relative;
background-image:url('../images/head_cutting.gif');
.
.
HOMEPAGE PAGE WIDTH can be affected with this if you want to REMOVE the background PAGE MARGINS to the left/right of the surface blocks altogether, or if you'd like to alter the different MARGIN SIZES. Careful with these!
.bodyBlock
{
margin-top: 5px;
z-index: 50;
padding: 0px 10px 0px 10px;
.
.
The name is a bit misleading SINCE THIS APPLIES TO ALL BLOCK HEADERS, but here's where you can adjust the actual height of the block headers, as well as text size & color which appear on the block headers.
.boxFirstHeader
{
height:21px;
padding:5px 0px 0px 8px ;
font-size:13px;
font-weight:bold;
color:#822D00;
.
.
ALL of the background colors FOR ALL OF THE SURFACE BLOCKS can be changed all at once. The font size is the standard, generic text that's displayed black in the blocks by default, blocks such as news, blog, polls, quick search, etc.
.boxContent
{
overflow:hidden;
font-size:13px;
background-color: #FEEBB6;
.
.
The following controls the links/options WITHIN THE TAB SECTION of each block header with tabs, such as TAGS, BLOGS, POLLS, etc. If you have problems with tabbed text running into each other due to the fact that you made your pages narrower, you can also reduce the left/right padding down to 3 (default is 5) which helps a lot.
.dbTopMenu div.active,
.dbTopMenu div.notActive
{
float: left;
padding-left: 4px;
padding-right: 4px;
border-left: 1px solid #D5BEB1;
height:17px;
.
.
TEXT COLORS of the non-active TABS WITHIN A BLOCK HEADER are controlled via this:
.dbTopMenu div a,
.dbTopMenu div a:link,
.dbTopMenu div a:hover,
.dbTopMenu div a:active,
.dbTopMenu div a:visited,
.caption_item a,
.caption_item a:link,
.caption_item a:hover,
.caption_item a:active,
.caption_item a:visited
{
text-decoration: none;
color: #0000CC;
.
.
1 PX BORDER, nearly white, BELOW THE ACTIVE TAB TEXT within a block header can be changed/removed here.
.dbTopMenu div.active
{
border-bottom: 1px solid #E0D0C4;
.
.
It would be great if anyone else knows something that's still missing, strictly related to the uni general.css file, which could then be posted in this topic as well. A lot of people could benefit from knowing what the heck they're actually looking at when they're changing something, especially when you consider how humongous that file is (moreso for anyone with little css experience).
.
.
Greetings from Germany
