How to get rid of border for intro article image Topic is solved
Moderator: General Support Moderators
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
-
- Joomla! Apprentice
- Posts: 12
- Joined: Mon May 02, 2016 8:46 am
How to get rid of border for intro article image
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!
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!
Last edited by toivo on Wed Oct 16, 2019 7:05 am, edited 1 time in total.
Reason: mod note: moved from 3.x Administration
Reason: mod note: moved from 3.x Administration
- toivo
- Joomla! Master
- Posts: 11524
- Joined: Thu Feb 15, 2007 5:48 am
- Location: Suzhou, China
Re: How to get rid of border for intro article image
Changing Joomla core files is not a good idea because changes may get overwritten in the next version update of Joomla.ziidgaa wrote: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.
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.
Toivo Talikka, Global Moderator
-
- Joomla! Apprentice
- Posts: 12
- Joined: Mon May 02, 2016 8:46 am
Re: How to get rid of border for intro article image
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.toivo wrote: ↑Wed Oct 16, 2019 7:24 amChanging 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.
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
- Joomla! Master
- Posts: 11524
- Joined: Thu Feb 15, 2007 5:48 am
- Location: Suzhou, China
Re: How to get rid of border for intro article image
What is the URL of the site where you want to get rid of the border for intro images?
Toivo Talikka, Global Moderator
-
- Joomla! Apprentice
- Posts: 22
- Joined: Thu Oct 03, 2019 3:41 pm
- Contact:
Re: How to get rid of border for intro article image
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.
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.
Last edited by toivo on Wed Oct 16, 2019 3:28 pm, edited 4 times in total.
Reason: mod note: removed long quote
Reason: mod note: removed long quote
-
- Joomla! Apprentice
- Posts: 12
- Joined: Mon May 02, 2016 8:46 am
Re: How to get rid of border for intro article image
https://designs.veronikahonestly.com/in ... irts/vegan
This is the exact path where I have the intro images shown right now.
-
- Joomla! Apprentice
- Posts: 12
- Joined: Mon May 02, 2016 8:46 am
Re: How to get rid of border for intro article image
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
- Joomla! Master
- Posts: 11524
- Joined: Thu Feb 15, 2007 5:48 am
- Location: Suzhou, China
Re: How to get rid of border for intro article image
The border originates from line 200 of the file templates/favourite/css/cms.css:
How to remove the border:
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.
How to remove the border:
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.
You do not have the required permissions to view the files attached to this post.
Toivo Talikka, Global Moderator
-
- Joomla! Apprentice
- Posts: 12
- Joined: Mon May 02, 2016 8:46 am
Re: How to get rid of border for intro article image
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.)toivo wrote: ↑Thu Oct 17, 2019 10:50 amThe 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.
I shall look into the separate file in case of template update but this will do for now (change made in cms.css)
- toivo
- Joomla! Master
- Posts: 11524
- Joined: Thu Feb 15, 2007 5:48 am
- Location: Suzhou, China
Re: How to get rid of border for intro article image
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.
Toivo Talikka, Global Moderator
-
- Joomla! Apprentice
- Posts: 12
- Joined: Mon May 02, 2016 8:46 am
Re: How to get rid of border for intro article image
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).toivo wrote: ↑Thu Oct 17, 2019 2:03 pmI 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.
So, again, thank you for all the help =)