Joomla Templates Club 406,261 posts

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#207557

When I write articles on my website I insert images manually, align them to the left side, and adjust their size on 250px using multithumb plugin.
However, sometimes I want to set the picture only in the intro, and not in full article, and then I use the tab “images and links”
The problem is that the intro image in the Blog layout has a size of 100 px and I can not change the size on 250px so it looks the same as the other. I tried with Firebug, but failed. Where is the CSS of the intro pictures?
On these links, you can see my problem:
http://planinarenje.ba/alpinizam-i-sportsko-penjanje (1. image)
http://planinarenje.ba/planinarske-ture/cvrsnica (3. image)
http://planinarenje.ba/ (1. image)

Regards,
Midhat

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#574710

Hi Midhat,

If you want to change the size for intro image, you will need to add style and change the markup a little bit. Below are my tweak:
– Go to file: root/templates/ja_obelisk/html/layouts/joomla/content/intro_image.php
Look for this line of code:

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> span3">
change to:

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> span4">

– Open the file: root/templates/ja_obelisk/html/com_content/category/blog_item.php
At approx line 36, you will see this line of code:

<div class="<?php echo (isset($images->image_intro) and !empty($images->image_intro))?"span9":"span12";?>">

Replace by:

<div class="<?php echo (isset($images->image_intro) and !empty($images->image_intro))?"span7":"span12";?>">

– Create a new css file called custom.css in this directory: root/templates/ja_obelisk/css/ and add this css rule:


.blog .pull-left .item-image {
margin: 10px;
width: 250px;
}
.blog .item .span7 {
margin-left: 35px;
}


Hope this helps.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#641054

Hi Midhat,

If you want to change the size for intro image, you will need to add style and change the markup a little bit. Below are my tweak:
– Go to file: root/templates/ja_obelisk/html/layouts/joomla/content/intro_image.php
Look for this line of code:

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> span3">
change to:

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> span4">

– Open the file: root/templates/ja_obelisk/html/com_content/category/blog_item.php
At approx line 36, you will see this line of code:

<div class="<?php echo (isset($images->image_intro) and !empty($images->image_intro))?"span9":"span12";?>">

Replace by:

<div class="<?php echo (isset($images->image_intro) and !empty($images->image_intro))?"span7":"span12";?>">

– Create a new css file called custom.css in this directory: root/templates/ja_obelisk/css/ and add this css rule:


.blog .pull-left .item-image {
margin: 10px;
width: 250px;
}
.blog .item .span7 {
margin-left: 35px;
}


Hope this helps.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#739718

Hi Midhat,

If you want to change the size for intro image, you will need to add style and change the markup a little bit. Below are my tweak:
– Go to file: root/templates/ja_obelisk/html/layouts/joomla/content/intro_image.php
Look for this line of code:

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> span3">
change to:

<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> span4">

– Open the file: root/templates/ja_obelisk/html/com_content/category/blog_item.php
At approx line 36, you will see this line of code:

<div class="<?php echo (isset($images->image_intro) and !empty($images->image_intro))?"span9":"span12";?>">

Replace by:

<div class="<?php echo (isset($images->image_intro) and !empty($images->image_intro))?"span7":"span12";?>">

– Create a new css file called custom.css in this directory: root/templates/ja_obelisk/css/ and add this css rule:


.blog .pull-left .item-image {
margin: 10px;
width: 250px;
}
.blog .item .span7 {
margin-left: 35px;
}


Hope this helps.

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#574787

Yes, now it’s much better. Thanks
On links with blog category image is ok and I just need to move the title to the left side:
http://planinarenje.ba/alpinizam-i-sportsko-penjanje (1. image)
http://planinarenje.ba/planinarske-ture/cvrsnica (3. image)
But on the front page with featured articles there was no change
http://planinarenje.ba/ (2. image)

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#574959

Hi Midhat,

Could you send me login info of your site: admin URL, admin account and ftp account?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#641303

Hi Midhat,

Could you send me login info of your site: admin URL, admin account and ftp account?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#739965

Hi Midhat,

Could you send me login info of your site: admin URL, admin account and ftp account?

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#575253

Thanks,
I sent you a PM

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#575356

I updated css a bit, kindly take a look.


.pull-left.item-image {
width: 250px;
height: 167px;
margin-top: 20px;
}

.blog-featured .item .article-content.has-image .article-header {
margin-left: -275px;
}

.blog .item .span7 .article-content .article-header { margin-left: -270px; }


1 user says Thank You to Saguaros for this useful post

1. midhat

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#641686

I updated css a bit, kindly take a look.


.pull-left.item-image {
width: 250px;
height: 167px;
margin-top: 20px;
}

.blog-featured .item .article-content.has-image .article-header {
margin-left: -275px;
}

.blog .item .span7 .article-content .article-header { margin-left: -270px; }


1 user says Thank You to Saguaros for this useful post

1. midhat

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#740348

I updated css a bit, kindly take a look.


.pull-left.item-image {
width: 250px;
height: 167px;
margin-top: 20px;
}

.blog-featured .item .article-content.has-image .article-header {
margin-left: -275px;
}

.blog .item .span7 .article-content .article-header { margin-left: -270px; }


1 user says Thank You to Saguaros for this useful post

1. midhat

[midhat Friend midhatJoin date: January 2010Posts: 161Downloads:101Uploads:21 Thanks: 43 Thanked: 12 times in 1 posts]

#575462

Thanks 🙂
It’s perfect

[Author]

Posts