Public Forums 71,145 posts

[fvarona Friend fvaronaJoin date: September 2011Posts: 7Downloads:0Uploads:0 Thanks: 4]

#171759

Hello to everyone.

In the main page of my site, there are only two featured articles. I’d like to add another one in iPhone view, but not in desktop view. The reason is that in iPhone layout I can only show the main menu in the top menu button, but I have another side menu, which I must show in iPhone. So, a possibility is to show it as a regular featured article, but only when accesing from an iPhone. Could it be possible?

Thanks in advance,

Fran Varona

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#432454

Hi Fran,

why don’t you just copy your side menu (a menu module) and make it only visible on the iPhone layout? You can create a new module position in the iPhone layout (Template settings) and publish that copied module only in this module position. Depends on where you want the side menu to be displayed, above the featured articles or below or… 🙂

Let me know if you need further assistance.

1 user says Thank You to pixelzombie for this useful post

1. fvarona

[fvarona Friend fvaronaJoin date: September 2011Posts: 7Downloads:0Uploads:0 Thanks: 4]

#432462

Hi pixelzombie, thanks for answering!

I did just that (copied the menu module and positioned it in user1 position, inside the header block of iPhone layout. And it actually shows in iPhone, but with a poor formatting (only the text, without border and without background color). I tried to position it inside the middle block, hoping that the format would be the same as featured articles, but then it does not show up, probably because the middle block is specific and only shows the featured articles. So I thought that if I could configure the menu as a regular article, only to show in iPhone layout, it would show with the same format as the rest of featured articles.

I hope I made myself clear.

Any help is appreciated!

Thanks.

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#432470

Okay, it actually makes sense since there is no css formatting for this customization.
It doesn’t matter where you display it. The iphone layout middle block accepts content-mass-top like this:


<blocks name="middle">
<block name="content-mass-top">user1</block>
</blocks>


You can copy the css for the iphone layout. Copy the whole folder named “iphone” from

/plugins/system/jat3/base-themes/default/css
to
/templates/your_template/css/

edit the template.css inside that iphone folder from line 226 like this. green = new lines. You can also copy and paste the whole block 😉


body.com_content #ja-container .item-page,
body.com_content #ja-container .item,
body.com_content #ja-container .leading,
body.com_content #ja-content-mass-top {
-webkit-border-radius: 8px;
background-color: #fff;
border: #878787 solid 1px;
overflow: hidden;
padding: 0;
position: relative;
display: block;
height: auto;
width: auto;
margin: 3px 9px 17px;
}

body.com_content #ja-container .item-page,
body.com_content #ja-container .item .contentpaneopen,
body.com_content #ja-container .leading .contentpaneopen,
body.com_content #ja-content-mass-top .moduletable {
padding: 9px;
}


Thats it. It works here 😎

Cheers

Frank

1 user says Thank You to pixelzombie for this useful post

1. fvarona

[pixelzombie Friend pixelzombieJoin date: August 2010Posts: 339Downloads:2Uploads:49 Thanks: 32 Thanked: 168 times in 107 posts]

#432472

Oh, I just noticed that this css will only work when the component “content” is called (like article-pages etc.).
To display the css in all components too change the css a bit 🙂


body.com_content #ja-container .item-page,
body.com_content #ja-container .item,
body.com_content #ja-container .leading,
#ja-content-mass-top {
-webkit-border-radius: 8px;
background-color: #fff;
border: #878787 solid 1px;
overflow: hidden;
padding: 0;
position: relative;
display: block;
height: auto;
width: auto;
margin: 3px 9px 17px;
}

body.com_content #ja-container .item-page,
body.com_content #ja-container .item .contentpaneopen,
body.com_content #ja-container .leading .contentpaneopen,
#ja-content-mass-top .moduletable {
padding: 9px;
}


1 user says Thank You to pixelzombie for this useful post

1. fvarona

[fvarona Friend fvaronaJoin date: September 2011Posts: 7Downloads:0Uploads:0 Thanks: 4]

#432480

Yes, it works!!

Thanks a lot!!!!!

[Author]

Posts