How to get rid of border for intro article image Topic is solved

[ziidgaa]

Hi, my theme had set up a grey border for all images as default. I've managed to change the code for this (I kept the border, just set the image border opacity to 0 in rgba mode in the appropriate line of the code of "theme.css" - it doesn't have "template.css")

The code:

/* images */
img { max-width: 100%; height: auto; display: inline-block; }
p img { padding: 7px; background-color: rgba(17, 17, 17, 0.0); }
.moduletable.favth-clear p img { background-color: rgba(255, 255, 255, 0.0); }

So changing to 0.0 instead of 0.1 did the job for standard images inside articles.

But my intro images have still grey border and I can't find appropriate code to change that.
It looks like they may have inherited some class perhaps from elsewhere...
I've looked at the intro_image.php file (in layouts/joomla/content of the main installation, not theme's one) but not sure if and what to change there.
Any ideas where shall I look and what to do? If it's to do with intro-image class as I suspect - how to get to it and change it...? (on a global level, not one by one in every article)
Thanks!

[toivo]

I've looked at the intro_image.php file (in layouts/joomla/content of the main installation, not theme's one) but not sure if and what to change there.

Changing Joomla core files is not a good idea because changes may get overwritten in the next version update of Joomla.

Templates usually allow styling to be overridden by CSS entries in a special file, for example template-name/css/user.css in both Beez3 and Protostar. Your template may be different, which template are you actually using?

The template may have an option to add custom CSS entries to the styling from the back end of the template. The trick is to use first the Inspect function of the Web Developer extension of for example the Chrome browser to browse the HTML elements and their styling and find the right CSS attributes to customise or override.

[ziidgaa]

Changing Joomla core files is not a good idea because changes may get overwritten in the next version update of Joomla.

Templates usually allow styling to be overridden by CSS entries in a special file, for example template-name/css/user.css in both Beez3 and Protostar. Your template may be different, which template are you actually using?

The template may have an option to add custom CSS entries to the styling from the back end of the template. The trick is to use first the Inspect function of the Web Developer extension of for example the Chrome browser to browse the HTML elements and their styling and find the right CSS attributes to customise or override.

This advice (changing the php file in core Joomla) was all I found when it comes to this intro image froced border problems so far but I see your point (that it may be actually pointless after Joomla update) so I'm not gonna try to investigate this option further.

While I tried to use developer's tools to find the appropriate command/css/line code - I failed so far, that's why I came to ask here... I just didn't find anything useful in the code that I could orient myself in what I'm after and where to find it so I could change that part of code.

I use a free template, so not much support is available there - they usually respond with very short answers and end with recommending me to hire a developer =) That's not what I'd want to do really.
The template is called Favourite from FavThemes . com - I use it on a few more websites but this one is a new update, hence this problem with intro images (also, I don't use intro images on my other websites built with this theme, so never had this problem before).

[toivo]

What is the URL of the site where you want to get rid of the border for intro images?

[diaz365]

search the CSS files for "img" which is probably in more then one place in the styles.
A anchor tag link could also be adding a border around the image.
if it has a hyper link.
you would have to custom style the links for that image link class.

[ziidgaa]

What is the URL of the site where you want to get rid of the border for intro images?

https://designs.veronikahonestly.com/in ... irts/vegan

This is the exact path where I have the intro images shown right now.

[ziidgaa]

search the CSS files for "img" which is probably in more then one place in the styles.
A anchor tag link could also be adding a border around the image.
if it has a hyper link.
you would have to custom style the links for that image link class.

I think this may be the answer - probably not the first part because I've searched for the img in all possibly related files (that's how I got rid of the border around normal images in the article - see my original post) and didn't find any more img commands that would change the intro image border (as, of course, I thought first I could do it the same way as inside-article images - but no...)

But since the intro images ARE links - they link to the corresponding article itself, it may be something to do with what you mentioned - anchor tag link adding the border around (not sure it that's anchor thought... just a normal link - unless it automatically anchors to the beginning of the article...?)
I'm still not sure about this - as the normal images had also the same border around (and I just changed basic img style in the theme.css - the image border opacity to 0 - and that was it).
And also - I have some inside article images with links and they don't have the border.
But maybe it's different for the intro image...

So the question is, do you know how could I custom style the links for that image link class? It's worth a shot.

[toivo]

The border originates from line 200 of the file templates/favourite/css/cms.css:

original.jpg

How to remove the border:

modified.png

Please note that if your template allows customised styles to be added to a separate file, similar to the file user.css in Beez3 and Protostar, use that option so that possible new versions of the template do not revert the styling of the border.

[ziidgaa]

The border originates from line 200 of the file templates/favourite/css/cms.css

Please note that if your template allows customised styles to be added to a separate file, similar to the file user.css in Beez3 and Protostar, use that option so that possible new versions of the template do not revert the styling of the border.

HOORAY! This worked =) Thank you! I couldn't find that information when I went through the code with the developer's tool in google chrome - what did you use to find it? (Or perhaps I just didn't know where to properly look.)

I shall look into the separate file in case of template update but this will do for now (change made in cms.css)

[toivo]

I used the same Developer tool, the Inspect function in Chrome and checked the HTML elements with their attributes around the image. The effect of the changes to the attributes of the selected tags could be tested in real time in the same Inspect section of the browser window, which is very handy.

[ziidgaa]

I used the same Developer tool, the Inspect function in Chrome and checked the HTML elements with their attributes around the image. The effect of the changes to the attributes of the selected tags could be tested in real time in the same Inspect section of the browser window, which is very handy.

Thank you - I probably need to check some tutorials as I couldn't find what you did (although I've used this tool in the past and it helped me to find lines of codes I needed - not sure why I couldn't figure this one out).

So, again, thank you for all the help =)