Navigation

    APPDRAG Community

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular

    REMINDER

    Please be respectful of all AppDragers! Keep it really civil so that we can make the AppDrag community of builders as embracing, positive and inspiring as possible.

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

    Cloud CMS (Pagebuilder, Blog, Shop, Newsletters, Code Editor)
    2
    13
    768
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Linda MacDonald
      Linda MacDonald last edited by 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 {

      }

      1 Reply Last reply Reply Quote 0
      • Wassim
        Wassim last edited by

        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 1 Reply Last reply Reply Quote 0
        • Linda MacDonald
          Linda MacDonald @Wassim last edited by

          @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?

          1 Reply Last reply Reply Quote 0
          • Wassim
            Wassim last edited by

            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 2 Replies Last reply Reply Quote 0
            • Linda MacDonald
              Linda MacDonald @Wassim last edited by

              @Wassim sweet thanks Wassim 🤓🤩

              1 Reply Last reply Reply Quote 1
              • Linda MacDonald
                Linda MacDonald @Wassim last edited by

                @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

                1 Reply Last reply Reply Quote 0
                • Wassim
                  Wassim last edited by

                  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 4 Replies Last reply Reply Quote 0
                  • Linda MacDonald
                    Linda MacDonald @Wassim last edited by

                    @Wassim thanks Wassim will give it a whirl 🙂

                    1 Reply Last reply Reply Quote 0
                    • Linda MacDonald
                      Linda MacDonald @Wassim last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • Linda MacDonald
                        Linda MacDonald @Wassim last edited by 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>

                        <div class="blog-image appdrag-blog-component" blog-component="blog-image"></div>

                        1 Reply Last reply Reply Quote 0
                        • Linda MacDonald
                          Linda MacDonald @Wassim last edited by

                          @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:

                          <div class="blog-image appdrag-blog-component" blog-component="blog-image"></div>

                          1 Reply Last reply Reply Quote 0
                          • Wassim
                            Wassim last edited by

                            @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 1 Reply Last reply Reply Quote 0
                            • Linda MacDonald
                              Linda MacDonald @Wassim last edited by 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!!!!!!

                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post