Phoenix - Responsive Admin Template

Hey,

first i love your template, but i have a problem.

The Charts wont work in the newest firefox version. In google chrome it works fine.

thanks

2 older replies

LoxDesign Author

Hi,

First of all thanks for purshasing my theme. For a few days I am out of town but when I get I check it out and will give you an answer.

Sorry again and best regards, LoxDesign

Gewora Purchased

Okay

LoxDesign Author

Hi TheTechnoMan,

I have just checked out in Firefox and it look like it´s working well.

Gewora Purchased

On: http://themes.loxdesign.net/phoenix/charts.html

Hmmm..

i only get white areas where the charts should be.

LoxDesign Author

Hmmm…

For me it work even after a ctrl+f5 refresh. This is how I see it: http://features.loxdesign.net/phoenix/charts.png. In your downloaded version can you see the charts ?

Bought between 1 and 9 items
Has been a member for 1-2 years

Organizer

Overall very nice work, just had a look at the demo page as I’m looking for a new admin page.

I noticed the Wizzard seems a bit off alignement wise at least in FF, also ‘3 Other Details’ should be have said ‘4’ and if you resize the Address area it skews the whole design. Just minor bugs

Bought between 1 and 9 items
Has been a member for 1-2 years

Gewora Purchased

Hey,

i have a little problem with the altert box. It looks like that:

http://www.abload.de/img/unbenannt3gjwg.png

as you can see the text is not centered. why?

thanks

LoxDesign Author

Hi,

You can center it by changing the common.css file:

div.jGrowl div.jGrowl-notification{ text-align: center; }

Gewora Purchased

It is not jgrowl. Its the standard altert message.

Bought between 1 and 9 items
Has been a member for 1-2 years

Gewora Purchased

And another simple question.

What files do i need to include to get the “Input fields with tooltip” demonstrated at the forms page, to work?

LoxDesign Author

These are bootstrap tooltips so the first file is “

<script src="js/libs/bootstrap.min.js"></script>

”, than you have to setup the tooltip on the input (“

 <input type="text" name="tooltip" placeholder="Tooltip on top" data-placement="top" data-original-title="Tooltip on top">

“) and finally you have to call the tooltip in the “

<script src="js/specific/forms_elements.js

”></script>” like so ”$(’.tooltip_cont input’).tooltip(); ”.

Best regards.

Gewora Purchased

I found out the solution. it was the wrong odering from some .js files is i thought. THanks

Bought between 1 and 9 items
Has been a member for 1-2 years

Gewora Purchased

Hello again and thanks for your help.

I just have another problem where i cant find a solutiion. I tried to integrate a ibutton. But i cant get it to work. I just shows a checkbox.

My css files:

http://fonts.googleapis.com/css?family=Open+Sans,
bootstrap/bootstrap.min.css,
bootstrap-responsive.min.css,
prettify.css,
jquery-ui-1.8.20.custom.css,
chosen.css,
jquery.ibutton.css,
common.css,
theme_light_sky_blue.css

and the js files

jquery-1.7.2.min.js,
bootstrap.min.js,
ios-orientationchange-fix.js,
jquery-ui-1.8.20.custom.min.js,
common.js,
script.js,                
prettify.js,
forms_elements.js, 
jquery.ibutton.min.js

what did i wrong? the ordering in my script is as above. thanks

6 older replies

LoxDesign Author

Did you make the call in the javascript file ?

Gewora Purchased

What you mean? I just included it. Did i missed something? On the demo i only see a include

LoxDesign Author

Hi, as I see the order of your javascript includes is wrong: jquery.ibutton.min.js has to come before forms_elements.js.

Gewora Purchased

Thanks but still only showing a normal Checkbox.

http://www.abload.de/img/unbenannte9c5k.png

            <section class="welly form_align">                                                
                <div class="row-fluid">
                    <div class="span3">{{ _('Applikation online:') }}</div>
                    <div class="span9">
                        <div class="span9"><input class="os_chbox" type="checkbox" checked="checked" /></div>                    
                    </div>
                </div>                        
                <hr />                      
            </section>

LoxDesign Author

In your html do you have the right class setup, I mean for example you have an checkbox with the class “os_chbox” and you call the plugin with this name ( for example ”$(”.os_chbox”).iButton(); “) in your javascript ?

In ”<script src=”js/specific/forms_elements.js”></script>” you have a section with the calls: /* - 9 – OS Styling $(”.os_chbox”).iButton(); $(”.os_chbox_effect”).iButton({ labelOn: “On” , labelOff: “Off” , easing: ‘easeOutBounce’ , duration: 500 }); $(”.os_radio”).iButton({allowRadioUncheck: true});

Please let me know if it worked.

Best regards

Gewora Purchased

As i told u already. I just copied it from the demo so thats not the problem. I have the same js as in the demo and the same html

Gewora Purchased

kay i found out where the probmem is. its in he “js/specific/forms_elements.js”. If i remove all the other stuff from the file it works. I mean the other calls for example, for the spinners. Is there a way to fix it?

LoxDesign Author

On every page you have to know what plugin are you going to use and than you will include only that plugin in your header and call only that specific plugin, that’s why I tried to separate and comment the code as good as possible.

Gewora Purchased

Ah so the form_elements is just for exaple. Okay

Bought between 1 and 9 items
Has been a member for 1-2 years

Gewora Purchased

Sorry for the many question but i have another small one. Normally in Bottstap its easy to create topptips (with the design from the input box tooltip, for example). Like that:

                        <label class="control-label" for="signout-redirect-referrer-enable">Sign out <a href="#" data-rel="tooltip" tabindex="99" title="When the user logs out of your site through logout.php."><i class="icon-question-sign" /></a></label>

But in that template that wont work. How does it have to look like?

9 older replies

LoxDesign Author

You have to also call the tooltip in your JavaScript.

Gewora Purchased

I know. Please look at my image below, and try to answer all the questions with code examples. Thanks http://www.abload.de/img/unbenanntg7oor.png

LoxDesign Author

Well my idea would be using extra wrap containers and trying too align and adjust everything with the help of this extra container ( styling the extra container with CSS ).

Gewora Purchased

Man pls… There are 3 Questions on the Image. Please answer the Question to image 2, with code. Normally it would work like that <a href="#" rel="tooltip" title="first tooltip">hover over me</a>

but you changed that so it wont work. pls give a example how it works in your template. and also pls give a example how to do that other things with a container. I know php. Not css.

And also answer question 1 (with the red square) Thanks

LoxDesign Author

As I told you before, if you wanna use the tooltip with an element you have to also call it in your javascript. Example as it is in my template too: HTML:

<div class="span9 docs-input-sizes tooltip_cont">
                            <input type="text" name="tooltip" placeholder="Tooltip on top" data-placement="top" data-original-title="Tooltip on top">
                            <input type="text" name="tooltip" placeholder="Tooltip on right" data-placement="right" data-original-title="Tooltip on right">
                            <input type="text" name="tooltip" placeholder="Tooltip on bottom" data-placement="bottom" data-original-title="Tooltip on bottom">
                            <input type="text" name="tooltip" placeholder="Tooltip on left" data-placement="left" data-original-title="Tooltip on left">
                          </div>

JS call:

$('.tooltip_cont input').tooltip();

For further documentation please check the official bootstrap website: http://twitter.github.com/bootstrap/javascript.html#tooltips

2 – It is not possible to add it to the iButton, you have to add it to the text before the ibutton.

3 – It is possible to adjust the text tooltip text to appear exactly over the, to archive that you have the adjust the width of the text container.

Best regards

Gewora Purchased

I knowthat i have to call it.. Okay lets sayit like that:

Plsgive me the code for “image 2” (in the picture above). So that i have that ”?”icon before the box. I cant get it to that position.

thanks

LoxDesign Author

What image 2 ?

Gewora Purchased

Oh man. I wrote above

http://www.abload.de/img/unbenanntg7oor.png

there is a arrow with the text “image2”

LoxDesign Author

Sorry but I really don’t know what you want, explain it more. Thanks

Gewora Purchased

I want that ”?” icon right to the inoput box likeon that picture: http://www.abload.de/img/unbenannt45sfy.png

The problem is that i cant get it to that position without braking the whole design. So i simply want the code to put that icon right to the inputbox and add a tooltip to it.

LoxDesign Author

Well as I see on the picture the code could look like this:

<label>Admin email <i class="icon-question-sign name=" tooltip="" placeholder="Tooltip on top" data-placement="top" data-original-title="Tooltip on top" /></label>
<input type="text" >

For more css customization please check out the link below: https://tutsplus.com/course/css-visual-docs https://tutsplus.com/ebook/css-essentials https://tutsplus.com/ebook/mastering-css3 http://www.w3schools.com/css

Best regards

Gewora Purchased

Thanks but already had a solution like that. With your code i get: http://www.abload.de/img/unbenanntjpspb.png

Bought between 10 and 49 items
Has been a member for 2-3 years

delcerrogroup Purchased

This is a super basic question, but is there an easy way to change the predominately grey color to black, or would this change be scattered throughout the .css? I’d like to change the background to be closer to black, then make the menu items a little lighter on the mouseover. I can look through the .css if it is spread out; I’m hoping that it is in one or two places. Thanks!

LoxDesign Author

Hi delcerrogroup, sorry for being a bit late. Well if you have sass setup you can change many settings in the “_variables.scss” if not you will find a “Table of Content” at the top of the “theme_light.css” file.

    Table of Content:
     1      - BASIC
     2      - LINKS
     3      - HEADER
     4      - MAIN NAVIGATION 
     5      - DROPDOWN
     6      - CHAT MODAL
     7      - SUB NAVIGATION
     8      - SIDE NAVIGATION    
     9      - PAGE SETTINGS
         ....

With a basic find/replace I think it won’t be to hard to change the look to fit your needs.

If you have more questions just let me know.

Best regards, LoxDesign

delcerrogroup Purchased

Thanks – this is the information I need. Love the theme!

LoxDesign Author

Thanks

Bought between 10 and 49 items
Has been a member for 2-3 years

darakk Purchased

Hi, nice work, but i have problem with cleditor, i use two editors on one page and on IE that not run. I have creat two ID (cleditor and cleditor2), I changed the file js/specific/forms_uploader.js :


    $("#cleeditor").cleditor({
        width:"100%", 
        height:"100%",
        controls:     
            "bold italic underline strikethrough subscript superscript | font size " +
            "style | color highlight removeformat | bullets numbering | outdent " +
            "indent | alignleft center alignright justify | undo redo | " +
            "cut copy paste pastetext | print source" 
            })[0].focus();
    $("#cleeditor2").cleditor({
        width:"100%", 
        height:"100%",
        controls:   
            "bold italic underline strikethrough subscript superscript | font size " +
            "style | color highlight removeformat | bullets numbering | outdent " +
            "indent | alignleft center alignright justify | undo redo | " +
            "cut copy paste pastetext | print source" 
            })[0].focus();

On Firefox, Chrome and Safari it’s ok but on Internet Explorer no

.

EDIT: my problem is solved 8-)

i just changed [0].focus(); by [0].refresh();

LoxDesign Author

Hi darakk, great!!!!!

Bought between 10 and 49 items
Has been a member for 2-3 years

delcerrogroup Purchased

Any way to make the top bar taller without covering up the side nav bar or the content container? I couldn’t figure out how to do this without monkeying with the bootstrap file. Thanks!

LoxDesign Author

Hi delcerrogroup,

Well one way would be adjusting the following things: .navbar .main_nav > li > a{ padding: 19px 0 10px; } – you adjust the pedding on the anchor tag and if you want the icons to be centered you would have to adjust the background-position assigning to all of them a center position (ex. ”.search > a { background: url(’../img/general/nav/search.png’) no-repeat center; }, .settings > a { background: url(’../img/general/nav/settings.png’) no-repeat center; }, ...”) and to separate more the subnav if you have one or the main_content you would have to adjust their margin-top property (ex. .sub_nav { margin-top: 25px; }).

Hope it was helpful. Best regards, LoxDesign

Bought between 1 and 9 items
Has been a member for 0-1 years
Sweden

tfeera Purchased

hello again,

im having troubles with advanced table, it will sort results in a different way than required, how do i stop the table from sorting the results but i still want the ajax paganation, like show 25 or 50 or 100 results stuff. i want to keep the advanced table but i just dont want it to sort the results, i have done that in php before showing it in the table.

one more thing, if you press right click and click show source, then in the source they are sorted just like i wanted them but the table just dont show same sorting.

2 older replies

LoxDesign Author

Hi tfeera. You can disable sorting of the advanced table like so:

oTable = $('#example').dataTable({        
        "sPaginationType": "full_numbers",
         "bSort": false
    });

Best regards, LoxDesign

tfeera Purchased

hello, but if i add this code then the other features will also be taken out, like show per page?, i mean the ajax paganation will disappear

LoxDesign Author

Hi, when I tried out this example on the template for me only the sort feature got disabled, the rest stayed as it was before

tfeera Purchased

really, so whats going on then?, i edited the tables_advanced.js file?, i suppose you did the same?

LoxDesign Author

Hi tfeera, On this page: http://themes.loxdesign.net/phoenix/tables_advanced.html I just modified the dataTable call as I showed you before and it worked.

Bought between 1 and 9 items
Has been a member for 0-1 years

NguyetLy Purchased

Hello, I’d like to make the list item SERVICES linked to an actual page (services.html) and expanding at the same time as I click. I’ve tried <onclick=”window.location=this.href;return false;”> but it only works halfway (without expanding).

Can you please help?

Thank you for your time.

LoxDesign Author

Hi NguyetLy,

Here is how you can do it: In your index.html you will setup your navigation code like so:

Dashboard
onclick=”window.location=this.href;return false;” >Services 5

And in your services.html you setup your navigation like so:

Dashboard
Forms 4

With this setup if should expand and go to services.html at the same time.

Best regards, LoxDesign

Bought between 1 and 9 items
Has been a member for 1-2 years
Canada

raphlo Purchased

Hello, would it be possible for you to add a Microsoft and Google logo to the login page ? I’m pretty limited with Photoshop and cannot achieve the look & feel you did with the current Facebook and Twitter logos. That would be really appreciated. Thanks.

LoxDesign Author

Hi raphlo, Send me an email with the logos you wanna use for your project and I will export them as I have the Facebook and Twitter logos.

BR, LoxDesign

Bought between 10 and 49 items
Has been a member for 1-2 years

locassa Purchased