Dolphin noob getting started: Where to Start?

Dolphin has a fairly robust template engine.  Templates are stored in the /template directory.  Go there and you will see several default templates.  I suggest cloning the UNI template to a new one and playing with it to see how things work.  What is not included in your template will automatically be pulled from the base template by the template engine.

While others on here will disagree with me, the use of @import should not be used; do some searches on the net to understand why @import is considered deprecated.

In 7.2 version you can change background picture by using Site Customizer module - click Customize in member toolbar on any page, upload new picture for the background and save it.

For the background image use Cpanel filemanager navigate to the PublicHTML>Template>Base>Image> bx_splash_image.jpg. I think that's what your looking for.

I would save any files your about to change by copying them first into a separate folder then renaming them slightly. I save them in a folder outside of Public_html directory in a file called "changed".  I also back up my site daily and keep the back ups for 90 days on a local system. I transfer files with FTP (Filezilla), because I use Notepad++ for changing files.

As far as CSS changes, Firebug is the bomb. It will let you know where to find that particular CSS in the numerous CSS files.  Just make sure you turn off cache in Dolphin admin for CSS. Remember to clear the cache either in Dolphin or the Cache files in Cpanel. Make sure you do not delete the htaccess file if using FTP or Cpanels filemanger.

 The attached zip file is a merge of the evo template and the default template. No css files are imported from /templates/base/css as a normal template would do.  This template is completely self contained including the html template files in the templates root folder.  This base template will make it easier to change things because you only have to think about the files in its own folders. Firebug will of course show you all the relevant css that belongs to each page element, provided however, you turn of all caching in your admin section... just leave that all off during development.

In this basic template, the main folder is: templates/tmpl_custom (relative to your sites root folder)

In this main folder you will find all the  *.html template files  These files are what arranges elements in the various individual page blocks.   As a beginner, you probably shouldn't mess with these files.  The main reason to change any of these html files would be if you wanted to alter the layout of some page block.

Images are located in /templates/tmpl_custom/images and any images that you use, should be uploaded here.  To reference an image as a body background, do something like this in common.css

body {
    background-color: #0f0f0f;
    background: url("../images/grunge.jpg") no-repeat fixed center top / 100% 100% #0f0f0f;

        }

PHP script files are located in /templates/tmpl_custom/scripts   Here is where custom templates can make the most dramatic changes. as you can override base php classes.  Suggest you leave these files alone.

I like Notepad ++ for editing CSS and other code.  It has a built in ftp client where you can connect to your server, download the css file you want to edit, then save it back to the server... all within Notepad.  Then all you have to do is refresh your browser to see the changes take effect.  As you know, css code is an exact science... there's no close enough. One misplaced comma, colon, semicolon, bracket, etc, can wreck the entire layout of your site. I'd suggest frequently downloading/saving your custom template in separate folders as work progresses... give them revision numbers so in case you totally screw something up and don't know what, you'll have a recent working version.

Be advised that with the attached template, I have only changed a few colors.  I have made no attempt to actually make the site look good with this template... that's up to the person using it.

Thank you all, I really appreciate the feedback. Looks like I finally have some info on how to get started now...

There's a little more reading in this topic:http://www.boonex.com/forums/topic/New-Template-Starter.htm

That's the topic relevant to the 7.1 version, but in that topic I make mention of loading a different jQuery ui theme to change the colors of popup calendars, etc.  That topic will give you some insight into how to do that with the template I attached in my previous post.

OK, just today I'm getting started on this, as I was finishing another project and I figured setting up my Dolphin site would require 100% immersion.

So... Following all your friendly and useful advise, I've changed the background of my site (woo-hoo!! I feel like a PRO!)

A few questions:

1. I've decided to modify the EVO template (having previously backed up the original folder, yes) as apparently the UNI template has no "background picture". I modified the sys-bg-main-2x.jpg and the sys-bg-main.jpg in the /tmpl_evo/images folder. However, I've read that the UNI template is the preferred template to make modifications, as it is more "simple". Am I setting myself for failure by choosing to modify the EVO template instead of the UNI template?

2. To have a clear idea of how the background picture would look like, I changed the background to a solid color. I see that there is a "dark" banner section on top, and also that some boxes are not 100% opaque, as they are tinted by the new solid color in the background. Where (which file?) do I see/change the attributes (size / color / opacity) of this "top banner", and the other text boxes? (I'd like to make it either transparent or fully white)

Your guidance is very appreciated! :-)

-Amargo

I would have followed HL's advice.  However, just remember the EVO template is subject to change and an update patch would not know that you had made changes to it; so keep that in mind for any updates that may be released by Boonex.

Thank you for the advise GG... I'll switch to HL's custom template then (I was wondering about it...) Actually, now that I think of it, HL's custom template should solve another issue I'm currently having

HL: I see that you don't have sys-bg-main-2x.jpg in your Image folder (only sys-bg-main.jpg) How do those two files operate? My sys-bg-main-2x.jpg is red, which is what shows up in my background. In the EVO template, I had copied a sys-bg-main.jpg which was solid black, but it seems just to flash briefly when I load the page, and then is replaced by the solid red of sys-bg-main-2x.jpg. I'm just curious as what exactly is the difference in these two files (and why your template don't have a sys-bg-main-2x.jpg, which in EVO seems to be "the" backgroud). Just wondering..

I didn't mean to have any background images at all.  I thought I deleted them all.

The two different images are used depending on what what device the user is browsing the site with.  TThe larger image is called in general.css and will be used by desktop browsers.   The smaller image is called in general_phone.css and in general_tablet.css.  Look at these css file in the original EVO template and you'll see where they're called as a background image. 

I suppose when Boonex did it this way, they thought it would be a good idea to scale down the size of the background image when viewing the site with a tablet or phone.

Thanks for the info HL. Good to start getting to know what are the different .CSS files for :-)