Sliding Panel menu button with data-icon="bars"

[Alex GG]

Hi Maryna, is it possible right now, to use the icon bars on ios7 theme? It ́s been fixed yet? I ́m using the above code to change icon to bars, but nothing appears..

Thanks!

[Maryna Brodina]

Hello!

You need to redefine .ui-icon-bars class. You can do that in new CSS asset (so that you don't need to edit Source files or CSS files of the theme). There is no difference, just different image paths (more information is here https://getsatisfaction.com/apperyio/...).

You can upload your images or use standard image files (there are only black and white icons). For example in CSS file of the theme you can add the following code in the bottom:prebody .ui-icon-bars {

Code: Select all

 background-image: url(images/icons-36-white.png); 

 background-position:     -788px -1px; 

 -moz-background-size: 864px 18px; 

 -o-background-size: 864px 18px; 

 -webkit-background-size: 864px 18px; 

 background-size: 864px 18px; 

}/preor use file icons-36-black.png instead icons-36-white.png to redefine black icon instead white. You can also upload your image file to the theme. In this case you would need to delete or change properties *background-position, *background-size.

[Yan Yi]

Hi Maryna!

Following your above code, I attempted to use an image as a button in the header. However, the picture was repeated. How can I make only one image appear?

code
#Status_menubutton {
background-image: url(files/views/assets/image/menu-icon.png);
background-position: -788px -1px;
-moz-background-size: 864px 30px;
-o-background-size: 30px 30px;
-webkit-background-size: 30px 30px;
background-size: 30px 30px;
/*
}
/code
Using background-repeat: no-repeat; made the picture disappear.

[Illya Stepanov]

Hi Yan,

Please add to your CSS this style:
precode
background-repeat: no-repeat;/code/pre

Also you should adjust style below with your needs:
precode
/* at first try to set it to 0px 0px then move it where you need */
background-position: -788px -1px;/code/pre

Regards.

[Yan Yi]

Thanks IIIya!
Not sure why but when I used Chrome console to add CSS to Status.css:7, it worked. But adding the same CSS to CSS asset (which appears as status_page.css:13) does not work.

[Maryna Brodina]

Hello!

Replace prebackground-image: url(files/views/assets/image/menu-icon.png);/pre with prebackground: url(../image/menu-icon.png);/pre

[Yan Yi]

That works, Maryna! Just curious - why did it only work when we replace files/views/assets with ..?

[Kateryna Grynko]

Hi Yan,

This is because you need to specify relative path, starting from the folder where CSS file is located. code".."/code means one level up.