Move up the Ajax Close Button

Hello

What css code do we alter or add in order to move the up the ajax close button as shown in the picture attached?

Please advise. Thanks.

Get firebug plugin for FireFox.  Turn off CSS caching in the admin so you can see the css file and line number reported in firebug.  Go to the page, right click on the close button and choose, inspect with firebug (or close to that).  It will help you to inspect the page and see what CSS files are controlling the layout.

 Hello
We tried that but we're unable to find which css code we have alter in order to move up the close button. 

If you have css caching turned on, then you can not see which css file is controlling it.  You need to turn off css caching and then clear the caches.  Once you find out which one is controlling it, you can turn css caching back on.

Besides... the screen shot you posted is apparently a custom template, so we couldn't tell you exactly where to change things unless we also inspected your site with Firebug.

 The site is uploadyourdog.com

You may want to revert your template back to one of the defaults that ship with Dolphin and then work on the template again.

 We have worked on the template for a long time. Reverting a template is not a choice we can make.

Fair enough, but as you can see from another post, you have CSS issues with your template.  They need to be resolved.

look in icon.css or general.css of your template
or search i.login_ajx_close.sys-icon maybe that will help.
I checked it with FF inspector.. hope it helps

look at image... hope it helps

check the following - i actually replaced my ajax close with a different close cause i neded to refresh the parent page.

first - i had to find the correct html template for my popup - which is popup.html in the templates/base directory. The ajax close is this:

<div class="boxFirstHeader bx-def-bh-margin">__title__<div class="dbTopMenu"><i class="login_ajx_close sys-icon remove"></i></div></div>

more specifically this:

<i class="login_ajx_close sys-icon remove"></i>

so next, gotta find the css for the class- so did a search in all css files for login_ajax_close, which i couldnt find. So i went and searched in all css files for dbTopMenu - which is in common.css

So - i would guess you would need to look in your templates/tmpl_(your custom template)/css/common.css and play around with this till you move your close x up.

 Your template has a ton of problems. Do you plan on upgrading that site to 7.1?

i took a look at your common.css and i decided to see what i could get out of it. Just on that page alone, I noticed that you are duplicating css styles. What I mean is: if a specific parameter is already included in the original file, you do not put it in your template version of the css. Example. in your common. css you have this:

body {
background-image:url("http://yourdomain.com/templates/tmpl_upl/images/9.jpg");
no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        font-family:Verdana,Arial;
        font-size:12px;
        padding:0 0 50px;
        }

the section in red is already included in the base ccommon.css file, so you wouldnt put it in your template version. I have noticed this a few times. So, Iwent and duplicated some of your layout in a completely new template, and pulled over just a few sections and made some changes. so far, nothing is acting up - other than the spacing I have for my site. I have included a screenshot of just what the following has created. Basically, i duplicated the uni template, then created a blank common.css in the css directory and added the below code. the screenshot is the existing result of just the few changes below.

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

body {
    background-image: url(../images/9.jpg);
    background-repeat: no-repeat;
    background-position: center center;
            -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;       
}
.disignBoxFirst
{
background-color:transparent;
border:0 solid red;
background-image:url(../images/top_menu_bg.png);
background-repeat:repeat-x;
background-position:top left;
font-family:Verdana,Arial;
}
.boxFirstHeader
{
height:25px;
font-size:14px;
font-weight:bold;
color:#fff;
background-color:transparent;
background-image:none;
border:0 solid #333;
font-family:Verdana,Arial;
margin:0;
overflow:hidden;
padding:6px 0 0 8px;
}
.boxContent
{
position:relative;
border:0 solid #dddddd;
padding-top:1px;
color:#fff;
font-weight:bold;
text-align:left;
}

 also added a screenshot of a popup so you can see that with these changes the X to close is positioned properly.

i hope this helps you.

another note - in your common.css - this section is messing up your close x - dont know what else it is affecting though:

.disignBoxFirst .boxFirstHeader .dbTopMenu,
 .disignBoxFirst .boxFirstHeader .caption_item
{
position:absolute;
padding-top:0;
right:-3px;
white-space:nowrap;
color:#fff;
font-size:12px;
text-transform:capitalize;
font-weight:bold;
}

more specifically, i believe it is the section in red that messes up your close x. the parts in blue are already included in the default common.css, so you dont have to duplicate those in your custom template.

i got your close x problem after adding this section to the css file.

changing it to:

.disignBoxFirst .boxFirstHeader .dbTopMenu,
.disignBoxFirst .boxFirstHeader .caption_item
{   
padding-top:0;
color:#fff;

font-size:12px;
}

resolved the problem with the X, but again, not sure what else this will affect - heck it may fix a lot of things.

 The site is already 7.1.1.

  The template more resembles a 7.0.9 site..  Anyways, I didn't have to look very hard to find numerous problems with your template.  The close icon is a small problem compared to some other issues I noticed.