is it possible to use our own custom css for the blog and ecommerce elements?

Linda MacDonald

Hey there guys

is there a way to add our own styling to blog and e-commerce ...tried adding my own styles to the blog button (a hover effect) but couldn't get it to work...I added a custom class in the "identification advanced" tab and then added a CSS custom code block and targeted the button in the CSS block: (example)

.blogbutton:hover {

}

Wassim

Hi,

Yes you can use your own custom CSS for everything but your issue is that you're trying to style an AppDrag button but the buttons work a different way for colors and color hovering (Js over CSS). Maybe create a custom element instead of using builtin buttons.

Linda MacDonald

@Wassim yup was actually considering a custom element ️but wont I then need to update the link manually every time i publish a New post? Or is there some piece of code I can use to make that part automatically update?

Wassim

Yep, the selector on what we create the link is :

.appdrag-blog-component[blog-component='blog-read-more']

Which means you need to add the class appdrag-blog-component and the attribute blog-component with the value blog-read-more

You should end up with

<div class="your-custom-beautiful-button appdrag-blog-component" blog-component="blog-read-more">Open Article</div>

Linda MacDonald

@Wassim sweet thanks Wassim 🤩

Linda MacDonald

@Wassim forgot to ask I am guessing that there is also something I need for the feature image and the text snippet in order to do some custom styling? so that what I actually do becomes dynamic?

thanks in advance
Linda

Wassim

Hello,
It's like the read more button but with other blog-component attribute values.
Here is the list

blog-title => Title
blog-subtitle => Subtitle
blog-author => Author
blog-date => Date
blog-tags => Tags
blog-image => Image
blog-read-more => Read more

Linda MacDonald

@Wassim thanks Wassim will give it a whirl

Linda MacDonald

@Wassim is it the same procedure when I go to style the list of blogs? like blog-list?

Linda MacDonald

@Wassim hey there I am using an HTML component for the div blocks but when I try and save, the editor doesn't want to. The save button just spins endlessly. What am I missing?

Also with regards to the blog image, do I not need some sort of URL and a reference to id or something that's used in the page builder? I've tried but I cannot get it to work.

<div class="blog-button appdrag-blog-component" blog-component="blog-read-more">Open Article</div>

Linda MacDonald

@Wassim hey there Wassim

could you please let me know what I am doing wrong with the blog image? I cannot seem to get it to work in a custom html/css block:

Wassim

@Linda-MacDonald said in is it possible to use our own custom css for the blog and ecommerce elements?:

Also with regards to the blog image, do I not need some sort of URL and a reference to id or something that's used in the page builder? I've tried but I cannot get it to work.

Hi Linda,
Can you show where you put your blog component? Maybe send a link?
The blog-image will work either on an img and set the SRC or on any other HTML tag and set the background. Are you sure your item has a height defined? Because you won't be able to see a 0px background image.

Linda MacDonald

@Wassim

there got it to work your advice on taking away space between columns fixed everything and I didn't even need custom html because I just changed the z-index to get the look I wanted...thaaaaaaank you Wassim!!!!!!

REMINDER

is it possible to use our own custom css for the blog and ecommerce elements?