CSS Styles - How to use?

Can someone explain how the CSS Styles in Admin is supposed to work (see attached screenshot)?

CSS files can be selected from the drop-down list is that all that happens?

After selecting the CSS file should an editor open it for editing?

Thanks

Yes.  That is exactly what is happening in your screen shot.  It's just a text editor window, but that's all you really need.  I don't know of anybody that actually uses that to edit css files.

yes you can make some changes into that files ans click save button.

for example :

@import url(../../base/css/index.css);

p {

font-size:16px;

}

Now I understand what's going on. All these CSS files are empty! Two questions (three really =):

- which CSS files control the presentation of everything in Dolphin  (i.e., those containing styles) and where can they be found?

- if this interface isn't typically used to edit Dolphin CSS files what is typically used?

Thanks

Those files do indeed apply the styling.  They are not really empty..they import the corresponding css file from the templates/base/css directory.   The files shown in the editor, are the ones in your current tmpl_xxx/css/ directory, and they are he ones you should be editing...NOT the css files in the base directory.  Any css you put in the css files in your tmpl_xxx/css/ directory, will override the css that exists in the base directory css files.  You should never change any files in the /templates/base directory

Say i want to put a background image as my website background instead of color. How would I go about doing that?

See this page: http://www.w3schools.com/css/css_background.asp I frequently visit this site myself... it's impossible to remember every little thing.

Put something like this in your tmpl_xxxx/css/ common.css  (this file may already have some csss for the body tag)

body {

background-image:url('../images/paper.gif');

}

Then put paper.gif in your tmpl_xxx/images/ directory   The page I linked to will show you the various options for a background image (repeat, etc)  The ../ tells php to go up one directory before looking for the images directory

I use my FTP client (CuteFTP) and edit the files directly on the server.  Always have all caching turned off when editing css files.  I also make frequent use of Firebug to find exactly where the page element's css is that I need to change.

I've never had a reason to use FileZilla, but I believe you can use it to edit remote files.  http://filezilla-project.org/index.php

W3Schools isn't very reliable if you want completely accurate (and standards-compliant) information. Some things they say are flat-out wrong.

Sometimes the weatherman is wrong too.  If you have a better place for the person to visit, speak up, instead of just bashing where I sent them.

http://htmldog.com/guides/cssintermediate/backgroundimages/

HTML Dog is a good place to start when learning HTML and CSS.

what is a good place to learn php ??

houstonlively strikes again! Thanks for the detailed and intelligible info. Quickly have become my favorite poster in here.

Sure you don't work here? Maybe you should? =)

Totally off-topic, but I'm interested in an answer to this too. As an old VB/VB.NET/ASP/ASP.NET, plenty of syntax (at least) to learn.

Speaking of w3schools (site I often frequent myself), there's an extensive PHP section with tutorial, references, etc. which I was going to start using Good first step?

I am using 7.09 for the first time.. I cannot edit the CSS as before.. I think I was using 7.06 last time.

It's driving me nuts.. Can someone please give me the file name for the top menu DIV.sys_main_logo block.. so i can change that background color from F4F4F4 to something else..

and what the heck is this gzip_loader thing? that is new to me, it's probably what's killing me.

My edts in the templ files show as being done, but they do not load even after clearing the cache.

Thanks.. Deano.. lemme hear ya. What the heck is going on with this thing..

probably the file name is top_menu.css in

templates/base/css

but overriding the selector in

template/custom/css

would be better.

Good luck

template/custom/css?:  i have done a complete search of my files and no such folder directory exists..


"top_menu.css" is an empty directory.. that is the whole point of my asking this question.

so if there is anyone who is not speculating please do contact me via PM and give me the help and i will post the answer here for others.

R.

 RE:

 He didn't mean "templates/custom" literally.  He meant the directory "templates/tmpl_WhateverTheNameOfYourCustomTemplateIs"

top_menu.css is not a directory... it's a file

As far as finding which css files contain the styling for specific page elements, you really should be using Firefox with the Firebug extension.  Turn ALL caching off, and clear cache directories before using firebug. There are plenty of firebug tutorial videos on YouTube.

As far as using Dolphin's built in css editor, that's probably the last thing I'd ever use.  It's better to use something like Notepad ++ with a ftp connection to your site.  The lack of an undo feature, or a search feature, are reasons enough to never use Dolphin's built in css editor

I figured that is what he meant but I am not using a custom template.. also yes, I am staying away from the dolphin CSS editor too.

But the problem is that I do not know what the name of the file is for the top menu. I have cleared the cache, the DNS and all cookies and my changes are not showing. All I want to do is change the bkgd color where the logo is, it should be the easiest thing to do and i have never had this problem in previous versions.. so it must be that the name of the file has changed.. when i use firebug or web developer add-on for firefox so i can find the element and file names..

i think if someone gave me the name for the file i could double check and get it right

all i want to do is change the bckgd color behind the menus tabs.. see pic

The css for that is in /templates/base/css/general.css  Firebug would tell you that in about 5 seconds, but is is very important to turn off all caching in admin, and to clear all caches.  Otherwise, firebug will uselessly just point you to cached file names.

However, DO NOT change it there.  Currently, you have only one template installed 'uni' in the templates/tmpl_uni directory   That directory has css, image, and script folders.  By default, all of the css file in the templates/tmpl_uni/css/ directory, have only one line which imports the corresponding css file from the /templates/base/css/ directory.

There are several reasons why you should never, ever change any of the css files in the templates/base/css directory.  One is that if you ever install a third party template, it may not work correctly, because it will also be importing the default css from this directory.  The second reason is that there is a very good chance that a future Dolphin upgrade may overwrite files that you changed.... This is also the case with the 'uni' template... you risk files being overwritten if you modify the uni template.

Therefore.... the best thing to do is to make a copy of the templates/tmpl_uni directory, and rename it to something else... as long as the name begins with tmpl_

Let's just say you renamed it to tmpl_custom.   The second thing you would need to do, is open the file tmpl_custom/scripts/BxTmplName.php which has but one line of php code, which you will need to edit to look like this example

    $sTemplName = 'custom';

Upload the new template folder to your server, and switch to it in admin.  Any css modifications should then be made to the css files in the /templates/tmpl_custom/css

To do this, copy the section of css (from the templates/base/css directory), and paste it into the corresponding file in your new templates css directory.  For example;

Copy this section of code from /templates/base/css/general.css

With caching turned off, firebug will find the above css easily.  You can modify it in firebug, copy the modified css in firebug, then just paste it into the corresponding css file in your new template.

Edit:  I'm not quite sure why I just spent 20 minutes composing that... I see you've been a member here a little longer than I have.

Edit:  I'm not quite sure why I just spent 20 minutes composing that... I see you've been a member here a little longer than I have.

Because that is one of the best, in layman's terms, description/how to yet on creating your "own" template!

Not only do I follow what you are saying, but Houston.. I know longer have a problem.

Thanks for your indulgence, it is not taken for granted. Like I said, it has been a while, more than two years since I have used dolphin.. so thanks again.

Rob.

Here's another example regarding changing the default images that are used.  Here's some css from /templates/base/css/top_menu.css

div.sys_top_menu {
    min-height: 31px;
    position: relative;
    z-index: 100;
    background: transparent url(../images/tm_bg.png) repeat-x scroll center top;
}

This css sets the background image used for the top menu.  The url ../images/tm_bg.png indicates that the image can be found by first moving up one directory ../   then into the images directory from there, then finally the image file name tm_bg.png.   For reference, the full image path relative to the dolphin root directory, is: /templates/base/images/tm_bg.png

If you copy this css to your /templates/tmpl_custom/css/top_menu.css  the expected location of tm_bg.png will be templates/tmpl_custom/images/tm_bg.png.  Obviously, it won't be there, so you'll have to put a copy of it in your templates images directory.  Unless you plan to use a different image, there would be no reason to do any of this.  In general, add only the css to your custom template files that you want to change.  Leave the rest alone.

This particular image, tm_bg.png is 3px wide x 140px high.  Maybe you want to create a dark template, and want to use a dark image instead of this default image.  One way is to edit tm_bg.png in photoshop, corel paint, or pixlr.com if you don't have a suitable image editor.   Since this image is only 3px wide, it's hard to see what the results of editing look like.  In cases like this, I usually resize the image larger ONLY in the horizontal dimension.  If you change tm_bg.png to 300px W x 140px H, it will be easier to see the results of editing.  Here's what tm_bg.png looks like at 300px Wide

To create a darker image for use in a dark template, all you have to do is adjust the brightness of the image.  Here's what you get just by doing that one thing:

This is what the narrow image will look like on your page, because it is repeated horizontally by the css rules above.  Want a different color?  Just adjust the color balance using your photo editor:

One you got something you like, just resize the image horitontally back to 3px wide, so that it's 3pxW x 140px H again.  Then just upload the image to your /template/tmpl_custom/images directory.  Your custom template will now use this new image.  You don't have to edit the existing image... you can create your own from scratch, and name it anything you want... just so the file name is called correctly in the css.  It doesn't have to be the same size either, but you'll have to adjust certain css rule to accommodate the different size.

This css is from /templates/base/common.css  It sets the background color of all pages, along with the default font color.

body {
    font-family:Verdana,Arial;
    font-size:11px;
    color:#333333; /* Existing dark font color */
    background-color:#ffffff;  /* Existing white background */
    margin:0px;
    padding:0 0 50px 0;   
}

If you are creating a dark template, you might alter this css like this to darken the background and lighten the font for contrast., and then paste this css to your custom templates common.css file:

body {
    font-family:Verdana,Arial;
    font-size:11px;
    color:#AAAAAA; /* New light font color */
    background-color:#080808;  /* New dark background color */
    margin:0px;
    padding:0 0 50px 0;   
}

If you want to use a background image and cover the full screen with it, CSS3 makes this a lot easier than it has been in the past..  Here is the css to accomplish this:

body {
    font-family:Verdana,Arial;
    font-size:11px;
    color:#333333;
    background-color:#080808;
    background: url(../images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin:0px;
    padding:0 0 50px 0;   
}

Then just upload bg_jpg to /templates/tmpl_custom/images/

Be mindful of what image size you use for a background. Try to keep it less than 300kB in size, or else initial page loads will be really slow.  If though 300kb is a fairly large size for a page element, once it's in the browser cache, it'll load quickly for subsequent pages.

NOTE:

In the above example this entire block of css was pasted into your custom templates common.css file:

body {
    font-family:Verdana,Arial;
    font-size:11px;
    color:#AAAAAA; /* New light font color */
    background-color:#080808;  /* New dark background color */
    margin:0px;
    padding:0 0 50px 0;   
}

In reality, it is not really necessary to copy the entire block.  I only initially showed that for clarity.  You only have to keep the lines that you change.  Unchanged lines can be deleted... but it won't hurt anything to keep them.  In the above example, this is all that is really needed in your custom templates common.css file to override the corresponding css in /templates/base/common.css:

body {
    color:#AAAAAA; /* New light font color */
    background-color:#080808;  /* New dark background color */
}

The argument for keeping ONLY the things you change, is that it allows you to see at a glance, everything that is different without all the clutter of  the unchanged css.  If you mingle the two, somewhere down the road, you'll have no idea what's different, and what's not.

Most of this stuff I am aware of.. and thank you for the solution I was looking for. You should make a short e-book and list it in the free section, or even charge a nominal fee for it.. you are putting the time in and making all these explanations and I think there are people who would gladly pay 5 bux to learn how to create templates..

here is a pic to show you what I have come up with. All I did was change the bkgnd color and size of the top menu and change a couple bkgnd images that I borrowed from another template.

Rob

Learning how to make changes to templates are a must for anyone that is serious about creating a site.  Even if you buy a custom template from the market, I have yet to see one that isn't missing a lot of small details that need to be fixed.  Some things, if you want done in your own lifetime, you need to do yourself.