An issue duplicating Admin bar from i7MEDIA "Mocha" skin

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
2/26/2013 4:20:43 PM
Gravatar
Total Posts 83
-- Joe

An issue duplicating Admin bar from i7MEDIA "Mocha" skin

The Admin menu concept and implementation in the Mocha skinis great! Kudos to Joe Davis of i7MEDIA

When trying to duplicate that Menu I am running into one issue that has me stumped.  The Admin menu covers the top page content. 

In the Mocha skin, the Admin bar moves the rest of the page content down when the page is scrolled all the way to the top. 

But I cannot duplicate that effect.  :-(

I have edited the layout.master file to make the needed changes.  I have everything worked except for this issue. FYI - to help troubleshoot I have used the exact same style-adminbar.css file that comes with the Mocha skin.

You can view my test site with the skin I am editing at http://nhtheatreawardstest.org.green.mysitehosted.com/

The skin is created in Artisteer 4.1 exported via the Mojoportal 4.1 plugin.

mojoPortal Version 2.3.9.5 MSSQL
Operating System Microsoft Windows NT 6.1.7601 Service Pack 1
ASP.NET Info v2.0.50727 Running in Full Trust

Thanks in advance for any help on this one.

-- Joe Vago

 

2/27/2013 10:04:02 AM
Gravatar
Total Posts 91

mojoPortal Hosting & Design @ i7MEDIA!

Re: An issue duplicating Admin bar from i7MEDIA "Mocha" skin

You're missing a small clip of JavaScript that pushes the content down when you are signed in. Paste this into the head of the document and you should be set:

<script type="text/javascript">
        $(document).ready(function() {
            // Admin Toolbar
            if ($('.adminnavigationbar')[0]) {
                $('body.pagebody').addClass("loggedin admin");
            }
            if ($('.accountname')[0] &amp;amp;&amp;amp; !$('.adminnavigationbar')[0]) {
                $('body.pagebody').addClass("loggedin user")
            }  
        });
    </script>

Hope that helps,
-Elijah

2/27/2013 10:33:56 AM
Gravatar
Total Posts 2209

Re: An issue duplicating Admin bar from i7MEDIA "Mocha" skin

Hi Joe V,

I must give credit to two people (Isaac Hall and Elijah Fowler) on my team for for this one. They've actually rewritten a lot of that menu recently, to make it might bit smaller. We'll be adding those changes to Swift Blue and Mocha soon.

Thanks,
Joe D.

2/27/2013 11:24:59 AM
Gravatar
Total Posts 83
-- Joe

Re: An issue duplicating Admin bar from i7MEDIA "Mocha" skin

Elijah & Joe D,

Thanks so much for looking at this - and the suggestion. 

To be sure I re-checked and the javascript is in my layout.master file. 

To be extra sure the script was firing, when I look at the page source it seems to be properly adding those classes in style-adminbar.css to the body class.

<body id="ctl00_Body" class="pagebody administration adminmenu loggedin admin">

Yet, it doesn't bump down the page when scrolled to the top.  (and the menus are covered)

Maybe there is a class that is not in the style-adminbar.css that is being used?  Using Firebug to look at the CSS I dont any other style that is being applied... it but I must be missing something.

Any other thoughts?

Thanks again for any help you can provide -- Joe Vago

 

2/27/2013 12:07:14 PM
Gravatar
Total Posts 2209

Re: An issue duplicating Admin bar from i7MEDIA "Mocha" skin

Hi Joe V,

Find .loggedin .mainhead in your CSS and replace with .loggedin .art-main.

HTH,
Joe D.

2/28/2013 11:47:00 AM
Gravatar
Total Posts 83
-- Joe

Re: An issue duplicating Admin bar from i7MEDIA "Mocha" skin

Joe D,

I have solved this issue because of your suggestion, but the fix was not what you listed.

In my style-adminbar.css the first item was this

.loggedin .mainhead
{
    padding-top: 40px;
}

but that was not applying properly.  I am still learning more advanced CSS tricks so I am probably missing something, but when I added a comma after the .loggedin style everything renders correctly.

.loggedin, .mainhead
{
    padding-top: 40px;
}

Can you tell me why the 2 classes (.loggedin, .mainhead)  in the style-adminbar.css file *do not* have a comma after the .loggedin class?  If it was an error, why does the adminbar appear to render correctly in the Mocha skin?

Thanks again for your help with this and apparently, my education.  smiley

-- Joe Vago

PS: really looking forward to the updated Mocha and SwiftBlue skins!

 

 

2/28/2013 2:44:44 PM
Gravatar
Total Posts 91

mojoPortal Hosting & Design @ i7MEDIA!

Re: An issue duplicating Admin bar from i7MEDIA "Mocha" skin

Joe V,

I can answer that one. cool

In CSS our selectors can be made more specific by a string of classes ending with the element you wish to style. For example, say we have DIV with the class "big-box" that we want to add a border on, we would do this:

.big-box {
    border: 1px solid black;
}

Now let's say that we have another element with the class "big-box" inside the first one, but we want it to have a different color border. We can't just use ".bigbox" or the first one will change, so we have to make it more specific. The way we do that is by placing a class before the class of the item we wish to be styled in the selector. so in this case we would do this:

.big-box .big-box {
    border: 1px solid blue;
}

So what that does is says: "Any 'big-box' inside of a "big-box" will have a blue border instead of a black one."

In the case of the admin bar, we didn't want 40px of padding on top of the "mainhead" element all of the time, that would look bad having a big white space on top of the page, so we set up the JavaScript to add the class "loggedin" when logged in so we could make the selector more specific and only show up when logged in.

The reason it wasn't working for you is because the CSS was looking for a element with the class "mainhead" inside of the element with the class "loggedin" (which is the body element). But since that was for a custom skin (Mocha) your skin doesn't have that class so it wasn't applying to anything. Now, you have a similar element with the class of "art-header", so if you changed the selector to ".loggedin .art-header" it would have worked.

Now here's why it worked after you placed the comma in. When you want to style two element the same way you place both of the element's selectors in the style separated with a comma. Like such:

.big-box,
.small-box {
    border: 1px solid black;
}

What this says is: "Both 'big-box' and 'small-box' will get a black border."  So when you changed the selector to ".loggedin, .mainhead" you told it to style both "loggedin" and "mainhead" with 40px of padding on the top. Since "mainhead" doesn't exist it doesn't get any style, but "loggedin" is the class placed on the body by the JavaScript, and it is getting the styling so the admin bar worked.

This isn't a bug, it's just specific to the skin. The reason we placed it on the "mainhead" element was because we are using a sticky footer and placing the padding on the body would have messed that up.  Each skin is different, one solution that works for a skin may not work for another, so changing the way things are done so it works is going to be needed from time to time.

I hope that this helps you understand CSS better and clears up any questions you had.  I'm glad you are enjoying the fruit of my labor. smiley

If you have any more questions just ask,
-Elijah

2/28/2013 2:52:45 PM
Gravatar
Total Posts 2209

Re: An issue duplicating Admin bar from i7MEDIA "Mocha" skin

Hi Joe V,

Also, I said to replace .loggedin .mainhead with .loggedin .art-main not to add .loggedin .mainhead.

Thanks,
Joe D.

3/13/2013 2:36:01 PM
Gravatar
Total Posts 83
-- Joe

Re: An issue duplicating Admin bar from i7MEDIA "Mocha" skin

Elijah & Joe D - a belated "thank you" for your help.  I have this working perfectly now.

Elijah - thanks for the great explaination and education in CSS!

-- Joe Vago

You must sign in to post in the forums. This thread is closed to new posts.