Joomla Templates Club 406,261 posts

[activha Friend activhaJoin date: July 2012Posts: 114Downloads:17Uploads:6 Thanks: 5 Thanked: 1 times in 1 posts]

#183871

I have noticed that you have moved content size to css only with new version 1.0.7 so if I set a width for a component in index.php it is not correctly set for small devices.

How can I set a width 50% for a component only which keeps everything ok for all devices screen ?

earlier I would have written in index.php
[PHP]<div id=”content” <?php if ( JRequest::getCmd( ‘option’ ) == ‘com_jek2story’ ){ echo ‘style=”width: 50% !important;”‘ ;} ?>>
[/PHP]
and
[PHP]<div id=”aside” <?php if ( JRequest::getCmd( ‘option’ ) == ‘com_jek2story’ ){ echo ‘style=”width: 50% !important;”‘ ;} ?>>
[/PHP]

But this does not work any longer for small screen devices, I end up with half of screen on iphones and iPads

Thanks for the clue

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#479569

Hi activha,

If you want to set the css width, you can do it in file /templates/ja_wall/css/layout-normal.css line 24

body.has-aside #content {
width: 70%;
}

/* Aside —*/
#aside {
width: 30%;
}

You can also use the code above, but please remove !important rule.

Hope it helps.

Regards

[activha Friend activhaJoin date: July 2012Posts: 114Downloads:17Uploads:6 Thanks: 5 Thanked: 1 times in 1 posts]

#479803

No the question was :
how to set width for a component only ?

is it feasible by css only ?

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#479932

Hi activha,

<blockquote>You can also use the code above, but please remove !important rule.</blockquote>

Did you try this?

Regards

[activha Friend activhaJoin date: July 2012Posts: 114Downloads:17Uploads:6 Thanks: 5 Thanked: 1 times in 1 posts]

#480054

Well we solved it another way from within the component.

Thanks for your time anyway

I have noticed that with K2 blogs were now at full wdth compared with old version 1.0.6 where they were at only 70% of the width

Is it also in layout css or in k2 ?

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#480086

Hi activha,

We add a check that if there was no module on the right, the content will be 100%.
I do not know whether you are in this case or not.

Those CSS was defined in CSS file.

Regards

[activha Friend activhaJoin date: July 2012Posts: 114Downloads:17Uploads:6 Thanks: 5 Thanked: 1 times in 1 posts]

#480184

Yes and how can I remove this check for chosen components only ?

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#480258

Hi activha,

For the latest version you will see this block code in templatesja_wallindex.php

<?php if (WallHelper::hasAside()): ?>

If you want to add a check for you component, for Ex

if ( JRequest::getCmd( 'option' ) == 'com_jek2story') { .. }

Just put theme together

<?php if (WallHelper::hasAside() ('AND' OR 'OR' OPERATOR HERE) ( JRequest::getCmd( 'option' ) == 'com_jek2story')) : ?>


I do not really understand what you really want here.
For original question, just echo like this
echo ‘style=”width: 50%;”‘

If it is difficult for your, then you can hire a developer that will get the job done in several hours.

Regards

[activha Friend activhaJoin date: July 2012Posts: 114Downloads:17Uploads:6 Thanks: 5 Thanked: 1 times in 1 posts]

#480489

Well this code will change all layouts including mobile layouts.

what I want is only revert back to a default width of 70% for content layouts without aside module on components such as K2 and CB.

Width for iframes and grid can be set to 100% but 100% on components without aside modules is not looking good.

Basically then I need to put a condition on the layout css for some components only on the #content tag, but I dont know how.

On ja Wall prior to 1.0.6 it was easy to do in index.php but as you moved everything to css I dont’ really see how to do it as #content defaults to width 100%

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#480507

Hi activha,

Well this code will change all layouts including mobile layouts.
Since the mobile css use !important rule, so you can use { echo ‘style=”width: 50%;”‘ ;} ?>>

This will make the mobile layout always 100% full-width.

Please try with this and let me see the result also.

Regards

[activha Friend activhaJoin date: July 2012Posts: 114Downloads:17Uploads:6 Thanks: 5 Thanked: 1 times in 1 posts]

#480637

Well it works for mobile but then it destroys extra-wide layout which needs 50 % !

This was much easier with 1.0.6 🙁

[activha Friend activhaJoin date: July 2012Posts: 114Downloads:17Uploads:6 Thanks: 5 Thanked: 1 times in 1 posts]

#480641

I tried in index.php
[PHP]
<!– MAIN CONTENT –>

<?php if ( JRequest::getCmd( ‘option’ ) == ‘com_comprofiler’ || JRequest::getCmd( ‘option’ ) == ‘com_k2’ || JRequest::getCmd( ‘option’ ) == ‘com_uddeim’){ echo ‘<STYLE type=”text/css”>@media only screen and (max-width: 1585px) { div#content{width:60%;} </STYLE> <STYLE type=”text/css”>@media only screen and (min-width: 1586px) { div#content{width:50%;}}</STYLE>’; } ?>

<div id=”content”>[/PHP]

This seems to work for screens under 1586 px but does not work above?

If you have a better idea or can correct this, I’ll take it 🙂

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#480711

Hi activha,

Have you tried to add !important to the media screen width > 1586px yet ?
Like this

<!– MAIN CONTENT –>

<?php if ( JRequest::getCmd( 'option' ) == 'com_comprofiler' || JRequest::getCmd( 'option' ) == 'com_k2' || JRequest::getCmd( 'option' ) == 'com_uddeim'){ echo '<STYLE type="text/css">@media only screen and (max-width: 1585px) { div#content{width:60%;} </STYLE> <STYLE type="text/css">@media only screen and (min-width: 1586px) { div#content{width:50% !important;}}</STYLE>'; } ?>

<div id="content">

Please try and tell me the result.

Regards

[activha Friend activhaJoin date: July 2012Posts: 114Downloads:17Uploads:6 Thanks: 5 Thanked: 1 times in 1 posts]

#481060

Well I did it this way :

<?php if ( JRequest::getCmd( 'option' ) == 'com_comprofiler' || JRequest::getCmd( 'option' ) == 'com_k2' || JRequest::getCmd( 'option' ) == 'com_uddeim' ) { echo '<STYLE type="text/css">@media only screen and (min-width:720px) and (max-width: 1585px) { div#content{width:60%;} </STYLE> <STYLE type="text/css">@media only screen and (min-width: 1586px) { div#content{width:50%;}}</STYLE>'; } ?>

Is that correct ? or can you better it ?

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#481072

Yes, you can try it.

[Author]

Posts