Articles Add-On - Customize Elements
Stephane Hanrez
Hi,
When using the "Articles" add-on, how do I customize the look of the different elements ? As an example, I would like to change the font of the title and center it. I also would like to add an effet on the article picture (like a zoom out when user puts its mouse over it).
Is there any way to achieve that ?
Thanks
Mehtaz Afsana Borsha
Accepted AnswerFor title please use this CSS in your custom.css file
.sppb-article-info-wrap h3 a{
font-family: fantasy !important;
display: flex;
justify-content: center;
align-items: center;
}And for Zoom effect you need customization, and I am sorry to say that we do not provide customization support.
Stephane Hanrez
Accepted AnswerThanks for the title css... This also allowed me to better understand which class to target, and in the end I was able to apply my effects the the article list images using :
.sppb-addon-article {
transition: transform .2s;
}
.sppb-addon-article:hover {
transform: scale(0.9);
}Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us. For title font change you can give me your site URL, so that I can solve it via custom CSS. And for that addon animation you can follow this screenshot below:
-Regards.
Stephane Hanrez
Accepted AnswerHi,
Thanks for your answer, adding the website address in hidden content.
Stéphane
Stephane Hanrez
Accepted AnswerRegarding the animation, this is not at all what I'm looking for... I don't want an animation on loading the screen (which is what it does) but an animation on mouse over. I also want the animation to be on each article, not just one animation for the whole article list.
Stéphane
Mehtaz Afsana Borsha
Accepted AnswerCould you please give me that specific page link? And also screenshot of that portion?
Stephane Hanrez
Accepted AnswerHi Methaz,
Adding the link in the hidden content.
If you look at the page, there is first a white block with a picture and some text, then 2 rows of 3 columns.
First row of 3 columns has been created with the "Article List" add-on. I cannot customize the title (e.g. have it centered, and couldn't find a way to add an animation on each picture).
Second row of 3 columns is just a 3-column section to which I manually added the 3 images and text below. By doing that I can customize the text, and could add an animation using the css class mentionned above.
The issue is that I would like to get the same effect on the "Article List" add-on as I have when I do it manually, so that I can add a list of articles from a category and have this automatically updated when adding a new article.
Unfortunately, I couldn't find a way to customize the different elements from the Article List add-on... Could this be added in some way ? At least give us the option to add a css class for each element of the add-on.
Thanks Stéphane
Stephane Hanrez
Accepted AnswerI have just added a second row showing exactly what I need... but adding the 3 pictures manually (I want to achieve exactly the same using the "Article List" add-on).
What I did is that I added the following css to my template :
.zoom_in { transition: transform .2s; }
.zoom_in:hover { transform: scale(0.9); }and then added the "zoom_in" css class to my pictures.
Stephane Hanrez
Accepted AnswerAny news about this question ?
The css I shared below allows me to get the effect I wanted on a single picture, but I still couldn't find how to apply that to a picture within the "Article List" add-on, and still need to be able to customize the title of the add-on.
Thanks Stéphane