Line around the boxes and the about us sub footer

Hi all. I wanted a plain white background which is simple enough but this leaves a greyish line around the boxes and the footer (about us, privacy, copyright, etc). I wanted to remove this but cant see where. I know I did it on the old version back in 2012 but I cant recall how.

Does anyone know please?

Quote · 17 Mar 2020

Hello 

The styles of these links you may correct in the templates/[your_tmpl]/css/anchor.css file.

Quote · 17 Mar 2020

Thanks Leonids. That works really well to change the bottom links font colours which is actually something else I wanted to Laughing so many thanks for that.

 

I can't however seem to change the outline of the box it self. As my background is white, I think it would look better if I could change the box outline to be white too so in effect transparent.

 

Any ideas anyone?

Quote · 18 Mar 2020

Virtually everything you see on your Dolphin site is controlled by CSS which is a component of the template you're using. Both Firefox and Chrome have a fantastic CCS inspector which you really must learn to use if you want to modify the way Dolphin looks. It also helps to use two monitors because you can have the site on one and the CSS inspector on the other. My screenshot shows both the site and the inspector on the same monitor. It's not ideal but it works. Make the site section about a third of the screen and the inspector the remaining two-thirds.

On the site section, right click on any box containing the outline (border).  You can use any, because changing one will change them all.

From the popup, choose "Inspect"

The box will go yellow as per my example and the Inspector will appear on the right. (White section in my example).

Here you will see the code generated by Dolphin to show the page. 

In the left-hand WHITE section move the mouse up and down and watch the far left section respond.

In my example, I've located an entire box, but there are many components making that box appear. If I'm real lucky, I may find what I'm looking for, but maybe not. Notice the right pointing arrow in the highlighted "div-class". You may need to click that arrow to expose more code, but in my case I think I've struck it lucky.

Notice in the far right margin it shows Border style, width and colour. These are the things giving you trouble. 

Just above these items there's a heading which you can't see here. Look at my second screenshot and you will see it.

Hover your mouse over that heading and it will give you the full path and line number to the code you need to change.

But before you do that, you can see if you're in the right place by hovering over the right section and unchecking the various components (third photo). You may wish to make the border width zero px, or the colour #ffffff and look at your changes in real time. These are totally non-destructive changes so play to your heart's content.

To make the changes permanent, you must do so in the CSS file.

Try learning to use the Inspector as best you can and use it any time you have a "visual" problem.

 

Inspector1.jpg · 148.9K · 199 views
inspector2.jpg · 60.1K · 202 views
inspector 3.jpg · 58.4K · 207 views
Quote · 18 Mar 2020

Wow that really was helpful. I actually found it in /templates/tmpl_evo/css/default.css and changed the border width from 1 to 0 as below. Thanks again for your great help.

 

/* border for common layout elements likedesign boxes, pads, menu items, etc */
.bx-def-border,
.bx-def-border-top,
.bx-def-border-top-auto,
.bx-def-border-bottom,
.bx-def-border-left,
.bx-def-border-right {
    border-width: 0px;                     //changed this from 1px//
    border-width: 0sp;                    //changed this from 1sp//
    border-color: rgba(0, 0, 0, 0.1);

Quote · 18 Mar 2020
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.